Tailwind CSS Crash Course

Watch Tailwind CSS Crash Course https://youtu.be/mVzY256R9fs

Using Tailwind CSS without PostCSS

1. Create package.json file with default options

   npm init –y

2. Install Tailwind CSS

   npm install tailwindcss

3. Install AutoPrefixer

   npm install autoprefixer

4. Create public Folder then inside public folder create index.html. public/index.html where you can write your html code.


5. Create src Folder then inside src folder create tailwind.css file (You can change file name). src/tailwind.css file is used to write tailwind directives and custom CSS.


6. Open src/tailwind.css file then write code

   @tailwind base;
   @tailwind components;
   /* Write Custom CSS */
   @tailwind utilities;



7. Create Build Script which will compile src/tailwind.css file to actual css file. To do this, Open package.json file then write code

   "scripts": {"build": "tailwindcss build ./src/tailwind.css -o ./public/tailwind.css"}



8. Run the script

   npm run build

   This will generate a compiled tailwind.css file inside public folder. This public/tailwind.css file has actual tailwind css code. You should not modify this file.

9. Done

Note - If we are working on a small project which doesn’t use any kind of framework then we should use “Tailwind CSS without PostCSS” process to install tailwind.

Customize Tailwind CSS Configuration

1. Create tailwind configuration file

   npx tailwindcss init

   This will generate tailwind.config.js file

2. tailwind.config.js file is used to configure your own color palette, font, apply, purge etc.


3. Whenever you do changes in tailwind.config.js file you need to run

   npm run build

Build for Production (Reduce File Size)

1. Install NODE_ENV

   npm install win-node-env

2. Open package.json File then write below script

   "scripts": {"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.css“},

3. Include which file should be purged. Open tailwind.config.js file then write code

   purge:[‘./public/**/*.html’]

4. Make your code Production Ready

   npm run prod

Installing Tailwind CSS as a PostCSS Plugin

1. Create package.json file with default options

   npm init –y

2. Install Tailwind CSS

   npm install tailwindcss

3. Install AutoPrefixer

   npm install autoprefixer

4. Install PostCSS CLI

   npm install postcss-cli

5. Create Configuration files for Tailwind CSS and PostCSS

   npx tailwindcss init -p

   This will generate two files tailwind.config.js and postcss.config.js

6. Create public Folder then inside public folder create index.html. public/index.html where you can write your html code.


7. Create src Folder then inside src folder create tailwind.css file (You can change file name). src/tailwind.css file is used to write tailwind directives and custom CSS.


8. Open src/tailwind.css file then write code

   @tailwind base;
   @tailwind components;
   /* Write Custom CSS */
   @tailwind utilities;



9. Create Build Script which will compile src/tailwind.css file to actual css file. To do this, Open package.json file then write code

   "scripts": {"build": "postcss ./src/tailwind.css -o ./public/tailwind.css"}



10. Run the script

    npm run build

    This will generate a compiled tailwind.css file inside public folder. This public/tailwind.css file has actual tailwind css code. You should not modify this file.

11. Done

Customize Tailwind CSS Configuration

1. tailwind.config.js file is used to configure your own color palette, font, apply, purge etc.


2. Whenever you do changes in tailwind.config.js file you need to run

   npm run build

Build for Production (Reduce File Size)

1. Install NODE_ENV

   npm install win-node-env

2. Open package.json File then write below script

   "scripts": {"prod": "NODE_ENV=production postcss ./src/tailwind.css -o ./public/tailwind.css“},

3. Include which file should be purged. Open tailwind.config.js file then write code

   purge:[‘./public/**/*.html’]

4. Make your code Production Ready

   npm run prod