Base & Components

Add global base styles and reusable component classes with addBase() and addComponents()

addBase()

Add base styles to the @layer base layer. Base styles are applied globally before utilities and components.

base · CssInJs · required

CSS-in-JS object containing base styles for HTML elements

Basic Example

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addBase }) {
  addBase({
    'h1': {
      fontSize: '2.5rem',
      fontWeight: '700'
    },
    'h2': {
      fontSize: '2rem',
      fontWeight: '600'
    },
    'h3': {
      fontSize: '1.5rem',
      fontWeight: '600'
    }
  })
})

Compiles to:

@layer base {
  h1 {
    font-size: 2.5rem;
    font-weight: 700;
  }
  h2 {
    font-size: 2rem;
    font-weight: 600;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 600;
  }
}

Reset Styles

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addBase }) {
  addBase({
    '*, ::before, ::after': {
      boxSizing: 'border-box',
      borderWidth: '0',
      borderStyle: 'solid'
    },
    html: {
      lineHeight: '1.5',
      WebkitTextSizeAdjust: '100%'
    },
    body: {
      margin: '0',
      padding: '0'
    }
  })
})

Using Theme Values

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addBase, theme }) {
  addBase({
    'h1': {
      fontSize: theme('fontSize.5xl'),
      color: theme('colors.gray.900')
    },
    'a': {
      color: theme('colors.blue.600'),
      '&:hover': {
        color: theme('colors.blue.800')
      }
    }
  })
})

Custom Fonts

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addBase }) {
  addBase({
    '@font-face': {
      fontFamily: 'Inter',
      fontWeight: '400',
      src: 'url("/fonts/inter-regular.woff2") format("woff2")'
    },
    'body': {
      fontFamily: 'Inter, system-ui, sans-serif'
    }
  })
})

Multiple @font-face Declarations

addBase({
  '@font-face': [
    {
      fontFamily: 'Inter',
      fontWeight: '400',
      src: 'url("/fonts/inter-regular.woff2") format("woff2")'
    },
    {
      fontFamily: 'Inter',
      fontWeight: '700',
      src: 'url("/fonts/inter-bold.woff2") format("woff2")'
    }
  ]
})

Keyframes from Theme

import plugin from 'tailwindcss/plugin'

export default plugin(
  function({ addBase, theme }) {
    addBase({
      '@keyframes enter': theme('keyframes.enter'),
      '@keyframes exit': theme('keyframes.exit')
    })
  },
  {
    theme: {
      extend: {
        keyframes: {
          enter: {
            from: {
              opacity: 'var(--tw-enter-opacity, 1)',
              transform: 'translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))'
            }
          },
          exit: {
            to: {
              opacity: 'var(--tw-exit-opacity, 1)',
              transform: 'translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))'
            }
          }
        }
      }
    }
  }
)

Normalize Lists

addBase({
  'ul, ol': {
    listStyle: 'none',
    margin: '0',
    padding: '0'
  }
})

addComponents()

Add component styles. This is an alias for addUtilities() with the same behavior.

components · Record<string, CssInJs> | Record<string, CssInJs>[] · required

CSS-in-JS object containing component class definitions

options · object

Optional configuration (reserved for future use)

Basic Example

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addComponents }) {
  addComponents({
    '.btn': {
      padding: '.5rem 1rem',
      borderRadius: '.375rem',
      fontWeight: '600'
    },
    '.btn-primary': {
      backgroundColor: '#3b82f6',
      color: '#ffffff',
      '&:hover': {
        backgroundColor: '#2563eb'
      }
    },
    '.btn-secondary': {
      backgroundColor: '#6b7280',
      color: '#ffffff',
      '&:hover': {
        backgroundColor: '#4b5563'
      }
    }
  })
})

<button class="btn btn-primary">
  Primary Button
</button>
<button class="btn btn-secondary">
  Secondary Button
</button>

Card Component

addComponents({
  '.card': {
    backgroundColor: '#ffffff',
    borderRadius: '.5rem',
    padding: '1.5rem',
    boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1)'
  },
  '.card-title': {
    fontSize: '1.25rem',
    fontWeight: '600',
    marginBottom: '.5rem'
  },
  '.card-body': {
    color: '#6b7280'
  }
})

Using Theme Values

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addComponents, theme }) {
  addComponents({
    '.btn': {
      padding: `${theme('spacing.2')} ${theme('spacing.4')}`,
      borderRadius: theme('borderRadius.md'),
      fontWeight: theme('fontWeight.semibold')
    },
    '.btn-blue': {
      backgroundColor: theme('colors.blue.500'),
      color: theme('colors.white'),
      '&:hover': {
        backgroundColor: theme('colors.blue.700')
      }
    }
  })
})

Array of Components

addComponents([
  {
    '.container': {
      width: '100%'
    }
  },
  {
    '@media (min-width: 640px)': {
      '.container': {
        maxWidth: '640px'
      }
    }
  },
  {
    '@media (min-width: 768px)': {
      '.container': {
        maxWidth: '768px'
      }
    }
  }
])

Form Components

import plugin from 'tailwindcss/plugin'

export default plugin(function({ addComponents, theme }) {
  addComponents({
    '.form-input': {
      borderWidth: '1px',
      borderColor: theme('colors.gray.300'),
      borderRadius: theme('borderRadius.md'),
      padding: `${theme('spacing.2')} ${theme('spacing.3')}`,
      '&:focus': {
        outline: 'none',
        borderColor: theme('colors.blue.500'),
        boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
      }
    },
    '.form-select': {
      borderWidth: '1px',
      borderColor: theme('colors.gray.300'),
      borderRadius: theme('borderRadius.md'),
      padding: `${theme('spacing.2')} ${theme('spacing.3')}`,
      '&:focus': {
        outline: 'none',
        borderColor: theme('colors.blue.500')
      }
    },
    '.form-checkbox': {
      borderRadius: theme('borderRadius.sm'),
      borderWidth: '1px',
      borderColor: theme('colors.gray.300')
    }
  })
})

matchComponents()

Register dynamic components. This is an alias for matchUtilities() with the same behavior.

components · Record<string, (value: string, extra: { modifier: string | null }) => CssInJs> · required

Object mapping component names to functions that return CSS styles

options · object

Configuration for values, types, and modifiers (same as matchUtilities)

Example

import plugin from 'tailwindcss/plugin'

export default plugin(function({ matchComponents, theme }) {
  matchComponents(
    {
      'btn': (value) => ({
        backgroundColor: value,
        color: '#ffffff',
        padding: '.5rem 1rem',
        borderRadius: '.375rem',
        '&:hover': {
          opacity: '0.9'
        }
      })
    },
    {
      type: 'color',
      values: theme('colors')
    }
  )
})

<button class="btn-blue-500">Blue Button</button>
<button class="btn-red-500">Red Button</button>
<button class="btn-[#1fb6ff]">Custom Color</button>

Base vs Components vs Utilities

Layer	Purpose	Examples
Base	Global HTML element styles	body, h1, a, @font-face
Components	Reusable component classes	.btn, .card, .form-input
Utilities	Single-purpose utility classes	.scrollbar-none, .text-shadow

Choosing the Right Layer

• Use addBase for:

  • Element resets and normalizations
  • Default typography styles
  • Font declarations
  • Global keyframe animations

• Use addComponents for:

  • Complex UI patterns
  • Pre-composed styles
  • Third-party integrations

• Use addUtilities for:

  • Single-purpose classes
  • Property-value mappings
  • Missing CSS properties

Base styles are not affected by variants (hover, focus, etc.). Use components or utilities if you need variant support.