Start with your first Tailwind CSS Project
Tailwind CSS is a low-level css framework which provides you hundred of classes to make styling easier. I have even written a full website without writing any custom css. Tailwind can do that. Lately, it is being used in many big projects and companies
Making a directory
mkdir tailwind_dev && cd tailwind_dev
Paste the above in your terminal/command prompt
You can download Node from nodejs.org/en/download
To use npm inside a project, you need to initialize the project to use npm. So, to do that, paste the below in the command line
npm init -y
This will create the following file in the directory
npm install tailwindcss --save
This will create a folder called node_modules
We will be having two directories in our folder
The src folder will have the uncompiled css. The public folder will have everything ready and all the html, js, etc, files.
So, to do that create these two using the following command
mkdir public && mkdir src
cd src && touch styles.css && cd ..
This will create the two directories and create are style.css file inside the src directory
cd public && touch index.html && cd ..
Now, open the folder in your favourite code editor. My favourite is VS Code, and if you have it installed you can open the directory with the following command
Start editing CSS
Now, go to the style.css file inside your src folder and add the following:
@tailwind base; @tailwind components; @tailwind utilities;
These are just some basic tailwind css you need to import to get started.
Now, in you package.json file and remove the following line:
"test": "echo \"Error: no test specified\" && exit 1"
And add the following in place of it
"build-css": "tailwindcss build src/styles.css -o public/styles.css"
Now, run the following in the terminal
npm run build-css
Now, you would be able to see a styles.css file inside the public directory
Editing HTML to use tailwind
Now in the index.html file, add the following inside the head tag
<link rel="stylesheet" href="styles.css">
Voilà, you are ready to use tailwind. To verify, just add the following in the body tag
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3>
If the size of all the three texts, is the same, then you're ready to start off. I would suggest going through the video below and the following videos of the playlist, of The Net Ninja. I learnt Tailwind CSS from his videos and personally love the way, he teaches it
You should also go through the Tailwind documentation for better understanding