Skip to main content

Styling & Tailwind CSS 4

The application uses Tailwind CSS 4 alongside Mantine for utility-first styling and rapid UI development. This document explains integration patterns and best practices.

Installation​

pnpm add -D tailwindcss postcss autoprefixer
pnpm exec tailwindcss init -p

Tailwind with Next.js App Router​

  • Add Tailwind directives to your global CSS (src/styles/globals.css):
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Include the global CSS in app/layout.tsx (client or server layout depending on usage):
import './styles/globals.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

JIT & Performance​

  • Tailwind 4 uses JIT by default — keep content paths narrow to reduce build overhead
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{ts,tsx,js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Using Tailwind with Mantine​

  • Prefer Mantine components for complex accessible UI primitives
  • Use Tailwind utilities for layout, spacing, and micro-optimizations
  • Avoid mixing heavy style logic between Mantine theme and Tailwind; choose one for a given component

Styling patterns​

  • Use className for Tailwind utilities in client components
  • Use cx or clsx for conditional classes
  • Extract repeated patterns into small utility components or Tailwind plugin

Dark mode​

  • Configure Tailwind dark mode to follow class or media preferences
module.exports = {
  darkMode: 'class',
};
  • Combine with Mantine color mode provider if using Mantine theme switching

Responsive design​

  • Use Tailwind responsive prefixes (sm:, md:, lg:) for breakpoints
  • Keep mobile-first styles and progressively enhance for larger screens

Accessibility & focus​

  • Ensure focus-visible styles are present for keyboard users
  • Avoid removing outlines without an accessible replacement

Linting & Formatter​

  • Use eslint-plugin-tailwindcss to ensure valid and consistent utility ordering
pnpm add -D eslint-plugin-tailwindcss

Best practices​

  • Keep layout and spacing in Tailwind; use Mantine for interactive controls
  • Create shared design tokens when necessary to keep parity between Mantine theme and Tailwind
  • Use semantic HTML and ARIA attributes when building custom components

Resources​