HTML Folder Structure
The TailAdmin HTML Template is built on a modern stack using Webpack 5, Alpine.js v3, and Tailwind CSS v4. It follows a modular, scalable architecture to keep source code, HTML partials, stylesheets, scripts, and build artifacts clean and maintainable.
Root Directory
The root directory contains project configuration files, documentation, and the source code folder.
| File / Folder | Description |
|---|---|
src/ | Source Code: Contains all HTML pages, partials, Tailwind styles, JavaScript modules, locales, and assets. |
build/ | Distribution: Production-ready static output generated by npm run build. |
docs/ | Technical Docs: Deep technical references (html-composition.md, js-initialization.md, styling.md, i18n.md). |
package.json | Project Manifest: Manages scripts and dependencies (Tailwind CSS v4, Alpine.js v3, Webpack 5, etc.). |
webpack.config.js | Bundler Config: Custom <include> preprocessor, HTMLWebpackPlugin setup, and dev server with HMR. |
README.md | Documentation: Project overview, prerequisites, and getting started instructions. |
AGENTS.md | Agent Instructions: Authoritative architecture and guidelines for AI coding assistants. |
Source Directory (src)
Inside src/, the codebase is organized into pages, reusable partials, CSS tokens, modular JavaScript components, and localization files.
Key Directories Explained
src/pages/
Every HTML file under src/pages/ generates one output .html page in the build/ directory via HtmlWebpackPlugin.
- Route Groups: Folders wrapped in parentheses (such as
(admin-layout),(main), and(dashboard)) organize pages by layout and category without affecting output URL paths. For example,src/pages/(admin-layout)/(main)/(dashboard)/analytics.htmloutputs directly asanalytics.html. Plain folders remain part of the public URL. index.html: The default E-Commerce dashboard home page.
src/partials/
TailAdmin uses a custom <include src="..."> preprocessor handled during Webpack compilation to assemble pages from modular partials. The folder hierarchy directly mirrors the navigation structure to keep templates clean and DRY.
<include>Resolution: Partial paths resolve relative to the file containing the include tag, falling back tosrc/partials/common/or root-relativesrc/.layout/: Contains all layout related snippets likeapp-layout/(containing the default sidebar and header).common/: Shared snippets used throughout the template.main/,others/,support/: Modular page content partials organized under route specific folders.
src/css/
Contains the global Tailwind CSS v4 design system and component overrides into style.css, along with prism.css for code syntax highlighting.
src/js/
Application JavaScript flows through a single Webpack entry point.
index.js: Initializes global scripts, imports dependencies and registers plugins and component definitions.components/: Interactive component scripts organized by domain (analytics,crm,finance,charts,maps,carousels,tables).
src/locales/
TailAdmin HTML includes built-in internationalization powered by i18next and Alpine.js.
- Translations: JSON dictionaries grouped by feature and stored under
src/locales/<lang>/common.json. - Supported Locales: English (
en), Arabic (arwith automatic RTL layout switching), German (de), and Spanish (es). - Template Usage: Render localized text directly in HTML using
x-text="$t('section.key')".