In this topic,
We are going to see how to install tailwind CSS.
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file.
It’s fast, flexible, and reliable — with zero runtime.
First of all, you download Nord js on your pc.
Here is the nord.js download link: https://nodejs.org/en/
Then if you want to see if the node is downloaded or not then you open the command prompt and give the command “node -v”.
Then you create a folder on your PC and name the folder “tailscss”. And not name the folder “tailwindcss” as that name will conflict with the file.
Way 1: Play CDN
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.
Here script CDN link “tailwindcss.com”.
<script src="https://cdn.tailwindcss.com"></script>
Way 2: Tailwind CLI
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
Step-1: Install Tailwind CSS
Now you run npm install -D tailwindcss in the terminal.
E:\>tailcss> npm install -D tailwindcss
Then Install tailwindcss via npm, and create your tailwind.config.js file.
E:\>tailcss> npx tailwindcss init
Step-2: Configure your template paths
Now the file tailwind.config.js has been created in your folder.
Now add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Then you create the src folder in your project. And create a CSS file and save it in the src folder as input.css.
Step-3: Add the Tailwind directives to your CSS
Now add the @tailwind directives for each of Tailwind’s layers to your input.css file.
@tailwind base; @tailwind components; @tailwind utilities;
Then you create the dist folder in your project. And create a CSS file and save it in the dist folder as output.css.
Step-4: Start the Tailwind CLI build process
Now Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Now tailwind CSS will be added to your output.css file.
Now you create an Html file and save it in the src folder as index.html
Step-5: Start using Tailwind in your HTML
Add your compiled CSS file to the <head> 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 href="../dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Now check the output.
Review the below Image.
I hope you guys found something useful ??
