Tailwind CSS & Styles

Tailwind CSS: Change Appearance#

You can customize the theme default palette by modifying the CSS file at src/assets/styles/app.css. For example, if you want to change the default theme color, you can modify the following code:

:root {
  /* ... */
  --primary: 200 29% 45%; 
  --primary: <Your favorite color using raw hsl>; 
}

And the same way to change the default font family, you can modify the following code:

:root {
  /* ... */
  font-family: 'Satoshi'; 
  src: url('/fonts/Satoshi-Variable.ttf'); 
  font-family: '<Your favorite font family>'; 
  src: url('/fonts/<Your favorite font>.ttf'); 
}

Make sure to put your custom font file in the public/fonts directory.

Tailwind Configuration#

File: tailwind.config.ts

Get to know more:

• Tailwind CSS: Installation ↗
• Tailwind CSS: Configuration ↗

@tailwindcss/typography#

Typography config can be modified in tailwind.config.ts:

const config = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            // ...
          }
        }
      }
    }
  }
}

But if you want to customize the typography classes, you can do it in src/site.config.ts:

export const integ: IntegrationUserConfig = {
  // ...
  typography: {
    class: 'prose text-base text-muted-foreground'
  }
}

Checkout Typography plugin ↗ for more.