Setup Tailwind CSS in 20 seconds without node_modules

Tired of running npm install / yarn and seeing tons of files installed in your node_modules just to process your Tailwind CSS file? I got you, have a look at this minimal approach.

---

Requirements

Make sure all dependencies have been installed before moving on:

• yarn or npm
• Node.js

---

Start

Create a CSS file (e.g. tailwind.css) and paste inside:

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

Run in terminal:

npx tailwindcss build tailwind.css -o style.css

Include style.css in your document:

<link rel="stylesheet" href="style.css">

Remove unused CSS

Create your Tailwind config file:

npx tailwindcss init

Enable:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],
  },
  // ...
}

Run in terminal:

npx tailwindcss build tailwind.css -o style.css

Autoprefixer: add browser prefixes

Since we don't want to rely on our node_modules in our root folder, let's install PostCSS CLI and Autoprefixer globally.

Install:

npm install -g postcss-cli autoprefixer

Run in terminal:

postcss style.css -u autoprefixer --no-map -o style.css

Minify your CSS

Install it globally:

npm install -g cssnano

Run in terminal:

postcss style.css -u cssnano --no-map -o style.min.css

Include style.css in your document:

<link rel="stylesheet" href="style.min.css">

Make stuff easier to use and use NPM scripts

Create package.json

npm init -y

Enable in package.json:

"scripts": {
  "tailwind": "npx tailwindcss build tailwind.css -o style.css",
  "autoprefixer": "postcss style.css -u autoprefixer --no-map -o style.css",
  "minify": "postcss style.css -u cssnano --no-map -o style.min.css",
  "build": "npm run tailwind && npm run autoprefixer",
  "production": "npm run tailwind && npm run autoprefixer && npm run minify"
},

Commands

Basic usage: process your CSS (development)

npm run tailwind

Process your CSS + Autoprefixer (development)

npm run build

Process your CSS + Autoprefixer + Minify CSS (production)

npm run production

Demo GitHub repository

Here is a ready to clone and working repo GitHub repository

Comments

[travislaborde]

hello, thanks for this post. I really want to try it out but it fails at the very start. when I use:

npx tailwindcss build tailwind.css -o style.css

I get the following failure:
npx: installed 80 in 4.169s
Cannot find module 'autoprefixer'

any ideas? thanks!

[samuel-joly]

I dont know why, but this command "postcss style.css -u autoprefixer --no-map -o style.css" fail to build the tailwind css, but if i remove "-u autoprefixer " everything is allright (at least for building the css)