Tailwind CSS Theme

Learn how to customize the default theme.

The theme section of your tailwind.config.js file is where you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more.

                
                  // tailwind.config.js
                  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 object contains keys for screens, colors, and spacing, as well as a key for each customizable core plugin.

See the theme configuration reference for a complete list of theme options.

Breakpoints

The breakpoints key allows you to customize the responsive breakpoints in your project.

                
                  // tailwind.config.js
                  module.exports = {
                    theme: {
                      screens: {
                        'sm': '640px',
                        'md': '768px',
                        'lg': '1024px',
                        'xl': '1280px',
                        '2xl': '1536px',
                      }
                    }
                  }

Colors

The colors key allows you to customize the global color palette for your project.

                
                  // tailwind.config.js
                  module.exports = {
                    theme: {
                      colors: {
                        transparent: 'transparent',
                        black: '#000',
                        white: '#fff',
                        gray: {
                          100: '#f7fafc',
                          // ...
                          900: '#1a202c',
                        },

                        // ...
                      }
                    }
                  }

Spacing

The spacing key allows you to customize the global spacing and sizing scale for your project.

                
                  // tailwind.config.js
                  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',
                        6: '1.5rem',
                        7: '1.75rem',
                        8: '2rem',
                        9: '2.25rem',
                        10: '2.5rem',
                        11: '2.75rem',
                        12: '3rem',
                        14: '3.5rem',
                        16: '4rem',
                        20: '5rem',
                        24: '6rem',
                        28: '7rem',
                        32: '8rem',
                        36: '9rem',
                        40: '10rem',
                        44: '11rem',
                        48: '12rem',
                        52: '13rem',
                        56: '14rem',
                        60: '15rem',
                        64: '16rem',
                        72: '18rem',
                        80: '20rem',
                        96: '24rem',
                      },
                    }
                  }

Out of the box, your project will automatically inherit the values from Preline UI and Tailwind CSS. If you would like to customize the default theme, you have a few different options depending on your goals.

Extending

If you'd like to preserve the default values for a theme option but also add new values, add your extensions under the extend key in the theme section of your configuration file.

For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the screens property:

                
                  // tailwind.config.js
                  module.exports = {
                    theme: {
                      extend: {
                        // Adds a new breakpoint in addition to the default breakpoints
                        screens: {
                          '3xl': '1600px',
                        }
                      }
                    }
                  }

Overriding

To override an option in the default theme, add your overrides directly under the theme section of your tailwind.config.js:

                
                  // tailwind.config.js
                  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',
                      }
                    }
                  }

The official Tailwind CSS Theming documentation helps you to understand the full overview of the theming options.