Tailwind CSS: Easy Styling for Websites

Tailwind CSS v4 changes how we style websites by letting you use small, ready-made pieces of code. This full guide on Tailwind CSS will teach you everything, from simple styling rules to making websites look good on different screen sizes. It will help you build websites faster and keep them tidy.

What are Tailwind CSS styling rules?

Tailwind CSS styling rules are like tiny, single-purpose instructions that you put directly into your website’s code (HTML). Instead of writing your own custom styling code, you just combine these small instructions to make your designs.

Copy<div class="bg-white p-6 rounded-lg shadow-md w-full mx-auto">
  <h2 class="text-xl font-bold text-gray-900 ">Welcome to Tailwind CSS</h2>
  <p class="text-gray-600 mt-2">Build faster with utility classes</p>
</div>

Why pick Tailwind CSS instead of old-school styling?

Build faster: No need to write your own styling code or jump between different files. You can style things right in your HTML.

Easier to manage: When you make changes, they only affect the specific part you’re working on. This means less chance of messing up other styles.

Smaller file sizes: Tailwind CSS only includes the styling rules you actually use in your project, making your website load quicker.

Looks consistent: It comes with a built-in system that makes sure your spacing, colors, and text always look the same.

Making websites look good on any device with Tailwind CSS

Tailwind CSS makes it simple to adjust your website for different screen sizes. You just add special prefixes like sm:, md:, lg:, or xl: to your styling rules to make them change based on the screen size.

Copy<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-base-50 text-black p-4 rounded">
    <h3 class="text-base font-semibold">Responsive card</h3>
    <p class="text-sm opacity-90">Adapts to screen size</p>
  </div>
</div>

Tailwind CSS screen size points:

• sm: - 640 pixels and up
• md: - 768 pixels and up
• lg: - 1024 pixels and up
• xl: - 1280 pixels and up

How to make Tailwind CSS dark mode work

Adding a dark mode to your website with Tailwind CSS is easy. Just use the dark: prefix to apply styles that only show up when dark mode is on.

Copy<div class="bg-base-50 dark:bg-gray-900 p-6 rounded-lg">
  <h2 class="text-gray-900   text-xl font-bold">
    Dark mode ready
  </h2>
  <p class="text-gray-600 dark:text-gray-300">Automatically switches themes</p>
  <button
    class="bg-blue-500 mt-8 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white px-4 py-2 rounded"
  >
    Get started
  </button>
</div>

Toggle your laptop’s dark mode to see the difference.

Clever Tailwind CSS tricks

When you hover or click

Tailwind CSS makes it simple to add interactive effects using special prefixes:

Copy<button
  class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 active:bg-blue-700 px-6 py-3 text-white rounded-md transition-colors"
>
  Interactive button
</button>

Interactive button

Custom values for special cases

If you need values that aren’t part of the standard design system, you can use Tailwind CSS’s special way of adding custom values:

Copy<div class="bg-[#ff6b35] w-[200px] grid-cols-[1fr_100px_1fr]">
  <!-- Custom values when needed -->
</div>

Styling parts of a group

You can style child elements based on what their parent element is doing by using group rules:

Copy<a href="#" class="group block p-4 hover:bg-gray-50 rounded-xl">
  <h3 class="group-hover:text-blue-600">Article title</h3>
  <span class="group-hover:underline text-blue-500">Read more →</span>
</a>

Hover the card.

Article title

Read more →

Making Tailwind CSS work faster

How Tailwind CSS builds its code

Tailwind CSS looks through your project files and only creates the styling code for the rules you actually use. This process, called “purging,” makes the styling files incredibly small.

Copy// Tailwind automatically detects these classes
function Button({ size, children }) {
  const sizeClasses = {
    sm: "px-3 py-1 text-sm",
    lg: "px-6 py-4 text-lg",
  }[size];

  return (
    <button
      className={`bg-blue-500 hover:bg-blue-600 text-white rounded ${sizeClasses}`}
    >
      {children}
    </button>
  );
}

When to use direct styles with Tailwind CSS

Use direct styles for values that change, like those from databases or online services:

Copyfunction DynamicCard({ bgColor, textColor, children }) {
  return (
    <div
      style={{
        "--bg-color": bgColor,
        "--text-color": textColor,
      }}
      className="bg-[var(--bg-color)] text-[var(--text-color)] p-6 rounded-lg"
    >
      {children}
    </div>
  );
}

Best ways to use Tailwind CSS

Handling repeated parts

Don’t repeat styling rules; instead, create reusable parts (components):

Copyfunction TeamMember({ member }) {
  return (
    <div className="text-center">
      <img
        className="w-16 h-16 rounded-full mx-auto border-2 border-white shadow-sm"
        src={member.avatar}
        alt={member.name}
      />
      <p className="text-sm font-medium text-gray-900 mt-2">{member.name}</p>
    </div>
  );
}

function TeamGrid({ members }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
      {members.map((member) => (
        <TeamMember key={member.id} member={member} />
      ))}
    </div>
  );
}

Combining rules well

Layer different styling rules to make cool designs:

Copy<div
  class="relative overflow-hidden rounded-xl bg-white  ring-1 ring-black/5"
>
  <div
    class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-600/10"
  ></div>
  <div class="relative p-6">
    <h3 class="text-lg font-semibold text-gray-900">Modern card design</h3>
    <p class="text-gray-600 mt-2">Multiple utilities create complex effects</p>
  </div>
</div>

Tailwind CSS compared to other tools

Tailwind CSS good points:

• Using small rules means less extra styling code
• You can change almost anything about the design
• Works faster because it only includes what you use
• Quicker to build once you get the hang of it
• Great tools for making designs work on any screen
• Has built-in dark mode support

Great for:

• Quickly trying out new designs
• Making unique designs
• Working with frameworks like React, Vue, and Angular
• Teams that want consistent designs

Starting with Tailwind CSS v4

1. Install Tailwind CSS: npm install tailwindcss
2. Set up your build process: Get PostCSS or your favorite build tool ready
3. Make your first part using the styling rules
4. Learn the screen size prefixes (sm:, md:, lg:, xl:)
5. Master how to use interactive states (hover:, focus:, active:)
6. Turn on dark mode with the dark: prefix

To sum it up

Tailwind CSS v4 makes building modern websites super efficient. Its way of using small styling rules, along with features for different screen sizes and dark mode, makes it the best choice for creating websites that are easy to manage and perform well.

By learning the Tailwind CSS styling rules, how to make designs work on different screens, and the clever tricks in this guide, you’ll make your work much smoother and create better experiences for people using your websites.

Start using Tailwind CSS today and see the future of easy, direct styling.

/Michael Andreuzza