Playground vs. project installation
A browser playground is ideal for learning because it removes build setup from the first lesson. A real application should use the official integration for its toolchain—such as Vite, a framework integration, or the Tailwind CLI—so generated CSS is part of the normal build process.
In a modern v4 CSS entry point, the common starting point is:
@import "tailwindcss";
The exact package installation and plugin wiring depend on the environment. Follow the official installation page for the framework you use rather than combining commands from unrelated guides.
CSS entry point (Tailwind v4)
@import "tailwindcss";
/* Add project-specific CSS below when needed. */💡 This imports Tailwind's CSS entry point. The build integration discovers utility classes in your source and emits the CSS required by those classes. This is a v4-style entry point; older v3 projects commonly use three
@tailwind directives.Key Takeaways
- Use a playground for experiments and a build integration for real apps.
- Use the official setup guide for your framework and Tailwind version.
- Keep custom global CSS small and intentional.