Tailwind

Default Overrides

Adding new attributes

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './lib/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      blur: {
        xs: "0.03em",
      },
    },
  },
  plugins: [],
}

!important

The important option lets you control whether Tailwind’s utilities should be marked with !important.

This can be really useful when using Tailwind with existing CSS that has high specificity selectors.

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}