abdellatifLabr/angular-tailwind-setup

Angular 8 + Tailwind CSS Setup

Angular With Tailwind CSS Setup

1. Install Tailwind CSS

$ npm i tailwindcss --save

2. Initialize A New Project

$ npx tailwind init

3. Install Angular Custom Webpack

$ npm add @angular-builders/custom-webpack

4. Import Tailwind SCSS Modules

in src/styles.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Edit angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      ...
    },
  }
},
"serve":{
  "builder": "@angular-builders/custom-webpack:dev-server"
}

6. Add extra-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "postcss-loader",
            options: {
              plugins: [require("tailwindcss")("./tailwind.config.js")]
            }
          }
        ]
      }
    ]
  }
};

It's Done!!!