DEV Community

Cover image for Start with your first Tailwind CSS Project
Kavin Desi Valli
Kavin Desi Valli

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Paste the above in your terminal/command prompt

Now to install tailwind, we need to use npm which is a package manager for node and javascript. So, to install tailwind, you need to have node installed on your machine, which brings in npm with it

You can download Node from https://nodejs.org/en/download/

Initializing npm

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
Enter fullscreen mode Exit fullscreen mode

This will create the following file in the directory

  • package.json

Installing Tailwind

npm install tailwindcss --save
Enter fullscreen mode Exit fullscreen mode

This will create a folder called node_modules

Using tailwind

We will be having two directories in our folder

  • src
  • public

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
Enter fullscreen mode Exit fullscreen mode
cd src && touch styles.css && cd ..
Enter fullscreen mode Exit fullscreen mode

This will create the two directories and create are style.css file inside the src directory

cd public && touch index.html && cd ..
Enter fullscreen mode Exit fullscreen mode

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

code .
Enter fullscreen mode Exit fullscreen mode

Start editing CSS

Now, go to the style.css file inside your src folder and add the following:

@tailwind base;

@tailwind components;

@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

And add the following in place of it

"build-css": "tailwindcss build src/styles.css -o public/styles.css"
Enter fullscreen mode Exit fullscreen mode

Now, run the following in the terminal

npm run build-css
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

Collapse
shareef profile image
Mohammed Nadeem Shareef

Hey brother, you have provided wrong video link, correct one is this

Collapse
kavin25 profile image
Kavin Desi Valli Author • Edited

Hi Nadeem. I already went through the setup process in the blog post so I added the link to the second video on purpose

Collapse
shareef profile image
Mohammed Nadeem Shareef

okay, no worries.