Custom Styles

🎨 Tailwind CSS Custom Styles: Your Personal Style Kitchen

Imagine Tailwind CSS as a giant box of LEGO blocks. The box comes with many colorful pieces you can use right away. But what if you want a special piece that’s not in the box? That’s where Custom Styles come in!

Custom styles let you create your own LEGO pieces and organize them perfectly in your box.

🏠 The @layer Directive: Your Style Organizer

Think of your closet at home. You have:

• Underwear drawer (base stuff you always need)
• Clothes hangers (things you wear together)
• Special costume box (extra fun additions)

Tailwind works the same way! It has three special drawers:

@layer base {
  /* Foundation styles */
  /* Like your underwear drawer */
}

@layer components {
  /* Reusable outfit combinations */
  /* Like your clothes hangers */
}

@layer utilities {
  /* Quick single-purpose helpers */
  /* Like your costume accessories */
}

Why Does This Matter?

The order of these layers is important! Think of it like getting dressed:

1. Base goes first (like putting on socks)
2. Components go next (like your shirt and pants)
3. Utilities go last (like adding a hat or scarf)

If you put a scarf on first, then a shirt, the scarf gets hidden! Same with CSS layers.

@layer base {
  h1 {
    font-size: 2rem;
    font-weight: bold;
  }
}

Real Example:

@layer base {
  body {
    font-family: 'Karla', sans-serif;
  }

  a {
    color: blue;
    text-decoration: underline;
  }
}

🔧 Custom Utilities: Your Special Tools

Remember those LEGO pieces? Custom utilities are like making your own tiny, special pieces.

A utility does ONE thing. It’s like a screwdriver—it only turns screws, but it does that job perfectly!

How to Create Custom Utilities

@layer utilities {
  .text-shadow-glow {
    text-shadow: 0 0 10px
      rgba(255, 255, 255, 0.8);
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}

Now you can use these anywhere:

<h1 class="text-shadow-glow">
  I'm glowing!
</h1>

<div class="rotate-y-180">
  Flipped!
</div>

Making Responsive Utilities

Want your utility to work differently on phones vs computers?

@layer utilities {
  .hide-on-mobile {
    display: block;
  }

  @media (max-width: 640px) {
    .hide-on-mobile {
      display: none;
    }
  }
}

🧱 Custom Components: Building Blocks

If utilities are tiny LEGO pieces, components are pre-built mini-structures.

Imagine always building the same house every time you play. Wouldn’t it be easier to save that house and reuse it? That’s a component!

Creating a Button Component

@layer components {
  .btn-primary {
    padding: 12px 24px;
    background: linear-gradient(
      135deg,
      #667eea,
      #764ba2
    );
    color: white;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.2);
  }
}

Creating a Card Component

@layer components {
  .card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow:
      0 4px 6px rgba(0,0,0,0.1);
  }

  .card-header {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 12px;
  }
}

Use it simply:

<div class="card">
  <div class="card-header">
    Hello Friend!
  </div>
  <p>This is my card.</p>
</div>

🎯 Arbitrary Values: Breaking the Rules (Safely!)

What if you need a very specific size that Tailwind doesn’t have?

Like if the LEGO instructions say “use a 47-pixel tall piece” but your box only has 48 and 46? You’d need to make exactly 47!

Arbitrary values let you use any number you want using square brackets [].

Examples

<!-- Exact width -->
<div class="w-[347px]">
  Exactly 347 pixels wide
</div>

<!-- Specific color -->
<div class="bg-[#FF6B35]">
  My special orange
</div>

<!-- Custom padding -->
<div class="p-[13px]">
  Exactly 13px padding
</div>

<!-- Specific font size -->
<p class="text-[17px]">
  17px text
</p>

Using CSS Variables

You can even use your saved colors!

<div class="bg-[var(--brand-color)]">
  Uses my saved color
</div>

Using calc()

Need math? No problem!

<div class="w-[calc(100%-40px)]">
  Full width minus 40 pixels
</div>

🔮 Arbitrary Properties: The Magic Wand

Sometimes you need a CSS property that Tailwind doesn’t have a class for. Arbitrary properties are like having a magic wand that can do ANYTHING!

Use the format: [property:value]

Examples

<!-- Clip path (no Tailwind class) -->
<div class="[clip-path:circle(50%)]">
  I'm a circle!
</div>

<!-- Writing mode (vertical text) -->
<span class="[writing-mode:vertical-rl]">
  Vertical!
</span>

<!-- Custom filter -->
<img class="[filter:sepia(50%)]"
  src="photo.jpg" />

<!-- Backdrop filter -->
<div class="[backdrop-filter:blur(8px)]">
  Frosted glass
</div>

<!-- Text stroke -->
<h1 class="[-webkit-text-stroke:2px_black]">
  Outlined Text
</h1>

When to Use Arbitrary Properties

Use them when:

• Tailwind doesn’t have a class for what you need
• You only need this style in ONE place
• You’re experimenting with something new

🗺️ How It All Fits Together

graph TD
    A["Your CSS File"] --> B["@layer base"]
    A --> C["@layer components"]
    A --> D["@layer utilities"]

    B --> E["Foundation Styles<br/>HTML elements"]
    C --> F["Reusable Patterns<br/>Cards, Buttons"]
    D --> G["Single-Purpose<br/>Helpers"]

    H["In Your HTML"] --> I["Regular Classes<br/>bg-blue-500"]
    H --> J["Arbitrary Values<br/>w-[347px]"]
    H --> K["Arbitrary Properties<br/>[filter:blur]"]

    style A fill:#667eea,color:#fff
    style H fill:#764ba2,color:#fff

🎪 Real-World Example: Building a Profile Card

Let’s combine everything we learned!

Step 1: Define base styles

@layer base {
  body {
    font-family: 'Karla', sans-serif;
    line-height: 1.6;
  }
}

Step 2: Create component

@layer components {
  .profile-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow:
      0 10px 40px rgba(0,0,0,0.1);
  }

  .profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 16px;
  }
}

Step 3: Add utility

@layer utilities {
  .glow-on-hover:hover {
    box-shadow:
      0 0 20px rgba(102,126,234,0.6);
  }
}

Step 4: Use in HTML

<div class="profile-card glow-on-hover
  w-[300px] [animation:fadeIn_0.5s]">

  <img class="profile-avatar
    [border:3px_solid_#667eea]"
    src="avatar.jpg" />

  <h2 class="text-[22px] font-bold">
    Sarah Smith
  </h2>

  <p class="text-[#666]">
    Web Designer
  </p>
</div>

💡 Quick Summary

🚀 You Did It!

You now know how to:

✅ Organize styles with @layer ✅ Create custom utilities for single tasks ✅ Build reusable components ✅ Use arbitrary values for exact numbers ✅ Apply arbitrary properties for any CSS

Think of yourself as a Style Chef now! You have all the ingredients (Tailwind classes) AND you know how to create your own secret recipes (custom styles).

The kitchen is yours. Go cook up something amazing! 🎨