UPDATED: Angular 11 and TailwindCSS 2

Create Your Angular App

ng new tailwindcss-angular-app

Set Up TailwindCSS

Install dependencies

npm install tailwindcss -D
npm install @angular-builders/custom-webpack postcss -D

Create webpack.config.js

function patchPostCSS(webpackConfig, tailwindConfig, components = false) {
if(!tailwindConfig){
console.error('Missing tailwind config :', tailwindConfig);
return;
}
const pluginName = "autoprefixer";
for (const rule of webpackConfig.module.rules) {
if (!(rule.use && rule.use.length > 0) || (!components && rule.exclude)) {
continue;
}
for (const useLoader of rule.use) {
if (!(useLoader.options && useLoader.options.postcssOptions)) {
continue;
}
const originPostcssOptions = useLoader.options.postcssOptions;
useLoader.options.postcssOptions = (loader) => {
const _postcssOptions = originPostcssOptions(loader);
const insertIndex = _postcssOptions.plugins.findIndex(
({ postcssPlugin }) => postcssPlugin && postcssPlugin.toLowerCase() === pluginName
);
if (insertIndex !== -1) {
_postcssOptions.plugins.splice(insertIndex, 0, ["tailwindcss", tailwindConfig]);
} else {
console.error(`${pluginName} not found in postcss plugins`);
}
return _postcssOptions;
};
}
}
}
module.exports = (config) => {
const tailwindConfig = require("./tailwind.config.js");
patchPostCSS(config, tailwindConfig, true);
return config;
};

Modify angular.json

ng config projects.<your-project>.architect.build.builder @angular-builders/custom-webpack:browserng config projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.jsng config projects.<your-project>.architect.serve.builder @angular-builders/custom-webpack:dev-serverng config projects.<your-project>.architect.test.builder @angular-builders/custom-webpack:browserng config projects.<your-project>.architect.test.options.customWebpackConfig.path webpack.config.js

Initialize TailwindCSS

npx tailwind init

Inject Tailwind’s Styles

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Test it Out!

<h1 class="my-8 text-center text-6xl font-bold"><span class="text-green-600">TailwindCSS</span> and <span class="text-red-600">Angular</span> is awesome!</h1>
<p class="text-center text-3xl">Thanks for reading!</p>

Bonus: Purge Unused TailwindCSS Classes

Bundle Without Purging Unused TailwindCSS Classes
npm install dotenv -D
+require('dotenv').config();
+const enablePurge = process.env.ENABLE_PURGE || false;
module.exports = {
- purge: [],
+ purge: {
+ enabled: enablePurge,
+ content: [
+ './src/**/*.html',
+ './src/**/*.scss'
+ ]
+ },
theme: {
extend: {},
},
variants: {},
plugins: [],
}
ENABLE_PURGE=true
Bundle With Purging Unused TailwindCSS Classes

Final Thoughts

--

--

--

Full-stack software engineer specializing in web and mobile development. Always learning new things. “There is no growth in the comfort zone…”

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reusing JavaScript RegExp Instance Fails Test and Exec When It Shouldn’t

Object Plus Array Is Not Zero

Loops, Loops and more Loops! Pt.1

Adding Bootstrap 5 to an Angular 13 project

Automate Vue Js deployment to AWS S3 bucket with CodeBuild

Creating a Booking Application with Webix UI

Pyramid Pattern of Increasing Numbers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacob Neterer

Jacob Neterer

Full-stack software engineer specializing in web and mobile development. Always learning new things. “There is no growth in the comfort zone…”

More from Medium

Angular vs AngularJS: Differences You Are Not Aware!

Angular Best Practices: Foundation For Performant Angular Apps

What is new in Angular 14?

A cover image that contains Angular logo and “What is new in Angular 14” text

Starting with Reactive forms in Angular