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 (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 v4apps/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 contentapps/web/styles/makerkit.css
- for makerkit-specific stylesapps/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
.