Instructions below are based on the following:
- Angular 8/9 CLI
- Tailwindcss 1.0.4
For the impatient, you may check Github
Install the Angular CLI
yarn global add @angular/cliCreate a workspace and initial application (scss)
ng new angular-starter-template --style=scssInstalling and configuring tailwindcss
cd angular-starter-templateyarn add tailwindcssnpx tailwind init
Install dependencies for Angular custom webpacking
yarn add @angular-builders/custom-webpackLook for src\styles.scss
@tailwind base;@tailwind components;@tailwind utilities;
Revise angular.json
- @angular-builders/custom-webpack:browser
- path to a webpack.config.js
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
"outputPath": "dist/angular-tailwind",
...
},
}
},
"serve":{
"builder": "@angular-builders/custom-webpack:dev-server"
}Add extra-webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "postcss-loader",
options: {
plugins: [require("tailwindcss")("./tailwind.config.js")]
}
}
]
}
]
}
};