Tailwind CLI easy setup

CLI

Released in 2021,https://tailwindcss.com/blog/standalone-cli, the tool allows for compiling Tailwind projects fat and directly from your CLI.

Traditionally developers would be required to build or integrate this into a whole frontend compiler setup.

Setup

Taken from the official docs, https://tailwindcss.com/docs/installation/tailwind-cli, you can easily get up an running with Tailwind even from 0 code.

These are the tree important parts:

1. Make a package.json

{
  "scripts": {
    "watch": "npx @tailwindcss/cli --input ./src/main.css --output ../Project.Name/wwwroot/css/styles.css --watch",
    "build": "npx @tailwindcss/cli --input ./src/main.css --output ../Project.Name/wwwroot/css/styles.css --minify --map",
    "build:docker": "npx @tailwindcss/cli --input ./src/main.css --output ./output/styles.css --minify --map"
  },
  "dependencies": {
    "@tailwindcss/cli": "^4.1.6",
    "@tailwindcss/typography": "^0.5.16",
    "tailwindcss": "^4.1.6"
  }
}

2. Make a tailwind.config.js file

module.exports = {
  content: ["../**/*.{cshtml,html,js}"],
  theme: {
    extend: {},
  }
};

3. Add a main.css file

@import "tailwindcss";
@config "../tailwind.config.js";

You of course have to run the npm install to add the Tailwind dependencies but after that it's basically just using the npm run scripts.

These specific examples were from this website with no additional frontend pipelines in place and using Umbraco CMS.

Building

Now I personally compile most stuff using Docker, but the basic concept is pretty much the same.

You have to ensure all the relevant files are in the expected location that are defined in the Tailwind config file.

But other then that, the CLI doesn't really offer much configuration via command arguments.

For me the setup looks like this:

...
FROM docker.io/node:slim AS frontend
WORKDIR /src
# Not ideal copy action, but we need all views from all folders
COPY . .
WORKDIR /src/Frontend
RUN npm ci; npm run build:docker
...

The command above copies the whole project into the container, not great, but it works, then starts compiling the CSS.

With the NPM run command arguments for the docker:build the output CSS will be minified and have a source map.

Awesome, this is what most projects needs and is plenty for me.

One could also just directly compile the CSS and include it in Git, but it's not something that can scale to a multi-developer setup.

Why/When to use this

Why use it?

Well, I think it's super easy and fast to setup and I don't have any JS or frontend pipeline and I don't really need one at the moment.

When to use?

If you:

• need to build a quick MVP

• want to use Tailwind but not to build a frontend pipeline

• want a fast and easy Tailwind setup

• want to use Tailwind in places it might not be supported officially

• build Umbraco packages