DEV Community

Cover image for How to setup Tailwind CSS
Arjun Vijay Prakash
Arjun Vijay Prakash

Posted on

How to setup Tailwind CSS

Firstly,

What is Tailwind CSS?

Tailwind is a CSS Framework created by Adam Wathan.

Unlike other frameworks, it does not come prebuilt with classes to add to the HTML tags.

Instead, it uses a different approach. It brings a much lower level of control by using utility-based classes.

You simply bring tiny components together to construct a UI that is unique.

** What Tailwind simply does is take a raw CSS File, processes this over a configuration file and produces and output. **

It is really helpful in creating responsive complex designs.

Check more on it's official website

Installation

Steps -

  • Make sure you have NodeJs installed in your system. If not download it here.

  • Write the following commands in the terminal opened in the specific location of the folder where to want to use/install it-

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  • Create a CSS file and link it to your HTML file and edit it with the below piece of code-
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • In your "tailwind.config.js" file, replace "content:[]" with "content:["*"]"

  • Add/edit the following line of JSON in your "package.json".

"scripts": {
    "start": "vite";
}
Enter fullscreen mode Exit fullscreen mode
  • Now, finally write the following in your terminal to start a Development server for running Tailwind CSS-
npm run start
Enter fullscreen mode Exit fullscreen mode

Where to go now?

Now you are ready to get into Tailwind CSS. I have found some great resources for you all(latest 2022)-

  1. Tailwind CSS Docs
  2. Pure Coding
  3. Raddy
  4. Traversy Media
  5. TechCode

Check out my Notes

Notes

Discussion (0)