Tailwind

Our templates use the latest version of Tailwind 4.

Each template will have its own unique CSS variables but the core Tailwind config will be similar the css config shown below - This also makes it easier to add new blocks to the template from our Blocks Library.

The Tailwind CSS config and dependancies are already setup with each template. Just run npm install and you’re good to go.

Note

Always refer to the globals.css file that ships with the template for the exact Tailwind config.

Tailwind Config

globals.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 3.9%);
  --primary: hsl(0 0% 9%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(0 0% 96%);
  --secondary-foreground: hsl(0 0% 9%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(0 0% 45.1%);
  --accent: hsl(0 0% 96%);
  --accent-foreground: hsl(0 0% 9%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(0, 0%, 90%);
  --input: hsl(0 0% 89.8%);
  --ring: hsl(0 0% 3.9%);
  --radius: 8px;

  /* Template unique CSS variables */
  --cream: 43 52% 94%;
}
.dark {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);

  /* Template unique CSS variables */
  --cream: 43 32% 15%;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-cream: hsl(var(--cream));

    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;

    @keyframes accordion-down {
        from { height: 0; }
        to { height: var(--radix-accordion-content-height); }
    }
    @keyframes accordion-up {
        from { height: var(--radix-accordion-content-height); }
        to { height: 0; }
    }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

@layer components {
  button {
    cursor: pointer;
  }
  [class*="border"] {
    @apply border-border;
  }
}

@layer utilities {
  body {
    font-family: var(--font-inter), sans-serif;
  }
  .font-sans {
    font-family: var(--font-dm-sans), sans-serif;
  }
  .font-mono {
    font-family: var(--font-dm-mono), monospace;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}