File and Folder Organization
Structure your CSS entry points, component stylesheets, and config files for clarity as projects grow beyond a single file.
Why File Organization Matters
As Tailwind projects grow, the number of files involving CSS-related configuration — the Tailwind config, PostCSS config, global stylesheets, and component-level CSS — multiplies. Without a clear structure, these files scatter across the project and become hard to find. Good file organization makes it immediately obvious where to add new values, where global overrides live, and which CSS belongs to which component.
Root-Level Config Files
Config files that affect the entire build — tailwind.config.js, postcss.config.js, and .prettierrc — live at the project root alongside package.json. They are root-level because build tools discover them by convention. Never nest them inside src/ unless your toolchain explicitly supports non-root config discovery.
my-project/
├── tailwind.config.js # ← root level
├── postcss.config.js # ← root level
├── .prettierrc # ← root level
├── package.json
├── src/
│ ├── styles/
│ │ └── globals.css # @tailwind directives
│ └── components/All lessons in this course
- File and Folder Organization
- Coexisting With Legacy CSS
- CSS Modules and Tailwind
- Scaling Tailwind Across Monorepos