This is a boilerplate for Tailwind CSS installed as a postCSS plugin and configured for two modes - Watching file changes for development and optimizing for production:
Step 1:
yarn
Step 2:
yarn build
Watches files as you make changes to your index.html
within public
folder
Step 3:
yarn prod
Uses cssnano
to minify the stylesheet for production
Note to Windows users:
Change the build
script to
"build": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"
On windows, if you face an error "NODE_ENV is not recognised..."
, you must install win-node-env
, so just run:
npm i win-node-env
yarn init
yarn add -D tailwindcss@latest postcss-cli@latest autoprefixer@latest
Create a new folder name public and inside it create file index.html and styles.css
Create tailwind.css at root directory.
npx tailwindcss init -p
Change 'purge' of tailwind.config.js as tailwind documents.
Add mode: 'jit'
above of purge
Change the build script to
"build": "set TAILWIND_MODE=watch&postcss tailwind.css -o ./public/styles.css -w --verbose"
Change the prod to
"propd": "NODE_ENV=production postcss tailwind.css -o ./public/styles.css"
Copy script from postcss.config.js and replace with it.