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.
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.
Save time and focus on your business with supastarter, the scalable and production-ready starter kit for your SaaS.
Get started →