Tailwind CSS - lesson 1 | HackIndia Skills

Tailwind CSS - lesson 1 | HackIndia Skills | HackIndia

Example

Old CSS habit

This works, but you split one visual idea across two places. On a small project, that slows you down.

// App.jsx
export default function App() {
  return <section className="project-card">UPI Splitter</section>;
}

// style.css
.project-card {
  padding: 16px;
  border-radius: 12px;
  background: white;
  color: #0f172a;
}

Example

Tailwind habit

Now the styling is attached to the section. You can scan the element and understand its spacing, shape, colour, and text treatment.

export default function App() {
  return (
    <section className="rounded-xl bg-white p-4 text-slate-900 shadow-sm">
      UPI Splitter
    </section>
  );
}

Tip

Use current v4 setup

In Tailwind CSS v4 with Vite, the modern setup uses the official Vite plugin and a single CSS import. Older tutorials may show @tailwind base, @tailwind components, and @tailwind utilities. For v4, use @import "tailwindcss".

/* src/index.css */
@import "tailwindcss";

Think in utility classes

One idea

Why this helps

Old CSS habit

Tailwind habit

Read a utility

Do not translate everything

Use current v4 setup

Do this now

Quick check