How to customize Tailwind CSS?

Extending and customizing the default theme.

What You'll Learn

Theme extension
Custom colors and fonts
Adding utilities

Extending Theme

code.jsJavaScript

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Override vs Extend

code.jsJavaScript

// Extend (keeps defaults)
theme: {
  extend: {
    colors: { brand: '#0fa9e6' }
  }
}

// Override (replaces defaults)
theme: {
  colors: { brand: '#0fa9e6' } // Only this color now!
}

Custom Screens

code.jsJavaScript

theme: {
  extend: {
    screens: {
      'xs': '475px',
      '3xl': '1600px',
    }
  }
}

How to implement Dark Mode in Tailwind?

How to use Tailwind CSS Plugins?