New 🎉 Next.js 13 & Subscriptions. Learn more →

Introducing Tailwind CSS support

Introducing Tailwind CSS support

#Theming #Styling #TailwindCSS

Jonathan Wilke

Written by

Jonathan Wilke

Published on

2022-12-09

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.

supastarter

Get your SaaS started in minutes

Save time and focus on your business with supastarter, the scalable and production-ready boilerplate for your SaaS.

Get started →
supastartersupastarter

© 2022 supastarter. All rights reserved.

Product

  • Demo
  • Pricing
  • FAQ
  • Documentation
  • Changelog
  • Roadmap
  • Starter templates