Updating the Tailwind CSS Shadcn theme | Next.js Supabase SaaS Kit

Makerkit uses Tailwind CSS to style the application.

Tailwind CSS (v4) Configuration

If you are using Tailwind CSS v4, you can update the configuration in the apps/web/styles/global.css file.

This file imports the following Tailwind CSS configuration files:

• apps/web/styles/global.css: - the main global styles for the application (imports the other files)
• apps/web/styles/theme.css - this is where we store the Shadcn UI theme for Tailwind CSS v4
• apps/web/styles/shadcn-ui.css - where you can override the default style, either define your own colors or pick a theme from the Shadcn UI Themes page.
• apps/web/styles/markdoc.css - for markdoc content
• apps/web/styles/makerkit.css - for makerkit-specific styles
• apps/web/styles/theme.utilities.css - for utility classes

Tailwind CSS (v3) Configuration

The older default configuration is at tooling/tailwind/index.ts - where you can set the default colors, fonts, and more.

Whenever you add a new package, please remember to update the Tailwind configuration file and add the path to the content glob

  content: [
    '../../packages/ui/src/**/*.tsx',
    '../../packages/billing/gateway/src/**/*.tsx',
    '../../packages/features/auth/src/**/*.tsx',
    '../../packages/features/notifications/src/**/*.tsx',
    '../../packages/features/admin/src/**/*.tsx',
    '../../packages/features/accounts/src/**/*.tsx',
    '../../packages/features/team-accounts/src/**/*.tsx',
    '../../packages/plugins/testimonial/src/**/*.tsx',
    '../../packages/plugins/roadmap/src/**/*.tsx',
    '../../packages/plugins/kanban/src/**/*.tsx',
    // add the path to the content glob
    '!**/node_modules',
  ],

Shadcn UI Theme

Makerkit uses Shadcn UI and it defines the theme according to its guidelines.

You can find the default theme inside the application at apps/web/styles/global.css.

If you want to override the default style, either define your own colors or pick a theme from the Shadcn UI Themes page, and copy/paste the theme into this file.

Using JSX files

If you plan on using JSX files, please update the global paths in the content glob in the Tailwind configuration file.

For targeting both TSX and JSX files, update the content glob paths {tsx|jsx}. For example:

  content: [
    '../../packages/ui/src/**/*.{tsx,jsx}',
    '../../packages/billing/gateway/src/**/*.{tsx,jsx}',
    '../../packages/features/auth/src/**/*.{tsx,jsx}',
    '../../packages/features/notifications/src/**/*.{tsx,jsx}',
    '../../packages/features/admin/src/**/*.{tsx,jsx}',
    '../../packages/features/accounts/src/**/*.{tsx,jsx}',
    '../../packages/features/team-accounts/src/**/*.{tsx,jsx}',
    '../../packages/plugins/testimonial/src/**/*.{tsx,jsx}',
    '../../packages/plugins/roadmap/src/**/*.{tsx,jsx}',
    '../../packages/plugins/kanban/src/**/*.{tsx,jsx}',
    '!**/node_modules',
  ],

You will need to do the same in apps/web/tailwind.config.ts.