How to use TailwindCSS in Angular
Tags: angular, webdev, webpack, css
Published: 2020-10-13 15:32:39

Quick summary on how to configure Angular (8+) to use [TailwindCSS](https://tailwindcss.com/) as the CSS Framework in your project for building responsive designs.
In this guide we chose the `SCSS` option in the AngularCLI setup.

### Install TailwindCSS
As stated in the [TailwindCSS](https://tailwindcss.com/docs/installation) documentation, we can easily install Tailwind using the following command 
```bash
# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss
```

### Install PostCSS packages
PostCSS packages will be used to process TailwindCSS in the Angular project while building the project or during local development
```bash
#using npm
npm install postcss-scss postcss-import postcss-loader -D

#using Yarn
yarn add postcss-scss postcss-import postcss-loader -D
```


### Custom webpack for Angular
By using TailwindCSS we need to make changes to the default Webpack configuration that Angular uses. We will use the `@angular-builders/custom-webpack` package that will allows us to modify the Angular build configuration without ejecting it.

```bash
#using npm
npm install @angular-builders/custom-webpack -D

#using Yarn
yarn add @angular-builders/custom-webpack -D
```

### Create `webpack.config.js`
Create a `webpack.config.js` file in the root of project. Once created we can setup the webpack configuration.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer'),
          ]
        }
      }
    ]
  }
};
```
As you can see in the webpack-config file above, we will process any `.scss` files in our project using or the installed `postCSS`-packages and we require `tailwindcss` as a plugin in our config.

### Modify `angular.json` configuration
The `angular.json` file in the root of the Angular project defines the settings that need to be used when using AngularCLI commands (`ng serve`,  `ng build`)
We will not adjust our `angular.json` file manually, but use the AngularCLI to make the changes 

* Change the webpack-builder to the installed 
`@angular-builders/custom-webpack` package for the `ng build` command

```bash
ng config projects.<your-project>.architect.build.builder 
@angular-builders/custom-webpack:browser
```

* Change the webpack configuration to the newly created configuration file for the `ng build` command

```bash
ng config
projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.js
``` 

* When serving the project on a local dev-server, use the `custom-webpack` package
```bash
ng config projects.<your-project>.architect.serve.builder
@angular-builders/custom-webpack:dev-server
``` 

* When serving the project on a local dev-server, use the custom created `webpack.config` file
```bash
ng config projects.<your-project>.architect.serve.builder
@angular-builders/custom-webpack:dev-server
``` 

### Setup Tailwind configuration
Setting up a custom Tailwind configuration file can be done easily using the following command 

```bash
npx tailwind init
```
This will create a `tailwind.config.js` file in the root of your project that you can use to extend Tailwind
[Docs on extension of TailwindCSS](https://tailwindcss.com/docs/configuration)

### Add Tailwind to your CSS 
Add the following CSS to your `styles.scss` in the `src` folder to inject Tailwind's `base`, `components` and `utilities` into your CSS
```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

### All done
Everything should be configured correctly to make use of the Tailwind CSS-library in your Angular Project.

A simple addition of a TailwindCSS utility in your `app.component.html` should give you an indication if Tailwind is working correctly in your project.

(It is useful to restart the local development-server `ng serve` to make sure that everything compiles correctly)