DEV Community

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

Posted on

Quick start with Tailwind CSS

#tailwindcss #css

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 (0)

Read next

soheilyr profile image

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Soheil yazdanyar -

ibn_abubakre profile image

Hiding Elements in CSS: The Accessible Way

Abdulqudus Abubakre -

wearethreebears profile image

A different approach to writing component variants with Tailwind CSS

Liam Hall -

wittedtech-by-harshit profile image

Flex, Grid, and Positioning in CSS: The Ultimate Tailwind CSS Guide

Harshit Singh -