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
Getting setup with Archetype 24 and AEM 6.5.0
- 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
postcss-loader The version that comes with the archetype 24 is not up to date.
npm uninstall postcss-loader
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
npx tailwindcss init -p
6. The component CSS files are setup as .scss files and need to be converted to .css extension.
- File extensions
7. The existing files come with SASS
$ variables that need removed.
8. Fix incorrect comment syntax
/* in the files.
ui.frontend/src/main/webpack/components/components.css and manually import all .css files.
10. Update CSS import in
import "./main.scss"; →
- Update file extensions
12. Update or remove styles from experiencefragment_header/footer files
13. Update _base.css
- Remove all old code
As mentioned above, this is a work in progress, and will be updated with more information.
AEM News Newsletter
Join the newsletter to receive the latest updates in your inbox.
Sign in or become a AEM News member to join the conversation.
Just enter your email below to get a log in link.