personal blog on code

---

8/15/20

Setup tailwindcss for Angular

Tailwindcss is a popular CSS framework for quite some time now. It's even evaluated by the ThoughtWorks technology radar.

This is a quick step by step guide for setting it up with CSS.

Why not SCSS? As stated by the authors of Tailwind CSS itself - it is possible, but not necessary to use it in combination with SCSS - I think it is about time to give SCSS a let go. In the advent of CSS Variables beeing supported in all major browser and the ability of Tailwind CSS itself I don't think we need it anymore. In addition this speeds up the build.

Why not using existing schematic solutions? It is a great exercise to write a Schematics that adds Tailwind CSS to your project and nothing is going to stop you from using one of the following schematics. 1 2 3 Schematics help to automate things that are not worth it to be done manually. In my opinion configuring Tailwind CSS is not one of them. We should know exactly what is going on under the hood of our build process when configuring Tailwind CSS. We should know how we extend a Angular CLI build. Every Angular developer should know.

In addition to that it is only a 6 step process.

Make sure to have clean git state in case we mess up ;)

Step 1 - Install tailwindcss

npm -i -D tailwindcss postcss-import postcss-loader autoprefixer

Step 2 - Create empty tailwindcss configuration file

npx tailwindcss init

Step 3 - Add ngx-build-plus

ng add ngx-build-plus

Why ngx-build-plus? You can use custom webpack plugin as well but with ngx-build-plus your are able to do a lot more than just extending the Webpack build. In addition it is created by Manfred Steyr, who works closely together with the Angular Team itself and therefore I would consider ngx-build-plus as a semi standard for extending your CLI build.

Step 4 - Add extra webpack configuration

Filename: webpack.tailwind.js

const webpack = require("webpack");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "postcss-loader",
        options: {
          ident: "postcss",
          plugins: () => [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        },
      },
    ],
  },
};

Step 5 - Add extraWebpackConfig in angular.json

• under "architect"->"build":
• under "architect"->"serve":

     "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            ...
            "extraWebpackConfig": "webpack.tailwind.js"
          },
     ...
     "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            ...
            "extraWebpackConfig": "webpack.tailwind.js"
          },

Step 6 - Test configuration

Add following to your app.component.html:

<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  Button
</button>

Run ng serve.

TODOS: For the production build we should configure purge-css to remove unused CSS and cut down the bundle size!

For further reference please take a look a this PR, which is likely going to be merged very soon.