tailwindcss-core

Tailwind CSS v4.1 can be configured entirely within your CSS files using a CSS-first approach. By using directives like @theme, @source, and @utility, you define themes and custom utilities directly in CSS, eliminating the need for a separate tailwind.config.js file.

The CSS-first approach in Tailwind allows theme customization and custom utility creation directly within CSS files. The @theme directive defines design tokens like colors and spacing, while @utility creates custom utility classes, simplifying modern web development workflows.

Yes, the CSS-first configuration of Tailwind CSS v4.1 integrates seamlessly into modern build tools like Vite, Next.js, and Astro. You simply add the import statement to your main CSS file to begin defining your design system.

You can scan source files directly within your CSS files using the @source directive in Tailwind v4.1. This CSS-first configuration feature automatically detects and includes the necessary utility classes based on your project's source files.

The best way to set up a design system is by using Tailwind CSS v4.1's CSS-first configuration. Define all your colors, spacing, and typography directly in your main CSS file using the @theme directive to ensure consistency and maintainability across the project.