DreamLab Tailwind Theme

A reusable TailwindCSS theme package including custom design tokens such as responsive breakpoints (xs, hd, 4k) using Tailwind CSS v4 and the new @theme static feature.

✨ Features

• ✅ Tailwind v4 compatible
• 🎯 Custom responsive breakpoints:
  • --breakpoint-xs: 475px
  • --breakpoint-hd: 1920px
  • --breakpoint-4k: 3640px
• 📦 Distributed as compiled CSS
• 🔌 tailwindcss defined as a peerDependency

📦 Installation

Install this theme alongside tailwindcss in your project (e.g. Astro):

pnpm add -D tailwindcss@^4.0.0 @sunny-pirate/dreamlab-tailwind-theme

📚 Follow the full Tailwind Astro guide here: https://tailwindcss.com/docs/installation/framework-guides/astro

📄 Usage

1. Make sure you’ve set up TailwindCSS in your Astro project following the official Astro guide.

2. Import the theme in your main CSS file:

@import "tailwindcss";
@import "@sunny-pirate/dreamlab-tailwind-theme";

3. Use the custom breakpoints directly via media queries or utility classes, as they are now CSS variables generated from the static theme:

@media (min-width: var(--breakpoint-4k)) {
  .hero {
    font-size: 4rem;
  }
}

🎨 Tokens Defined

@import "tailwindcss";

@theme static {
  --breakpoint-xs: 475px;
  --breakpoint-hd: 1920px;
  --breakpoint-4k: 3640px;
}

📖 Learn more about static theme tokens here: https://tailwindcss.com/docs/theme#generating-all-css-variables

📁 File Structure (Simplified)

dreamlab-tailwind-theme/
├── dist/
│   └── dreamlab-tailwind.css      # Exported, compiled theme CSS
├── src/
│   └── styles.css        # Theme source using @import and @theme static
├── package.json
└── README.md

📌 Notes

• This package does not bundle Tailwind itself. You must install TailwindCSS in your project separately.
• Works seamlessly with tools like Astro, Vite, Next.js, etc.

🧪 Testing Locally

To verify before publishing:

pnpm run build
npm pack
# In another project:
pnpm install ../dreamlab-tailwind-theme-1.0.0.tgz

🔗 References

• TailwindCSS Docs: https://tailwindcss.com/docs
• Static Tokens: https://tailwindcss.com/docs/theme#generating-all-css-variables
• Astro Guide: https://tailwindcss.com/docs/installation/framework-guides/astro