Tailwind CSS With Tailwind CLI

How to install Tailwind CSS without a front-end framework

Here’s my cheat sheet to Tailwind CSS with PostCSS and CSSNano. The guide follows the official documentation with a few modifications.

Installation

You’ll need a recent version of Node.js.

npm install -D tailwindcss@latest postcss@latest \
	autoprefixer@latest cssnano

PostCSS Configuration

Create a file postcss.config.js:

const cssnano = require('cssnano')
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')

const plugins =
  process.env.NODE_ENV === 'production'
    ? [tailwindcss, autoprefixer, cssnano]
    : [tailwindcss, autoprefixer]

module.exports = { plugins }

Tailwind Configuration

Create a file tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['**/*.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Important: Adjust the purge option to your use case.
I copy/pasted the configuration from somewhere else and Tailwind didn’t work properly for me.

Use Tailwind CLI

1. Without Customization

npx tailwindcss --postcss \
	-o <name and location of your css file>.css

Reference the compiled CSS file in your HTML:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/main.css" rel="stylesheet" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

2. With Customization

Create a stylesheet and add the required utility classes:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* add any custom styles here */

npx tailwindcss --postcss \
	-i <above stylesheet location>.css \
	-o <name and location of your css file>.css