Theme & Styling

In supastarter you have the choice between two libraries: Tailwind CSS (opens in a new tab) and Chakra UI (opens in a new tab). The main components are styled with Chakra UI, but you can use Tailwind CSS for your custom components or combine the two in the existing components if you like.

While Tailwind CSS is a utility-first CSS framework, Chakra UI is a library with ready-to-use components. Both libraries are very popular and have a very similar API which makes it easy to switch between or combine them.

Tailwind CSS

To style a button, you can use the following Tailwind CSS classes:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>

To learn more about Tailwind CSS, check out the documentation (opens in a new tab).

Chakra UI

Chakra UI gives you very similar styling options as TailwindCSS, but has some pre-configured components included. This is what the same button would look like with Chakra UI:

<Button colorScheme="blue">Click me</Button>

In this example there is no need to define the padding, border radius or color, since this is already pre-configured. If you want to customize the components though, you can of course do that:

<Button colorScheme="blue" px={4} py={2} borderRadius="md">
  Click me
</Button>

To customize the generic styles of the Chakra UI components, you can use Chakra UI theme. This can be configured in the ./chakra-ui.config.ts file.

To learn more on how to customize the theme, check out the theme documentation (opens in a new tab).

Theming

To make it easier to theme your app consistently, we have created a unified theme for TailwindCSS and Chakra UI. You can edit this theme in the ./theme.js file in your project root. Here you can define your brand colors, fonts and other styles that will then be injected into the chakra-ui.config.js and tailwind.config.js.

module.exports = {
  theme: {
    fonts: {
      sans: 'var(--font-lexend), sans-serif',
      heading: 'var(--font-lexend), sans-serif',
      body: 'var(--font-lexend), sans-serif',
    },
    colors: {
      primary: {
        DEFAULT: '#6366F1',
        50: '#F6F7FE',
        100: '#E6E7FD',
        200: '#C5C6FA',
        300: '#A5A6F7',
        400: '#8486F4',
        500: '#6366F1',
        600: '#2126EB',
        700: '#1014B5',
        800: '#0A0D73',
        900: '#040532',
      },
    },
  },
};

This way you can use the same colors and fonts in your TailwindCSS and Chakra UI components:

<button class="bg-primary-500">Click me</button>
 
<Button colorScheme="primary">Click me</Button>

Color Shades

Just like Tailwind CSS, Chakra UI uses color shades to create a system of colors. A really nice tool to generate such a color shade palettes of your brand colors is tailwindshades (opens in a new tab).

VSCode Setup Internationalization