← Back to Articles

How to Add Tailwind CSS to Your Vapor Project Using the Standalone CLI

A complete guide to integrating Tailwind CSS into your Vapor (Swift) web application using the standalone CLI — no Node.js required.

vapor tailwindcss swift web-development
How to Add Tailwind CSS to Your Vapor Project Using the Standalone CLI

A Complete Guide to Integrating Tailwind CSS into Vapor

A complete guide to integrating Tailwind CSS into your Vapor (Swift) web application using the standalone CLI — no Node.js required.

Download the Tailwind Standalone CLI

In your Vapor project root and download the appropriate binary and make it executable:

For Apple Silicon (M1/M2/M3/M4):

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

For Intel Macs:

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
chmod +x tailwindcss-macos-x64
mv tailwindcss-macos-x64 tailwindcss

For Linux (x64):

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
mv tailwindcss-linux-x64 tailwindcss

For Linux (ARM64):

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
chmod +x tailwindcss-linux-arm64
mv tailwindcss-linux-arm64 tailwindcss

Create Your Input CSS File

Create the directory structure and input CSS file. Create Resources/Styles/input.css with this content: 

@import "tailwindcss";

More information at: Beginner tutorial for setting up tailwind v 4 using the standalone CLI (no node.js)

Enable Static File Serving

Edit your Sources/APPNAME/configure.swift file and make sure FileMiddleware is enabled: 

import Leaf
import Vapor

// configures your application
public func configure(_ app: Application) async throws {
    // uncomment to serve files from /Public folder
    app.middleware.use(FileMiddleware(publicDirectory: app.directory.publicDirectory))
    app.views.use(.leaf)

    // register routes
    try routes(app)
}

Without this, your CSS file won't be accessible and you'll get 404 errors.

Build Your CSS

Now generate your CSS file:

./tailwindcss -i ./Resources/Styles/input.css -o ./Public/styles.css --minify

Add the Stylesheet to Your Templates

In your Leaf templates (e.g., Resources/Views/home.leaf), add the stylesheet link in the <head>: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vapor App</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>

Now you can use Tailwind's utility classes in your Leaf templates.

Watch Mode for Development

During development, you'll want Tailwind to automatically rebuild when you change your templates. Use watch mode: 

./tailwindcss -i ./Resources/Styles/input.css -o ./Public/styles.css --watch

Whenever you add or remove Tailwind classes in your Leaf templates, the CSS will automatically rebuild.