HTML File Structure
The TailAdmin HTML Template is built on a modern stack using Webpack, Alpine.js, and Tailwind CSS. It follows a logical structure to keep source code, assets, and configuration separate.
Root Directory
The root directory contains the project configuration files and the source folder.
| File / Folder | Description |
|---|---|
src/ | Source Code: This is where all your development happens. |
build/ | Distribution: The compiled, production-ready version of your app (generated after build). |
package.json | Project Manifest: Manages dependencies (Tailwind, Webpack, etc.) and scripts. |
webpack.config.js | Bundler Config: Configuration for compiling assets, handling imports, and dev server settings. |
tailwind.config.js | Tailwind Config: Controls typography, colors, breakpoints, and plugins. |
README.md | Documentation: Basic setup and usage instructions. |
Source Directory (src)
Inside src/, you’ll find the core structure of your application.
Key Directories Explained
src/partials/
To keep the code DRY (Don’t Repeat Yourself), common elements like the Sidebar, Header, and Footer are stored here. When creating a new page, you can easily include these partials (via Webpack or your preferred templating engine) to maintain consistency.
src/js/
Includes all the logic for your dashboard.
index.js: Initializes global scripts and imports dependencies.components/: Contains specific logic for interactive elements like Charts (Chart.js/ApexCharts) and Vector Maps.
src/css/
Contains style.css, which imports Tailwind directives. This file is processed by PostCSS and Tailwind to generate the final utility classes.