Using Tailwind with AEM

TailwindCSS is one of the best CSS frameworks out there with it's popularity skyrocketing as the team continues to bring exciting new features and releases.

Using Tailwind with AEM might seem like a strange fit, but you will see that leveraging the @apply directive from Tailwind fits perfectly within the BEM CSS best-practices promoted by Adobe.

This post is a work in progress and will be updated accordingly

Example Repo

jzeltman/tailwind-aem

Tailwind + AEM using archetype 24. Contribute to jzeltman/tailwind-aem development by creating an account on GitHub.

jzeltmanGitHub

Getting setup with Archetype 24 and AEM 6.5.0

1. Create a new project using the Archetype. This example uses Archetype 24 and AEM 6.5.0 running locally.

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D aemVersion=6.5.0 \
 -D archetypeVersion=24 \
 -D appTitle="My Site" \
 -D appId="mysite" \
 -D groupId="com.mysite"

2. The Archetype comes setup with a ui.frontend module, and is configured using webpack and SASS. We don't want SASS, so we need to remove the unused packages from package.json

3. Uninstall postcss-loader The version that comes with the archetype 24 is not up to date.

npm uninstall postcss-loader

4. Install postcss dependencies

npm i -D postcss postcss-cli postcss-loader postcss-each postcss-easy-import postcss-inline-svg postcss-nested tailwindcss

5. Install tailwind. This command will install tailwind and create your config files for tailwind.config.js and postcss.config.js

npx tailwindcss init -p

6. The component CSS files are setup as .scss files and need to be converted to .css extension. ui.frontend/src/main/webpack/components

• File extensions .scss → .css

7. The existing files come with SASS $ variables that need removed.

8. Fix incorrect comment syntax //== → /* in the files.

9. Create ui.frontend/src/main/webpack/components/components.css and manually import all .css files.

10. Update CSS import in ui.frontend/src/main/webpack/site/main.ts from import "./main.scss"; → import "./main.css";

11. Update main.css

• Remove @import 'variables';
• Update file extensions .scss → .css

12. Update or remove styles from experiencefragment_header/footer files

13. Update _base.css

• Remove all old code
• Add @tailwind directives

@tailwind base;

As mentioned above, this is a work in progress, and will be updated with more information.