DEV Community

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

Posted on

Quick start with Tailwind 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)