Tailwind CSS - Theme Configuration


Tailwind CSS Theme Configuration specifies theme for the project.

In 'tailwind.config.js', the 'Theme' section lets you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Theme Structure

The 'Theme' section of 'tailwind.config.js' contains a list of keys such as 'screens', 'colors', 'spacing', and 'core plugin' for customization.

Screens

The 'screens' key lets you set the responsive breakpoints in your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Colors

The 'colors' key lets you set the global color palette for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

Spacing

The 'spacing' key lets you to set the global spacing and sizing scale for your project.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
    },
  }
}

Core Plugins

Theme settings let you choose options for each plugin. For example, borderRadius sets the rounded corner styles.

module.exports = {
    theme: {
        borderRadius: {
        'none': '0',
        'sm': '.125rem',
        DEFAULT: '.25rem',
        'lg': '.5rem',
        'full': '9999px',
        },
    }
    }

The Names become class names, and values set the style. This creates classes like rounded. It's how Tailwind works for all plugins.

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

Customizing Default Theme

Your project uses the default theme settings automatically. If you want to change them, you have options to customize the theme to fit your needs.

Extending Default Theme

The 'theme.extend' option allows you to add new values to theme while keeping the default values. This combines new and existing values, creating new classes for you.

As an example, here we extend the fontFamily property to add the font-display class that can change the font used on an element:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

After adding this to your theme, you can use it just like any other font family utility:

<h1 class="font-display">
  This uses the Oswald font
</h1>

Overriding The Default Theme

You can change the default theme options by adding overrides directly to the theme section in 'tailwind.config.js'.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

Referencing other values

Use a closure to reference other theme values. It gives you a theme() function to access other values using dot notation.

For example, you could generate background-size utilities for every value in your spacing scale by referencing theme('spacing') in your backgroundSize configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        // ...
    },
    backgroundSize: ({ theme }) => ({
        auto: 'auto',
        cover: 'cover',
        contain: 'contain',
        ...theme('spacing')
    })
    }
}

Note: Use functions for top-level theme keys.

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    fill: ({ theme }) => ({
        gray: theme('colors.gray')
    })
    }
}

Referencing the default theme

To use a value from the default theme, import it from tailwindcss/defaultTheme.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

Disabling an entire core plugin

To disable a core plugin, set it to 'false' in corePlugins, not an empty object in theme configuration.

/** Don't Do */
  
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

/** Always Do */
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
  opacity: false,
}
}

Configuration reference

Most theme object keys match Tailwind's core plugins, except screens, colors, and spacing. Some plugins don't have theme keys because they only accept fixed values. You can also extend the default theme using the theme.extend key.

All of these keys are also available under the theme.extend key to enable extending the default theme.

Class CSS Properties
accentColor Values for the accent-color property
animation Values for the animation property
aria Values for the aria property
aspectRatio Values for the aspect-ratio property
backdropBlur Values for the backdropBlur plugin
backdropBrightness Values for the backdropBrightness plugin
backdropContrast Values for the backdropContrast plugin
backdropGrayscale Values for the backdropGrayscale plugin
backdropHueRotate Values for the backdropHueRotate plugin
backdropInvert Values for the backdropInvert plugin
backdropOpacity Values for the backdropOpacity plugin
backdropSaturate Values for the backdropSaturate plugin
backdropSepia Values for the backdropSepia plugin
backgroundColor Values for the background-color property
backgroundImage Values for the background-image property
backgroundOpacity Values for the background-opacity property
backgroundPosition Values for the background-position property
backgroundSize Values for the background-size property
blur Values for the blur plugin
borderColor Values for the border-color property
borderOpacity Values for the borderOpacity plugin
borderRadius Values for the border-radius property
borderSpacing Values for the border-spacing property
borderWidth Values for the borderWidth plugin
boxShadow Values for the box-shadow property
boxShadowColor Values for the boxShadowColor plugin
brightness Values for the brightness plugin
caretColor Values for the caret-color property
colors Your project's color palette
columns Values for the columns property
container Configuration for the container plugin
content Values for the content property
contrast Values for the contrast plugin
cursor Values for the cursor property
divideColor Values for the divideColor plugin
divideOpacity Values for the divideOpacity plugin
divideWidth Values for the divideWidth plugin
dropShadow Values for the dropShadow plugin
fill Values for the fill plugin
flex Values for the flex property
flexBasis Values for the flex-basis property
flexGrow Values for the flex-grow property
flexShrink Values for the flex-shrink property
fontFamily Values for the font-family property
fontSize Values for the font-size property
fontWeight Values for the font-weight property
gap Values for the gap property
gradientColorStops Values for the gradientColorStops plugin
gradientColorStopPositions Values for the gradient-color-stop-positions property
grayscale Values for the grayscale plugin
gridAutoColumns Values for the grid-auto-columns property
gridAutoRows Values for the grid-auto-rows property
gridColumn Values for the grid-column property
gridColumnEnd Values for the grid-column-end property
gridColumnStart Values for the grid-column-start property
gridRow Values for the grid-row property
gridRowEnd Values for the grid-row-end property
gridRowStart Values for the grid-row-start property
gridTemplateColumns Values for the grid-template-columns property
gridTemplateRows Values for the grid-template-rows property
height Values for the height property
hueRotate Values for the hueRotate plugin
inset Values for the top, right, bottom, and left properties
invert Values for the invert plugin
keyframes Keyframe values used in the animation plugin
letterSpacing Values for the letter-spacing property
lineHeight Values for the line-height property
listStyleType Values for the list-style-type property
listStyleImage Values for the list-style-image property
margin Values for the margin property
lineClamp Values for the line-clamp property
maxHeight Values for the max-height property
maxWidth Values for the max-width property
minHeight Values for the min-height property
minWidth Values for the min-width property
objectPosition Values for the object-position property
opacity Values for the opacity property
order Values for the order property
outlineColor Values for the outline-color property
outlineOffset Values for the outline-offset property
outlineWidth Values for the outline-width property
padding Values for the padding property
placeholderColor Values for the placeholderColor plugin
placeholderOpacity Values for the placeholderOpacity plugin
ringColor Values for the ringColor plugin
ringOffsetColor Values for the ringOffsetColor plugin
ringOffsetWidth Values for the ringOffsetWidth plugin
ringOpacity Values for the ringOpacity plugin
ringWidth Values for the ringWidth plugin
rotate Values for the rotate plugin
saturate Values for the saturate plugin
scale Values for the scale plugin
screens Your project's responsive breakpoints
scrollMargin Values for the scroll-margin property
scrollPadding Values for the scroll-padding property
sepia Values for the sepia plugin
skew Values for the skew plugin
space Values for the space plugin
spacing Your project's spacing scale
stroke Values for the stroke property
strokeWidth Values for the stroke-width property
supports Values for the supports property
data Values for the data property
textColor Values for the color property
textDecorationColor Values for the text-decoration-color property
textDecorationThickness Values for the text-decoration-thickness property
textIndent Values for the text-indent property
textOpacity Values for the textOpacity plugin
textUnderlineOffset Values for the text-underline-offset property
transformOrigin Values for the transform-origin property
transitionDelay Values for the transition-delay property
transitionDuration Values for the transition-duration property
transitionProperty Values for the transition-property property
transitionTimingFunction Values for the transition-timing-function property
translate Values for the translate plugin
size Values for the size property
width Values for the width property
willChange Values for the will-change property
zIndex Values for the z-index property