Tailwind CSS and Custom Themes in Drupal 10: A Complete Guide for Frontend Developers

Introduction:

Frontend development used to rely on HTML and CSS files connected manually. Today, developers use modern tools to generate up-to-date, browser-compatible CSS.

Tailwind CSS is a modern utility-first CSS framework, perfect for building custom themes in Drupal 10. It allows developers to create unique designs quickly and efficiently without writing excessive CSS.

What is Tailwind CSS?

Tailwind CSS does not provide ready-made components like btn or card (as in Bootstrap).
Instead, it provides utility classes that can be combined to style any HTML element.

Examples of utility classes:

• bg-white — white background
• p-4 — padding
• rounded-lg — rounded corners
• shadow-md — shadow
• text-lg — text size
• font-bold — font weight
• text-gray-700 — text color

Example: Product Card

<div class="bg-white shadow-lg rounded-lg p-6 max-w-sm mx-auto">
  <img src="product.jpg" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-900">Product Name</h2>
    <p class="text-gray-700 mt-2">Short description of the product, its features and benefits.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition">Buy</button>
  </div>
</div>

Example: Table

<table class="min-w-full border border-gray-200">
  <thead>
    <tr class="bg-gray-100">
      <th class="px-4 py-2 text-left">Name</th>
      <th class="px-4 py-2 text-left">Email</th>
      <th class="px-4 py-2 text-left">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-gray-200 hover:bg-gray-50">
      <td class="px-4 py-2">John Doe</td>
      <td class="px-4 py-2">john@example.com</td>
      <td class="px-4 py-2">Editor</td>
    </tr>
    <tr class="border-t border-gray-200 hover:bg-gray-50">
      <td class="px-4 py-2">Mary Smith</td>
      <td class="px-4 py-2">mary@example.com</td>
      <td class="px-4 py-2">Administrator</td>
    </tr>
  </tbody>
</table>

Example: Responsive Layout

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="bg-white p-4 rounded shadow">Block 1</div>
  <div class="bg-white p-4 rounded shadow">Block 2</div>
  <div class="bg-white p-4 rounded shadow">Block 3</div>
</div>

Which Projects and Themes Tailwind CSS Is Best Suited For

1. Custom themes with unique designs
   • Corporate websites, startups, SaaS platforms.
2. Projects with responsive interfaces
   • Websites that need to look good on mobile, tablet, and desktop.
3. Themes with many components
   • Complex dashboards, marketplaces, admin panels.
4. Projects where rapid prototyping is important
   • Quickly building layouts and testing design ideas.
5. Websites with frequent design updates
   • Easily change styles by combining utility classes without rewriting CSS.

Less suitable projects:

• Sites using ready-made commercial themes with minimal customization.
• Simple landing pages or blogs where a standard theme is enough.

Conclusion

Tailwind CSS makes frontend development flexible, modern, and ideal for custom Drupal 10 themes. The utility-first approach allows developers to quickly assemble interfaces, easily modify styles, and maintain a consistent design across all components.