TailwindCSS + PostCSS + AutoPrefixer + CSS Nano Install

tailwindcss-postcss-autoprefixer-cssnano.md

Setup

• Create new working folder /tailwind/. Open in terminal
• run npm init -y
• run npm install tailwindcss @tailwindcss/custom-forms postcss-cli autoprefixer postcss-nested cssnano
• run npx tailwind init
• Edit tailwind.config.js and replace plugins: [], with:

plugins: [
    require('@tailwindcss/custom-forms')
],

• Create a new file postcss.config.js. Insert the following code:

module.exports = {  
    plugins: [  
        require('tailwindcss'),  
        require('postcss-nested'),  
        require('autoprefixer'),
        require('cssnano')({  
            preset: 'default'  
        })  
    ]
}

• Create a new file tailwind.css. Insert the following content:

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

• Open package.json
• Replace the "test": "echo ..." line with:

"build": "postcss tailwind.css -o tailwind.min.css",
"watch": "postcss tailwind.css -o tailwind.min.css --watch"

• Run the command: npm run build or npm run watch
• ???
• Profit!

Folder Structure

tailwind/
├─ node_modules/
│  └─ ...
├─ package.json
├─ package-lock.json
├─ postcss.config.js
├─ tailwind.config.js
├─ tailwind.css
└─ tailwind.min.css

Video Tutorial

https://tailwindcss.com/course/setting-up-tailwind-and-postcss