Custom styles

Overview

Here, we're going to talk about all the ways you can customize the styles and use them according to your preferences.

Styling

Colors

Currently, all the atomic styles are in src/app/globals/css file.

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    /* other styles */
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 210 40% 98%;
    /* other styles */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Then, to be able to use them in components using tailwind's classes, we use them in tailwind.config.ts

tailwind.config.ts

import type { Config } from 'tailwindcss';
// other imports

const config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        // other colors
      },
    },
    // other styles
  },
  plugins: [require('tailwindcss-animate')],
} satisfies Config;

export default config;

Now, we can use class like bg-background in our components, and it'll work perfectly fine.

To add custom styles, check out shadcn/ui's docs on the same: https://ui.shadcn.com/docs/theming#css-variables

Fonts

This starter kit supports multiple fonts out of the box. Check out Multiple Fonts page for more information.

Dark Mode

This starter kit supports dark mode out of the box. Check out Dark Mode page for more information.

Component based

This starter kit is based on Shadcn/UI for styling and components. All the components installed by Shadcn/UI will be in the src/components/ui/ directory.

If you would like to edit styling of any of the component, simply check out it's respective component file in src/component/ui/ directory and you can customize it there.

Other resources

• Shadcn/ui's Docs: https://ui.shadcn.com/docs/theming

• TailwindCSS's Docs: https://tailwindcss.com/docs/adding-custom-styles