SDA101 - User Interface Design and Implementation

Configuration File

Tailwind can be customized using a configuration file (tailwind.config.js).

• Default Values and Generated Classes: Tailwind generates utility classes based on your configuration, which you can customize or extend in the configuration file.

Example of extending the default theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#3b82f6',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
  plugins: [],
}