Angular + tailwindcss from scratch for the impatient

Oliver Erxleben — Wed, 30 Sep 2020 21:46:52 +0000

There are many tutorials and posts out there about how to setup tailwindcss in an Angular application. Some work, some might not. Here is my log of how to setup, without much tinkering in configs and source code.

Setup

prerequisites

ng
npm
node

Lets get started with creating our application

ng new ngtw

and choose SCSS for styling lib. After setting up the base application, enter

npm install --save-dev tailwindcss
npm install --save-dev @angular-builders/custom-webpack postcss-scss postcss-import postcss-loader

Magic lies within the custom-webpack from @angular-builders. We need to configure our project to use that instead of the default one.

First lets create a useful config. I found many incompatible configs because postcss and web pack seem to be very alive and APIs might change. This one works quite good as the time of writing (30.09.2020). so

touch webpack.config.js

and enter

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

Next step is to tell angular how to use our config.

ng config projects.ngtw.architect.build.builder @angular-builders/custom-webpack:browser

ng config projects.ngtw.architect.build.options.customWebpackConfig.path webpack.config.js

The first is for the actual builder and the following

ng config projects.ngtw.architect.serve.builder @angular-builders/custom-webpack:dev-server 

ng config projects.ngtw.architect.serve.options.customWebpackConfig.path webpack.config.js

is made for the development server. Now as we have a working webpack configuration setup, it is time to initialize tailwind itself:

npx tailwind init

The command above will add a tailwind.config.js to your project. We can leave it as is.

In the global styles.scss file we need to import Tailwind now:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

With this work done you should be able to build angular templates with tailwindcss. Lets build a hello world in app.component.html

<div class="bg-gray-100 mx-auto my-auto">

  <h1 class="my-8 text-center text-6xl font-bold">

    <span class="text-teal-500">TailwindCSS</span>

     and

    <span class="text-red-600">Angular</span>

     is awesome!

  </h1>

      <p class="text-center text-3xl">

        Thanks for reading

      </p>

</div>

Review

The Post shows in a very very short amount of time how to integrate custom webpack behavior and tailwindcss. Once I saw Flutter and SwiftUI I wanted a similar UI description layer for my very own applications. I make business apps and I am pretty in the web team.

With tailwind I am a lot more where I want to be. I value much of Angular`s framework or platform thinking and having all familiar options and longevity with me - plus - a nice and well-playing-together abstraction of UI elements I am pretty sure that this will stand some time.

If you like what you have read or want to discuss, feel free to send and emoji or a comment. Thank you!

ng new [in a specific version]

Oliver Erxleben — Fri, 01 Nov 2019 09:16:20 +0000

Ever wanted to test out an angular application from a beta version or a release candidate but

ng new [project]

does always use the latest stable? And

ng new --help

doesen`t show up a param to specify a version?

Yeah. Exactly what happened to me. In the post I will share how to do that.

Short Story for the busy devs like me

npm version used: 6.12.1
node version used: v12.12.0

You simply install a specific @angular/cli package using npm (or yarn?). I tested with npm to install angular 9rc:

mkdir angular-9rc
cd angular-9rc
npm install @angular/cli@next

where "next" could be a specific older version or a beta tag you will find on npmjs.com: https://www.npmjs.com/package/@angular/cli

After that you are able to use the local installed version using just

ng new HelloNine

Installation takes quite some time. After all I was able to run the app as usual with

ng serve
ng build
ng build --prod

So with ivy enabled by default? Following documentation: yes it is. Have a look here: https://next.angular.io/guide/ivy

the

ng build --prod

results in