Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 24, 2021 08:37 pm GMT

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
  • 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, run the following command
npm run prod

2. Configuring Tailwind CSS without 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 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, run the following command
npm run prod

Original Link: https://dev.to/thecoderishi/quick-start-with-tailwind-css-334n

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To