The Easiest way to install Tailwind CSS with Tailwind CLI

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.

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

mkdir new-project

Next, Move to the directory

cd new-project

Create new index.html file

touch index.html

Next, You need to create css file you can give any css name, for me app.css

<!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

npx tailwindcss -o app.css

After installation you can see you have all tailwind css property available

npx: installed 127 in 7.396s
Done in 5483ms.

tailwind css 2.2 image

Tailwind CLI watcher command

npx tailwindcss -o app.css --jit --purge './**/*.html' -w

if you change any it will update

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

Now create new file

@tailwind base;
@tailwind components;
@tailwind utilities;


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

Put .btn class

<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 (i) for input (o) output and (-w) watch

npx tailwindcss -i <you new file name> -o app.css --jit --purge './**/*.html' -w

output:

hello jit

if you create config file run same as tailwind command npx tailwindcss init

npx tailwindcss init
//output
npx: installed 127 in 5.083s

Created Tailwind CSS config file: tailwind.config.js

tailwind css 2.2 folder

Tips you can run help to know more about tailwind cli

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