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

How to update the Tailwind CSS theme in your Makerkit application

Makerkit uses Tailwind CSS to style the application.

Tailwind CSS Configuration

The default configuration is a packaged 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.