Updating the Tailwind CSS Shadcn 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.