Styling: CSS modules and Tailwind CSS

In this tutorial you will style the same Brew & Bean menu card twice: first with CSS Modules, then with Tailwind CSS. Seeing both side by side makes the trade-offs clear.

Prerequisites: a Vite + React project, props and lists, and the basics of CSS (selectors, margin, padding, flexbox; see *HTML and CSS essentials*). Plain JavaScript (JSX).

Normal CSS is global. If one file defines .title { color: red; }, every element with the class title anywhere in the app turns red. In a big app with many developers, class names collide and a change in one place breaks another. Everything in this lesson is a way to avoid that.

A CSS Module is any file named *.module.css. Vite supports it without any setup. When you import it, you get an object that maps your class names to generated unique ones such as MenuCard_title__x7Qa2. Nothing leaks out and nothing else leaks in.

.card {
  border: 1px solid #e5d9cc;
  border-radius: 12px;
  padding: 16px;
  background: #fffaf3;
  max-width: 280px;
}

.title {
  margin: 0 0 4px;
  font-size: 1.2rem;
  color: #4a2c17;
}

.category {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #8a6d57;
}

.price {
  margin-top: 12px;
  font-weight: 700;
}

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4a2c17;
  color: white;
  font-size: 0.7rem;
}

.soldOut {
  opacity: 0.5;
}

Ordinary CSS. Use camelCase class names such as soldOut so you can write styles.soldOut in JavaScript (styles['sold-out'] also works).

import styles from './MenuCard.module.css';

function MenuCard({ name, category, price, soldOut = false }) {
  const cardClass = soldOut ? styles.card + ' ' + styles.soldOut : styles.card;

  return (
    <article className={cardClass}>
      <h3 className={styles.title}>
        {name}
        {price >= 200 && <span className={styles.badge}>Premium</span>}
      </h3>
      <p className={styles.category}>{category}</p>
      <p className={styles.price}>₹{price}</p>
    </article>
  );
}

export default MenuCard;

styles.card is a string like 'MenuCard_card__a1b2c'. To combine classes, join them with a space; a small helper or the clsx package makes this tidier.

Tailwind gives you thousands of small classes, each doing one thing: p-4 is padding, rounded-xl rounds corners, text-lg sets font size. You build a design by combining them in className, without writing a CSS file. Tailwind scans your files and generates only the CSS you actually use, so the final file stays small.

It looks odd at first, like writing inline styles. The differences: classes come from a fixed scale (so spacing and colours stay consistent), they support hover, focus and screen-size variants (hover:bg-amber-100, md:flex), and there is no naming to invent.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

This is the setup for Tailwind version 4, current at the time of writing (2026). Version 3 used a tailwind.config.js file and PostCSS instead, so older tutorials look different. The official Tailwind docs have an install page for Vite.

@import "tailwindcss";

Tailwind 4 needs only this line. No config file is required to start.

function MenuCard({ name, category, price, soldOut = false }) {
  return (
    <article
      className={
        'w-70 rounded-xl border border-amber-200 bg-amber-50 p-4 shadow-sm ' +
        'hover:shadow-md ' +
        (soldOut ? 'opacity-50' : '')
      }
    >
      <h3 className="mb-1 text-lg font-semibold text-amber-950">
        {name}
        {price >= 200 && (
          <span className="ml-2 rounded-full bg-amber-950 px-2 py-0.5 text-xs text-white">
            Premium
          </span>
        )}
      </h3>
      <p className="text-xs uppercase text-amber-800">{category}</p>
      <p className="mt-3 font-bold">₹{price}</p>
    </article>
  );
}

export default MenuCard;

Same card, no CSS file. The class numbers are a scale: p-4 is 1rem of padding (4 x 0.25rem). Check the Tailwind docs if a class does not seem to work; names are the most common stumbling block.

You can read the card straight from the class list: padding, rounded corners, an amber border and background, a shadow that grows on hover. Notice the conditional class: just a string that is built with a ternary, like any other JavaScript.

Tailwind is mobile first. A class without a prefix applies to all screen sizes; a prefix such as md: applies from that width upwards. Most of your users in India are on phones, so start with the phone layout and add sm:, md: and lg: for bigger screens. States work the same way with prefixes: hover:, focus:, disabled:.

import MenuCard from './MenuCard';

function App() {
  return (
    <main className="mx-auto max-w-4xl p-4">
      <h1 className="mb-4 text-2xl font-bold text-amber-950 md:text-4xl">
        Brew & Bean menu
      </h1>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <MenuCard name="Espresso" category="coffee" price={120} />
        <MenuCard name="Cold Brew" category="coffee" price={220} />
        <MenuCard name="Banana Bread" category="bakery" price={130} soldOut />
      </div>
      <button className="mt-6 rounded-lg bg-amber-900 px-4 py-2 text-white hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 disabled:opacity-50">
        Order now
      </button>
    </main>
  );
}

export default App;

One column on phones, two from the sm breakpoint, three from lg. The w-70 class on the card fills a grid cell poorly, so change it to w-full when you use the grid (you will do this in the exercise).

Long className strings are the usual complaint. The answer in React is not to move the classes to a CSS file but to make a component. If a button style is repeated, build a <Button> component that holds the classes once. Then you get the reuse that CSS classes would have given you.

function Button({ children, variant = 'primary', ...props }) {
  const base = 'rounded-lg px-4 py-2 font-medium focus:outline-none focus:ring-2 disabled:opacity-50 ';
  const variants = {
    primary: 'bg-amber-900 text-white hover:bg-amber-800 focus:ring-amber-400',
    ghost: 'border border-amber-900 text-amber-900 hover:bg-amber-100 focus:ring-amber-400',
  };

  return (
    <button className={base + variants[variant]} {...props}>
      {children}
    </button>
  );
}

export default Button;

Use it as <Button>Order now</Button> or <Button variant="ghost" onClick={...}>Cancel</Button>. Tailwind must see complete class names in your source, so avoid building names like 'bg-' + colour at run time.

Both are widely used, and you can mix them in one project. Many job listings mention Tailwind, so learning it is worthwhile, but understanding CSS underneath is what makes you good at either one. If you cannot say what flex, p-4 or rounded-xl means in CSS, go back to the CSS lesson.

How this comes up in interviews: "How do you avoid style conflicts in a large React app?" (CSS Modules, utility classes, CSS-in-JS or naming conventions) and "What are the downsides of utility-first CSS?" (long class lists; solved by components).

Convert this CSS to Tailwind CSS version 4 utility classes for a React component. Keep the same look, use mobile-first responsive prefixes where I describe them, and after the code give a two-column table of each CSS property and the Tailwind class that replaces it, so I can learn the mapping.

---
[paste your CSS and JSX]
---

What to expect: Check unfamiliar classes in the Tailwind docs; AI sometimes invents classes or uses version 3 syntax.