andrewbiddinger / aem-site-template-tailwind

Tailwind CSS Site Template for AEM for front end developers

Site Template Tailwind

This template is an opinionated version of the Adobe standard site template for AEM. It is implemented with the best modern tools and libraries that enable rapid development and ensure code conformity. It comes with a Wireframe demo theme, which is styled separately from the theme files for easy removal. This template can serve as a standard starting point for creating a new site, or as a starting point for creating custom site templates.

Quick Start

• Go to https://github.com/ez-aem/aem-site-template-tailwind/releases/latest and download aem-site-template-tailwind-{version}.zip
• Upload aem-site-template-tailwind-{version}.zip in AEMaaCS's site creation wizard to create a new site from that template.

Helpful Links

• AEM Quick Site Creation Journey
• Video Overview of Quick Sites
• Designing for Core Components
• aemcomponents.dev
• WKND.site
• AEM Site Template Builder
• Adobe's AEM Site Template Standard
• Tailwind
• Parcel
• PostCSS
• TypeScript
• Prettier
• ESLint
• Links to EZ-AEM upselling opportunities
• Tailwind VSCode Plugin
• Tailwind Class Name Completion for (neo)vim
• Headwind VSCode Plugin

Structure

• files: Folder with the UI kit XD files.
• previews: Folder with a screenshots of the site template.
• site: Content package of the content that will be copied for each site created from this template (templates, pages, etc.).
• theme: Sources of the template theme to modify how the site looks (CSS, JS, etc.).

Develop Site Template

Check out the Theme readme to learn more about customizing the frontend theme for your project.

Build locally

If you are working on the template itself, and not using the downloaded theme sources, you can build aem-site-template-tailwind-{version}.zip locally.

1. Install Maven (to be able to use the packaging script).
2. Initialize the project with following command executed at the template root:

npm install

1. To build the site template, run following command executed at the template root:

npm run build

1. The site template ZIP file is now located below the template root: aem-site-template-tailwind-{version}.zip.
2. Upload to an AEMaaCS site creation wizard. For installing on a local cloudready development instance run:

npm run deploy

Release

Run Build and release GitHub workflow and provide the semantic version you're about to release. The workflow executes the following steps:

• Build Site Template
• Release latest version on github
• Commit, build and release latest Site Theme related changes in Site Theme E2E Repo.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Licensing

This project is licensed under the MIT License. See LICENSE for more information.