The Easiest way to install Tailwind CSS
Tags: tailwindcss, css, node, webdev
Published: 2021-06-22 10:40:48

In this section we will install tailwind css 2.2 using cli . tailwind css is introduce new version 2.2 with new features. tailwind css is released now and available for all. tailwind css added new feature like Tailwind JIT, First-letter/line variants , Selected text variants etc.  

👉 [visit my website for more contents](https://larainfo.com/)


tailwind cli also provider some good feature like watch for changes ,purge for removing unused classes, Minify the output, input and output file command and main jit mode.  

###New feature 
All-new improved Tailwind CLI

Before and after variants

First-letter/line variants

Selected text variants

List marker variants

Sibling selector variants

Exhaustive pseudo-class support

Shorthand color opacity syntax

Extended arbitrary value support

Improved nesting support

Caret color utilities

Background origin utilities

Simplified transform and filter composition

Per-side border color utilities

Built-in safelist, transform, and extract support


Before getting started with this tutorial, make sure that you have installed Node.js in your system.

###Building the new project
Create a directory named ‘new-project’ and navigate to the directory
```html
mkdir new-project
```
Next, Move to the directory
```html
cd new-project
```
Create new index.html file
```html
touch index.html
```
Next, You need to create css file you can give any css name, for me app.css

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind v2.2</title>
    <link rel="stylesheet" href="app.css">
</head>
<body class="bg-gray-200">
    <h1 class="flex justify-center text-4xl">Hello Tailwind v2.2 </h1>
</body>
</html>

```
as you can see app.css is empty for install tailwind css you need to run follow this command 

```html
npx tailwindcss -o app.css 
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z58ulb6jfafnuryp6pb.png)

Tailwind CLI watcher command

```html
npx tailwindcss -o app.css --jit --purge './**/*.html' -w
```
if you change any it will update

```html
npx: installed 127 in 5.74s


warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.


Rebuilding...
Done in 153ms.

```
Now tailwind css  is install if you want to create components you can create 

```html
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components{
    .btn{
        @apply bg-red-700 text-white rounded px-4 py-2;
    }
}

```
Put .btn class 
```html
<body class="bg-gray-200">
    <h1 class="flex justify-center text-4xl">Hello Tailwind v2.2 </h1>
    <button class="btn">Button</button>
</body>

```
And , Run this command 
```html
npx tailwindcss -i <you new file name> -o app.css --jit --purge './**/*.html' -w
```
if you create config file run same as tailwind command npx tailwindcss init
Tips you can run help to know more about tailwind cli 
```html
npx tailwindcss -help  
//output
tailwindcss v2.2.2

Usage:
  tailwindcss build [options]

Options:
  -i, --input       Input file
  -o, --output       Output file
  -w, --watch       Watch for changes and rebuild as needed
    --jit        Build using JIT mode
    --purge       Content paths to use for removing unused classes
    --postcss      Load custom PostCSS configuration
  -m, --minify       Minify the output
  -c, --config       Path to a custom config file
    --no-autoprefixer  Disable autoprefixer
  -h, --help        Display usage information
```