Skip to content

Instantly share code, notes, and snippets.

@Pilotin
Last active August 9, 2024 17:14
Show Gist options
  • Save Pilotin/c620db0152d25b9583d1acf4acb7fa21 to your computer and use it in GitHub Desktop.
Save Pilotin/c620db0152d25b9583d1acf4acb7fa21 to your computer and use it in GitHub Desktop.
TailwindCSS + PostCSS + AutoPrefixer + CSS Nano Install

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment