Nx, tailwindcss & Angular 11
3/16/2021 6d1a29edd7328c54925be2b26552db06I spent a solid 3 days going through countless medium articles, reddit posts & documentations looking for a way to get tailwind to play ball with this setup. The easy part is getting tailwind to actually be a part of the bundle, but the hard part was getting the purging, @apply
& scss building to work correctly
1 installing tailwind & webpack
npm install -D @tailwindcss/jit tailwindcss postcss webpack @angular-builders/custom-webpack --force
2 create a tailwind.scss
file
keep the tailwind styles separate from your actual styles.scss
& add this to a file called tailwind.scss
in the src/
directory of your angular app
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@layer base {
p {
@apply mb-3;
}
}
3 update nx workspace.json
set your FRONTEND.targets.build.styles
to look like this, with tailwind.scss
being the 1st element
"styles": [
"apps/frontend/src/tailwind.scss",
"apps/frontend/src/styles.scss",
],
4 create a webpack.config.js
& tailwind.config.js
file
'use strict';
const webpack = require('webpack');
module.exports = {
module: {
rules: [
{
test: /tailwind\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss')(require('./tailwind.config.js')(false)),
require('autoprefixer')
]
}
}
},
{
test: /\.scss$/,
loader: 'sass-loader'
}
]
},
plugins: []
};
// safelist array not currently supported, hack in a file with all safelisted classes
// for the tailwind/jit compiler to keep them in https://github.com/tailwindlabs/tailwindcss-jit/issues/32
module.exports = isProd => ({
prefix: '',
purge: {
enabled: isProd,
content: ['**/*.html', '**/*.ts', './apps/frontend/safelist.txt'],
options: {
safelist: []
}
},
darkMode: false,
theme: {},
variants: {},
plugins: []
});
For some reason I get a tonne of errors using module.exports
as a function so I can't get the webpack env :/
but setting the false
to be a true
isn't too difficult on the isProd
argument of the tailwind config require when performing a prod build so whatever
5 set angular to build using custom-webpack
builder
for building:
"frontend": {
"projectType": "application",
"root": "apps/frontend",
"sourceRoot": "apps/frontend/src",
"prefix": "app",
"targets": {
"build": {
"executor": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "apps/frontend/webpack.config.js"
},
...
and for serve:
"serve": {
"executor": "@angular-builders/custom-webpack:dev-server",
"configurations": {
"development": {
"browserTarget": "frontend:build:development",
"proxyConfig": "apps/frontend/proxy.conf.json"
},
...