Updating the Tailwind CSS Shadcn Theme

How to update the Tailwind CSS theme in your application

This kit uses Tailwind CSS to style the application.

Tailwind CSS (v4) Configuration

You can update the configuration in the apps/web/styles/globals.css file.

This file imports the following Tailwind CSS configuration files:

  • apps/web/styles/globals.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 - here we create the variables for the Shadcn UI theme
  • apps/web/styles/markdoc.css - for markdoc content
  • apps/web/styles/makerkit.css - for makerkit-specific styles
  • apps/web/styles/custom.css - for custom styles where you can override the default style, either define your own colors or pick a theme from the Shadcn UI Themes page.

Shadcn UI

The kit 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/shadcn-ui.css.