search

Tailwind CSS & Theming

Setup & Configuration:

  1. Install Tailwind Dependencies

    npm install tailwindcss postcss autoprefixer -D
npx tailwindcss init -p

  2. Configure tailwind.config.js

    module.exports = {
  content: ['./frontend/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
      },
      spacing: {},
    },
  },
  plugins: [],
};

  3. Define CSS Variables In frontend/styles/globals.css, declare theme variables:

    :root {
  --color-primary: #1f2937;
  --color-secondary: #3b82f6;
}
[data-theme='dark'] {
  --color-primary: #111827;
  --color-secondary: #6366f1;
}

  4. Enable Theming Toggle

    • Use Context API or custom hook (useTheme) to switch data-theme on <html>.

    • Persist user preference in localStorage.

Component Styling:

  • Use utility classes with custom colors: bg-primary, text-secondary.

  • Create reusable UI tokens in frontend/src/ui/theme.ts:

  • Leverage shadcn/ui and apply theme overrides via the className prop.

Responsive Design & Accessibility:

  • Define breakpoints in tailwind.config.js under theme.screens.

  • Ensure all color contrasts meet WCAG AA guidelines.

PreviousSupported Platforms & EnvironmentsNextNext.js & EVM Node Configuration

Last updated