Styling with Tailwind CSS 4

Modern Styling with Tailwind CSS 4

The Next.js Boilerplate integrates the latest Tailwind CSS 4, providing a high-performance, utility-first styling engine designed for speed and maintainability. This integration ensures that your UI layer is not only responsive but also optimized for the modern web, leveraging a CSS-first approach that reduces configuration overhead.

Purpose-Built for Performance

Tailwind CSS 4 is built from the ground up for speed. By utilizing a specialized engine, the boilerplate delivers near-instantaneous build times and a significantly smaller CSS footprint. This translates directly to better Core Web Vitals and a snappier experience for your end-users.

Key Benefits

• Zero-Configuration Setup: The boilerplate uses the new CSS-first configuration method. You can customize your design tokens directly within your CSS files using standard CSS variables, eliminating the need for complex JavaScript configuration files.
• Modern CSS Features: Take advantage of native CSS cascade layers, container queries, and advanced color functions right out of the box.
• Dynamic Utility Generation: Generate only the styles you actually use. The Just-In-Time (JIT) engine ensures your production CSS includes nothing but the essentials.
• Native Dark Mode Support: Easily implement theme switching and system-aware styling using simple modifiers.

Seamless Component Development

The boilerplate leverages Tailwind CSS across all architectural layers, from marketing pages to complex dashboard interfaces. It is fully integrated with Storybook, allowing you to build and test UI components in isolation with full utility class support.

Example: Responsive Grid and Interactive States

The following example demonstrates how the boilerplate utilizes Tailwind 4's expressive syntax to create a responsive portfolio grid with hover effects:

// src/app/[locale]/(marketing)/portfolio/page.tsx
export default async function Portfolio() {
  return (
    <div className="grid grid-cols-1 justify-items-start gap-3 md:grid-cols-2 xl:grid-cols-3">
      {/* Dynamic item with hover transitions */}
      <Link
        className="text-blue-600 transition-colors duration-200 hover:text-blue-800 hover:underline"
        href="/portfolio/project-1"
      >
        View Project
      </Link>
    </div>
  );
}

Advanced Layouts with Arbitrary Variants

With Tailwind 4, the boilerplate easily handles complex child styling and specific layout requirements using arbitrary variants, reducing the need for custom CSS classes.

// Example of targeting child elements directly
export default function DashboardLayout() {
  return (
    <div className="py-5 [&_p]:my-6 [&_h2]:text-2xl [&_h2]:font-bold">
      <h2>Welcome to your Dashboard</h2>
      <p>This paragraph automatically inherits spacing from the parent container.</p>
    </div>
  );
}

Design Consistency

By using a unified utility set, your development team maintains a consistent design language. Every spacing, color, and typography choice is pulled from a centralized system, ensuring that your application looks cohesive as it scales from a simple MVP to a full-scale enterprise product.