Starting with Tailwind

Step 1: Create a new folder and go into it1.

take project

Step 2: Install Tailwind and stuff:

npm init -y
npm install tailwindcss postcss-cli autoprefixer
npm install @fullhuman/postcss-purgecss
npx tailwind init

Step 3: Create new file postcss.config.js and paste in:

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
      './public/*.html',
    ],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  })

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...process.env.NODE_ENV === 'production'
            ? [purgecss]
            : []
    ]
}

Step 4: Create css/tailwind.css file and paste in:

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

Step 5: Open package.json and under scripts, add two new scripts:

"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"production": "postcss --env 'production' css/tailwind.css -o public/build/tailwind.css"

Step 6: Build Tailwind.

npm run build

This will create the public folder and compile the build/tailwind.css file under it.

Step 7: Create index.html file in the public folder, and include the compiles CSS file:

<link rel="stylesheet" href="/build/tailwind.css">

The resulting tailwind.css file is HUGE. Before publishing, run npm run production, which will use PurgeCSS to remove unnecessary classes.


  1. With oh-my-zsh, take foo is equivalent to mkdir foo && cd foo. [return]