DEV Community

Cover image for Starting With Tailwind CSS

Posted on


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

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

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

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

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

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

build and production scripts

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.

Top comments (2)

Sloan, the sloth mascot
Comment deleted
surajitshaw profile image

Thanks for your valuable comment brother, I really appreciate your thoughts. Indeed I'm a pathetic writer I can't explain things clearly I'll work on that. Now I made some changes, I guess now it is little better than before. If you had any suggestion feel free to tell me.

Thank you for your time.

Does your company have something to share with DEV?

Create an Organization and start sharing content with the community on DEV.