Tailwind CSS Theming

Extend Tailwind default theme or create a custom theme. Tailwind theme config enables you to switch your theme easily. Set new theme colors, spacing & more.

Introduction

If your project requires a more custom shape or just a more organized structure, Tailwind offers very simple solutions to set up a global theme.

All properties bound to theme are in Tailwind config file located in the root of your project: tailwind.config.js. There you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more.

Code below is an example of how this file would look like. Configuring theme is unnecessary because Tailwind provide default values for most of the useful properties.

About particular names of properties used in example below you can read more in Taiwind documentation - in section Configuration references.

Default theme:
For a complete list of theme options (or reference for your changes) you can see default settings for Tailwind theme.

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

Structure for configuration contains the theme object which includes following keys: screen, colors and spacing.

Core plugins:
The corePlugins section lets you completely disable classes that Tailwind would normally generate by default if you don’t need them for your project. For more information check out the Core Pugins section in Tailwind documentation.

Screens

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

For more informations check out Tailwind documentation about breakpoint customization.

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.

For more informations check out Tailwind documentation about colors customization.

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.

For more informations check out Tailwind documentation about spacing customization.

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

Customizing the default theme

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.

tailwind.config.js

        
            
        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.

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

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

tailwind.config.js

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