[go: nahoru, domu]

Skip to content

brong90s/modern-landing-page-w-tailwind

Repository files navigation

Install Tailwind CSS v2.2 as a PostCSS plugin with JIT mode

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:

How to use

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

Setup this boilerplate from scratch with yarn

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published