Until now we have only integrated Chakra UI, a great component library that will still be included with supastarter, but many customers wished for Tailwind CSS support.

So today we are happy to announce that supastarter now supports Tailwind CSS to give you more ways to style your app and components.

Unified theming

With the new Tailwind CSS support, we implemented a unified theme for Chakra UI and Tailwind CSS. This means you only have to set your colors, fonts, and other theme settings in one place and they will be applied to both Chakra UI and Tailwind CSS.

This is what the unified theme looks like:

// theme.js
module.exports = {
  theme: {
    fonts: {
      sans: '"Lexend", sans-serif',
      heading: '"Lexend", sans-serif',
      body: '"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:

// Tailwind CSS
<button class="bg-primary-500 px-4 py-2 text-white">Click me</button>

// Chakra UI
<Button colorScheme="primary">Click me</Button>

Learn more about the unified theme in the documentation.