Starting With Tailwind CSS

What is Tailwind CSS?

• CSS framework made up of utility classes
• Much lower-level than Bootstrap, Materialize etc

Using Tailwind CSS

• Install Tailwind CSS using npm (node package manager)
• You'll need node.js installed in your computer

To check if node is already installed or not, open up your terminal and write below command :

node -v

if you get some sort of number like that v14.1.0 you are good to go otherwise you can just download Node from here : Install Node.JS

How Tailwind Works

When we use tailwind we create a src file where we import all tailwind core styles or functionality and also we can write our own CSS styles then we use Tailwind to process it and output into Vanilla CSS file, and can link it to our index.html

Now let's start with Tailwind CSS :

1. Install Tailwind via npm
open up your terminal and run below commands

npm install tailwindcss

2. Add Tailwind to your CSS
Create a CSS file if you don’t already have one, and use the @tailwind directive to inject Tailwind’s base, components, and utilities styles

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

That's all for the initial setup now you can use tailwindcss classes in your index.html to style it, before that you had to run this command in terminal

tailwindcss build src/style.css -o public/style.css

Or you can add a script for this and also for production in package.json

If you have any sorts of problem with the process you can checkout official documentation Tailwind Docs,
Or you can comment down below I'll try my best to resolve it.