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
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
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
@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
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
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
Top comments (1)
How to add my custom css file with @import? like @import "atoms/label.css";