Getting Started With TailwindCSS

TailwindCSS is an open source CSS framework. Seems to be very popular and most widely used.

Let’s start Tailwinding

The website seems impressive. One thing that struck me was to write a lot of CSS classes. Let’s see how it goes.

Installation

Visit here for installation docs.

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It’s fast, flexible, and reliable — with zero-runtime.

I’ll start with Vite tutorial from here

Create vite project

npm create vite@latest my-project -- --template react
cd my-project

Install Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create tailwind.config.js file add:

 "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",

inside the content array.

Add Tailwind directives in index.css inside src directory.

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

Run the project:

$ npm run dev

Start adding TailwindCSS

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Okay so Tailwind’s Docs does not provide things directly. I thought it’d be like Bulma, easy docmentation.

Studying this doc.

Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.

Mentioned in docs and yeah I agree at first it is weird to see Tailwind. But I guess after trying it, it will better. For trying it got to go through the docs.

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

For example, to apply the bg-sky-700 class on hover, use the hover:bg-sky-700 class

Quite impressive!

As you go through the docs, slowly slowly they have provided things. There is a section called Core Concepts

Documentation is big, but good. I got basic idea about Tailwind now.

Still there is lot to covers and lot of classes to see.