Install Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

For installing Tailwind write some command in Terminal.

Screenshot 2022-12-09 083140.png

1st step:-

npm install -D tailwindcss

After entering the command in terminal some file's are downloaded like package.json or package-lock.json

2nd step:-

npx tailwindcss init

In 2nd step this command entered in terminal the tailwind.config.js file downloaded.

3rd step:-

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4th step:-

src folder and input.css file

Make a folder with a name of src and add a input.css file. and write some tailwind part in input.css .
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

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

5th step:-

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

//for installing output.css with .dist folder
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

6th step:-

Start using Tailwind in your HTML

Add your compiled CSS file to the and start using Tailwind’s utility classes to style your content.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

//link output.css file
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Use TAILWIND CSS

Get started with Tailwind CSS

Table of contents

Install Tailwind CSS