Customization
TailAdmin is built with Tailwind CSS v4, so most customization follows Tailwind’s new CSS-first configuration approach.
In practice, you’ll customize TailAdmin by:
- Adjusting design tokens (colors, spacing, breakpoints, etc.) in your CSS using
@theme. - Tweaking UI behavior via variants (for example,
dark:) and utility classes. - Editing components/layouts in your framework of choice.
For deeper Tailwind details and the full API surface, refer to the official Tailwind docs:
File Structure
A clear understanding of the project structure is essential for seamless customization and development. TailAdmin provides dedicated documentation for each supported framework to help you navigate the codebase efficiently.
Default directory layouts for each version:
- HTML: Standard structure for the HTML/Tailwind version.
- React.js: Component and asset organization for React applications.
- Next.js: Recommended folder structure for Next.js App Router.
- Vue.js: Source code organization for Vue.js projects.
- Angular: Workspace and application structure for Angular.
- Laravel: Integration and directory layout for Laravel applications.
Tailwind v4 Customization (Quick Guide)
Most of TailAdmin’s “theme” values come from a @theme block (colors, spacing, breakpoints, etc.). You typically update these tokens in the project’s main CSS file to match your brand.
If you’re coming from Tailwind v3, the biggest change is that many settings that used to live in tailwind.config.js are now defined directly in CSS.
What you can customize in TailAdmin
Use these dedicated guides for the most common customization areas: