Tailwind CSS 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 spacing key allows you to customize the global spacing and sizing scale for 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 colors key allows you to customize the global color palette 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',
          },
          }
          }

Customizing the theme

Out of the box, your project will automatically inherit the values from Pagedone 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.