1. Configuring Tailwind CSS without using PostCSS plugin
Make a folder with any name and open the folder path in the terminal (You can use VS Code built-in terminal).
- Create package.json file π¦
npm init -y //default options
- Install tailwind CSS using npm
npm i tailwindcss
- Install Autoprefixer
npm i autoprefixer //For different browsers support
- Create a folder π name public, inside public folder create a file π named index.html and create another folder π named src , inside src folder create a file π named tailwind.css.
Your file structure should look like this
βββ tailwindcss
β βββ public
β β βββ index.html
β βββ src
β β βββ tailwind.css
.
.
.
- Open src/tailwind.css π and copy-paste below code π
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
- Create a build scrip which compiles the src/tailwind.css π and make actual compiled css inside the public folder π, open package.json π¦ file and copy-paste below code.
"scripts": {"build": "tailwindcss build ./src/tailwind.css -o ./public/tailwind.css"}
- Run build script
npm run build
This will generate compiled css inside the public folder π, and link this css in your index.html π(Note: Don't modify compiled css)
Customize tailwind CSS Config
- First create tailwind config file with the following command
npx tailwindcss init
It will generate tailwind.config.js π
In talwind.config.js π you can define your own custom property.
after changing talwind.config.js π again you need to run build script
npm run build
Compress size of tailwind.css(Production ready)
- Install NODE_ENV
npm install win-node-env
- In package.json π¦ file add the following script which reduces the compiled CSS (It will remove unused classes)
"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.cssβ
- Open tailwind.config.js π file add the following line in PURG.
purge:['./public/**/*.html']
- Now you can make production ready πͺ CSS by running the following command
npm run prod
2. Configuring Tailwind CSS with as PostCSS plugin
- Create package.json π¦ file
npm init -y //default options
- Install tailwind CSS using npm
npm i tailwindcss
- Install Autoprefixer
npm i autoprefixer //For different browsers support
- Install PostCSS-CLI Plugin
npm i postcss-cli
- Create Configuration files for Tailwind CSS and PostCSS using following command
npx tailwindcss init -p
This will generate two files tailwind.config.js and postcss.config.js
- Create a folder name public , inside public folder π create a file named index.html π and create another folder named src , inside src folder π create a file named tailwind.css π.
Your file structure should look like this
βββ tailwindcss
β βββ public
β β βββ index.html
β βββ src
β β βββ tailwind.css
.
.
.
- Open src/tailwind.css π and copy-paste below code
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
- Create a build scrip which compiles the src/tailwind.css π and make actual compiled css inside the public folder π, open package.json π¦ file and copy-paste below code.
"scripts": {"build": "postcss build ./src/tailwind.css -o ./public/tailwind.css"}
- Run build script
npm run build
This will generate compiled css inside the public folder π, and link this css in your index.html(Note: Don't modify compiled css)
Customize tailwind CSS Config
- First create tailwind config file with the following command
npx tailwindcss init
It will generate tailwind.config.js π
In talwind.config.js π you can define your own custom property.
after changing talwind.config.js πagain you need to run the build script
npm run build
Compress size of tailwind.css(Production ready)
- Install NODE_ENV
npm install win-node-env
- In package.json π¦ file add the following script which reduces the compiled css (It will remove unused classes)
"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.cssβ
- Open tailwind.config.js π file add the following line in purg.
purge:['./public/**/*.html']
- Now you can make production ready πͺ CSS by running the following command
npm run prod
Top comments (0)