Setup Tailwind CSS in 20 seconds without node_modules

Tomasz Bujnowicz — Mon, 06 Jul 2020 07:11:38 +0000

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

DEV Community: Tomasz Bujnowicz

Setup Tailwind CSS in 20 seconds without node_modules

Requirements

Start

Remove unused CSS

Autoprefixer: add browser prefixes

Minify your CSS

Make stuff easier to use and use NPM scripts

Commands

Demo GitHub repository