Styling
Get started with styling your app.
To build the user web interface TurboStarter comes with Tailwind CSS and Radix UI pre-configured.
Why Tailwind CSS and Radix UI?
The combination of Tailwind CSS and Radix UI gives ready-to-use, accessible UI components that can be fully customized to match your brands design.
Tailwind config
In the tooling/tailwind/config
directory you will find shared Tailwind CSS configuration files. To change some global styles you can edit the files in this folder.
Here is an example of a shared Tailwind config file:
As you can see, for the colors part, we bet stricly on CSS Variables in HSL format to allow for easy theme management without a need for any JavaScript.
Also, each app has its own tailwind.config.ts
file which extends the shared config and allows you to override the global styles.
Here is an example of a app's tailwind.config.ts
file:
That way we can have a separation of concerns and a clear structure for the Tailwind CSS configuration.
Themes
TurboStarter comes with 10+ predefined themes which you can use to quickly change the look and feel of your app.
They're defined in apps/packages/ui/shared/themes
directory. Each theme is a set of CSS variables that can be overridden:
Feel free to add your own themes or override the existing ones to match your brand's identity.
To apply a theme to your app, you can use the data-theme
attribute on the html
element:
Dark mode
TurboStarter comes with a built-in dark mode support.
Each theme has a corresponding dark mode variables which are used to change the theme to its dark mode counterpart.
As we define the darkMode
as class
in the shared Tailwind config, we need to add the dark
class to the html
element to apply the dark mode styles.
For this purpose we're using next-themes package under the hood to handle the user preferences management.
As we saw in App configuration, we can define the default theme mode in the app configuration as well as available colors for your users.
Last updated on