Tailwind Config

The tailwind.config.js file is the primary setup for customizing Tailwind CSS to align with your project's design. This file enables developers to define theme settings such as colors, spacing, typography, breakpoints, and other design tokens. It allows you to extend or override Tailwind’s default utility classes, add custom variants, enable plugins, and other advanced configurations.

See the Tailwind CSS documentation for more information.

example:

import type { Config } from 'tailwindcss';
import { fontSize } from 'tailwindcss/defaultTheme';

const config: Omit<Config, 'content'> = {
  safelist: [
    {
      pattern: /\bgrid-/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    fontSize: {
      ...fontSize,
      base: ['var(--body-font-size, 1rem)', { lineHeight: '1.5' }],
    },
    extend: {
      fontFamily: {
        heading: 'var(--font-heading, sans-serif)',
        body: 'var(--font-body, sans-serif)',
        mono: 'var(--font-mono, sans-serif)',
      },
      fontSize: {
        'heading-6xl': ['var(--heading-6xl, 3.75rem)', { lineHeight: '1.25' }],
        'heading-4xl': ['var(--heading-4xl, 2.25rem)', { lineHeight: '1.5' }],
        'heading-2xl': ['var(--heading-2xl, 1.5rem)', { lineHeight: '1.5' }],
        'heading-xl': ['var(--heading-xl, 1.25rem)', { lineHeight: '1.5' }],
        'heading-base': ['var(--heading-base, 1rem)', { lineHeight: '1.5' }],
      },
      fontWeight: {
        'weight-heading': 'var(--weight-heading, 500)',
        'weight-body': 'var(--weight-body, 400)',
      },
      padding: {
        'btn-sm': 'var(--padding-btn-sm, 0 0.5rem)',
        'btn-base': 'var(--padding-btn-base, 0.5rem 1rem)',
        'btn-lg': 'var(--padding-btn-lg, 0 2rem)',
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        footer: {
          DEFAULT: 'hsl(var(--footer))',
          foreground: 'hsl(var(--footer-foreground))',
        },
      },
      borderRadius: {
        btn: 'var(--btn-radius, 0.375rem)',
      },
      keyframes: {
        fadeIn: {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        fadeIn: 'fadeIn .3s ease-in-out',
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
      transitionProperty: {
        width: 'width',
        height: 'height',
      },
    },
  },
  plugins: [
    require('tailwindcss-animate'),
    require('@tailwindcss/container-queries'),
  ],
};

export default config;

With this setup, you can use Tailwind classes like bg-primary and text-primary-foreground throughout your project.