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

…


This content originally appeared on DEV Community and was authored by Rishi Verma

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


This content originally appeared on DEV Community and was authored by Rishi Verma


Print Share Comment Cite Upload Translate Updates
APA

Rishi Verma | Sciencx (2021-04-24T20:37:24+00:00) Quick start with Tailwind CSS. Retrieved from https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/

MLA
" » Quick start with Tailwind CSS." Rishi Verma | Sciencx - Saturday April 24, 2021, https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/
HARVARD
Rishi Verma | Sciencx Saturday April 24, 2021 » Quick start with Tailwind CSS., viewed ,<https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/>
VANCOUVER
Rishi Verma | Sciencx - » Quick start with Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/
CHICAGO
" » Quick start with Tailwind CSS." Rishi Verma | Sciencx - Accessed . https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/
IEEE
" » Quick start with Tailwind CSS." Rishi Verma | Sciencx [Online]. Available: https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/. [Accessed: ]
rf:citation
» Quick start with Tailwind CSS | Rishi Verma | Sciencx | https://www.scien.cx/2021/04/24/quick-start-with-tailwind-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts