Tailwind CSS

Tailwind CSS

All templates use Tailwind CSS for styling.

Our Design System

We primarily use the zinc color palette:

/* Primary colors */
--zinc-50:  #fafafa;
--zinc-100: #f4f4f5;
--zinc-200: #e4e4e7;
--zinc-900: #18181b;

Common Patterns

Dashed Borders

<div className="border border-dashed border-zinc-200">

Gradient Text

<h1 className="bg-gradient-to-r from-zinc-900 to-zinc-600 bg-clip-text text-transparent">

Hover Effects

<button className="hover:shadow-xl hover:bg-zinc-50 transition-all duration-300">

Customization

Extend the theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#your-color',
      },
    },
  },
}