• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
    • Feature Flags
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
  • The Makerkit SDK
    • User SDK
    • Organization SDK
    • Organization Subscription SDK
    • Data Loader SDK
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
    • Introduction
    • Initial Setup
    • Running the App
    • Project Configuration
    • Environment Variables
    • Tailwind CSS and Styling
    • Authentication
    • Onboarding Flow
    • Database Schema
    • Supabase: Data Fetching
    • Supabase: Data Writing
    • Routing
    • Building the Tasks page
    • Building the Task Detail page
    • API Routes
    • Application Pages
    • API Routes Validation
    • Translations
    • Functions you need to know
    • Adding pages to the Marketing Site
    • Deploying to Production
    • Updating to the latest version
This documentation is for a legacy version of Next.js and Supabase. For the latest version, please visit the Next.js and Supabase V2 documentation

Tailwind CSS and Styling

Learn how to configure Tailwind CSS and tweak the Makerkit's theme.

This SaaS template uses Tailwind CSS for styling the application.

You will likely want to tweak the brand color of your application: to do so, open the file tailwind.config.js and replace the primary color (which it's indigo by default):

tailwind.config.js
extend: {
colors: {
primary: {
...colors.indigo,
contrast: '#fff',
},
dark: colors.gray
},
},
  1. The primary color is the main color of your application. It is used for the background of the navigation bar, the background of the sidebar, the background of the buttons, etc.
  2. The dark color is the background color of the dark theme. You can use other types of dark colors in the Tailwind CSS Color palette (such as slate, zinc), or define your own colors.

Updating the Primary color of your app

To update the primary color, you can either:

  1. choose another color from the Tailwind CSS Color palette (for example, try colors.blue)
  2. define your own colors, from 50 to 900

The contrast color will be helpful to define the text color of some components, so tweaking it may be required.

Once updated, the Makerkit's theme will automatically adapt to your new color palette! For example, below, we set the primary color to colors.blue:

Dark Mode

Makerkit also ships with a dark theme.

The light theme is the default, but users can manually switch thanks to the component DarkModeToggle.

If you wish to only use one theme, you can tweak the configuration using the following flag in the configuration file ~/configuration.ts:

~/configuration.ts
{
...
features: {
enableThemeSwitcher: false,
},
theme: Themes.Dark,
...
}

The default Tailwind media switcher is not supported since Makerkit uses its own system that allows users to choose the System theme (light or dark) or the theme defined by the application.

Installing Animations (optional)

If you want to use animations in your application, you can install the tailwindcss-animate library:

bash
npm i tailwindcss-animate

Then, open the file tailwind.config.js and add the library as a plugin:

tailwind.config.js
plugins: [
require('tailwindcss-animate')
]

Caveats

  1. Setting the dark theme by default is currently not supported without some minor tweaks. It is being developed.
  2. The default Tailwind media switcher is not supported since Makerkit uses its own system that allows users to choose the System theme (light or dark) or the theme defined by the application.
On this page
  1. Installing Animations (optional)
    1. Caveats