Quick start with Tailwind CSS
Tags: tailwindcss, css
Published: 2021-04-24 20:37:24

# 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 :package:
```javascript
npm init -y //default options
```
* Install tailwind CSS using npm
```javascript
npm i tailwindcss
```
* Install Autoprefixer
```javascript
npm i autoprefixer //For different browsers support
```

* Create a folder :file_folder: name **public**, inside public folder create a file :page_facing_up: named **index.html** and create another folder :file_folder: named **src** , inside src folder create a file :page_facing_up: named **tailwind.css**.

###### Your file structure should look like this
```bash
├── tailwindcss
│   ├── public
│   │   ├── index.html
│   ├── src
│   │   ├── tailwind.css
.
.
.
```

* Open **src/tailwind.css** :page_facing_up: and copy-paste below code :clipboard:

```css
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
```

* Create a **build** scrip which compiles the src/tailwind.css :page_facing_up: and make actual compiled css inside the public folder :file_folder:, open **package.json** :package: file and copy-paste below code.

```javascript
"scripts": {"build": "tailwindcss build ./src/tailwind.css -o ./public/tailwind.css"}
```

* Run build script

```javascript
npm run build
```

###### This will generate compiled css inside the public folder :file_folder:, and link this css in your **index.html** :page_facing_up:(**Note**: Don't modify compiled css)

### Customize tailwind CSS Config

* First create tailwind config file with the following command
```javascript
npx tailwindcss init
```
###### It will generate **tailwind.config.js** :page_facing_up:

* In **talwind.config.js** :page_facing_up: you can define your own custom property.

* after changing **talwind.config.js** :page_facing_up: again you need to run build script

```javascript
npm run build
```

### Compress size of tailwind.css(Production ready)

* Install **NODE_ENV**
```javascript
npm install win-node-env
```

* In **package.json** :package: file add the following script which reduces the compiled CSS (It will remove unused classes)
```javascript
"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.css“
```
* Open **tailwind.config.js** :page_facing_up: file add the following line in PURG.

```javascript
purge:['./public/**/*.html']
```

* Now you can make production ready :muscle: CSS by running the following command
```javascript
npm run prod
```

# 2. Configuring Tailwind CSS with as PostCSS plugin

* Create **package.json** :package: file
```javascript
npm init -y //default options
```
* Install tailwind CSS using npm
```javascript
npm i tailwindcss
```
* Install Autoprefixer
```javascript
npm i autoprefixer //For different browsers support
```

* Install PostCSS-CLI Plugin
```javascript
npm i postcss-cli 
```
* Create Configuration files for Tailwind CSS and PostCSS using following command
```javascript
npx tailwindcss init -p 
```
######This will generate two files tailwind.config.js and postcss.config.js

* Create a folder name **public** , inside public folder :file_folder: create a file named **index.html** :page_facing_up: and create another folder named **src** , inside src folder :file_folder: create a file named **tailwind.css** :page_facing_up:.

###### Your file structure should look like this
```bash
├── tailwindcss
│   ├── public
│   │   ├── index.html
│   ├── src
│   │   ├── tailwind.css
.
.
.
```

* Open **src/tailwind.css** :page_facing_up: and copy-paste below code

```css
@tailwind base;
@tailwind components;
/* Write Custom CSS */
@tailwind utilities;
```

* Create a **build** scrip which compiles the src/tailwind.css :page_facing_up: and make actual compiled css inside the public folder :file_folder:, open **package.json** :package: file and copy-paste below code.

```javascript
"scripts": {"build": "postcss build ./src/tailwind.css -o ./public/tailwind.css"}
```

* Run build script

```javascript
npm run build
```

###### This will generate compiled css inside the public folder :file_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
```javascript
npx tailwindcss init
```
###### It will generate **tailwind.config.js** :page_facing_up:

* In **talwind.config.js** :page_facing_up: you can define your own custom property.

* after changing **talwind.config.js** :page_facing_up:again you need to run the build script

```javascript
npm run build
```

### Compress size of tailwind.css(Production ready)

* Install **NODE_ENV**
```javascript
npm install win-node-env
```

* In **package.json** :package: file add the following script which reduces the compiled css (It will remove unused classes)
```javascript
"prod": "NODE_ENV=production npx tailwindcss build ./src/tailwind.css -o ./public/tailwind.css“
```
* Open **tailwind.config.js** :page_facing_up: file add the following line in purg.

```javascript
purge:['./public/**/*.html']
```

* Now you can make production ready :muscle: CSS by running the following command
```javascript
npm run prod
```