Configuration & Customization

Tailwind Configuration

Tailwind is configured through tailwind.config.js. This file lets you customize the default theme, add plugins, and control which utilities are generated.

Extending the Theme

Use theme.extend to add custom values without overriding defaults:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        display: ['Oswald', 'sans-serif'],
      },
    },
  },
}

Custom values become first-class utilities: bg-brand, text-brand-light, p-72, font-display.

Arbitrary Values (JIT Mode)

Tailwind's JIT (Just-In-Time) engine generates utilities on demand. Since Tailwind v3, JIT is the default — every class is generated only when used, keeping CSS bundles tiny.

JIT also enables arbitrary values using square bracket notation:

<div class="bg-[#1da1f2] text-[14px] p-[5px] grid-cols-[1fr_500px_2fr]">
  Custom one-off values
</div>

Arbitrary values work with any utility: w-[calc(100%-2rem)], top-[117px], bg-[#custom].

Plugins

Tailwind's plugin system lets you register new utilities, components, or base styles:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),       // form reset
    require('@tailwindcss/typography'),   // prose class
    require('@tailwindcss/aspect-ratio'), // aspect-w/h
    plugin(function({ addUtilities }) {
      addUtilities({
        '.text-shadow': {
          textShadow: '0 2px 4px rgba(0,0,0,0.10)',
        },
      })
    }),
  ],
}

The official @tailwindcss/typography plugin provides the prose class for beautiful typographic defaults on rendered HTML content.

Your Task

Build a product card that demonstrates configuration concepts:

1. Use arbitrary values (square bracket notation) for at least one color and one size
2. Use the prose class (from the typography plugin) on a text block
3. Use at least one custom spacing or sizing value via arbitrary notation (e.g., w-[300px])