DEV Community

Cover image for Quick start with Tailwind CSS
Rishi Verma
Rishi Verma

Posted on

Quick start with Tailwind CSS

#css #tailwindcss

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
Enter fullscreen mode Exit fullscreen mode
  • Install tailwind CSS using npm 
npm i tailwindcss
Enter fullscreen mode Exit fullscreen mode
  • Install Autoprefixer 
npm i autoprefixer //For different browsers support
Enter fullscreen mode Exit fullscreen mode
  • 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
.
.
.
Enter fullscreen mode Exit fullscreen mode
  • Open src/tailwind.css ๐Ÿ“„ and copy-paste below code ๐Ÿ“‹ 
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • 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"}
Enter fullscreen mode Exit fullscreen mode
  • Run build script 
npm run build
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

Compress size of tailwind.css(Production ready)

  • Install NODE_ENV 
npm install win-node-env
Enter fullscreen mode Exit fullscreen mode
  • 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โ€œ
Enter fullscreen mode Exit fullscreen mode
  • Open tailwind.config.js ๐Ÿ“„ file add the following line in PURG. 
purge:['./public/**/*.html']
Enter fullscreen mode Exit fullscreen mode
  • Now you can make production ready ๐Ÿ’ช CSS by running the following command 
npm run prod
Enter fullscreen mode Exit fullscreen mode

2. Configuring Tailwind CSS with as PostCSS plugin

  • Create package.json ๐Ÿ“ฆ file 
npm init -y //default options
Enter fullscreen mode Exit fullscreen mode
  • Install tailwind CSS using npm 
npm i tailwindcss
Enter fullscreen mode Exit fullscreen mode
  • Install Autoprefixer 
npm i autoprefixer //For different browsers support
Enter fullscreen mode Exit fullscreen mode
  • Install PostCSS-CLI Plugin 
npm i postcss-cli
Enter fullscreen mode Exit fullscreen mode
  • Create Configuration files for Tailwind CSS and PostCSS using following command 
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
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
.
.
.
Enter fullscreen mode Exit fullscreen mode
  • Open src/tailwind.css ๐Ÿ“„ and copy-paste below code 
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • 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"}
Enter fullscreen mode Exit fullscreen mode
  • Run build script 
npm run build
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

Compress size of tailwind.css(Production ready)

  • Install NODE_ENV 
npm install win-node-env
Enter fullscreen mode Exit fullscreen mode
  • 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โ€œ
Enter fullscreen mode Exit fullscreen mode
  • Open tailwind.config.js ๐Ÿ“„ file add the following line in purg. 
purge:['./public/**/*.html']
Enter fullscreen mode Exit fullscreen mode
  • Now you can make production ready ๐Ÿ’ช CSS by running the following command 
npm run prod
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
melroy89 profile image
Melroy van den Berg •

Thanks! I just want to mention that Tailwind v4 is now using @tailwindcss/cli