Theme Customization

Introduction

To give you a head start building your next server-side rendering React application, we have included a starter theme created with Tailwind CSS.

Tailwind CSS allows us to easily create perfectly crafted themes that implement standards and best practices from the best front-end designers and developers.

Configuration

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.

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

Colors

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

const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    // ...
    extend: {
        colors: {
            primary: colors.indigo,
            secondary: colors.sky,
            transparent: 'transparent',
            black: '#000',
            white: '#fff',
            // ...
        },
    },
  }
}