Theme

Tailwind CSS Theme

Customize Tailwind default theme or create a new theme for your projects

Theming

You can customize theme in Tailwind in a two similiar ways: by extending default values or editing them.

Extending the default theme

Extending the default theme preserves values already made by Tailwind. Just add your extensions under the extend key in the theme section of your configuration file. This particular case below is showing how to add an extra breakpoint but save the existing ones at the same time.

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

Overriding the default theme

Overriding the default theme completely replace options already made by Tailwind. Just add your overrides directly under the theme section of your configuration file. This particular case below is showing how completely replace Tailwind’s default configuration for that key, so in the example below none of the default opacity utilities would be generated.

        
            
          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',
              }
            }
          }
        
        
    

You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration.

        
            
          module.exports = {
            theme: {
              opacity: {
                '0': '0',
                '20': '0.2',
                '40': '0.4',
                '60': '0.6',
                '80': '0.8',
                '100': '1',
              },
              extend: {
                screens: {
                  '3xl': '1600px',
                }
              }
            }
          }
        
        
    

Related resources

If you are looking for more advanced options, try theme from MDBootstrap.