Category: CSS

Reading Time: 3 minutes

 192 total views,  1 views today

Introduction

Tailwind CSS (https://tailwindcss.com/) is a utility-first CSS framework with out-of-the-box classes for UI components.

For example, <p class="pl-2">hello world</> is equivalent to <p style="padding-left: 0.5rem;">hello world</h> and we achieve the effect without writing inline-style or custom class.

However, our components may require one-off style that Tailwind does not support and we cannot justify to include it in theme configuration.

Fortunately, Tailwind enables Just-In-Time (JIT) mode that generates the styles on demand. This feature allows dynamic style such as “w-[200px]” to fix the width of a card to 200px.

This post will show you the installation of Tailwind CSS, enable Just-In-time mode and add dynamic styles to style a div element.

Install Tailwind CSS in Angular

Firstly, we have to install the dependency of tailwind and tailwind plugins into the Angular application.

npm install --save-dev tailwindcss
npm install --save-dev @tailwindcss/forms @tailwindcss/typography
npx tailwindcss init

The npx command generates tailwind.config.js with default values

Enable Just-In-Time mode

Secondly, we have to enable JIT mode of tailwind; therefore, mode: 'jit‘ is added to tailwind.config.js.

module.exports = {
  mode: 'jit',
  content: ["./src/**/*.{html,ts}"],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

Then, we add file path in content array to purge all html and typescript files to maintain small bundle size in production. The last step of configuration is to import typography and forms plugins by require('@tailwindcss/typography') and require('@tailwindcss/forms')

Add Tailwind Base Styles to Angular

It is important to put tailwind directives at the beginning of the global stylesheet, style.scss. These are base styles that are accessible to all UI components of the application.

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

Finally, we are ready to generate on-demand style in our component.

Generate on-demand styles in Angular Component

Our use case is to set the width of food-card component to 300 pixels wide. The html template of food-card component looks like the following:

<div style="display: flex; flex-direction: column; margin-right: 0.5rem; border: 2px solid black; width: 300px;">
      <label name="name" class="item card-row">
        <span class="field">Name:</span>
        <span class="field-text">{{ ordered.name }}</span>
      </label>
      <label class="item card-row" name="description">
        <span class="field">Description:</span>
        <span class="field-text">{{ ordered.description }}</span>
      </label>
</div>

Except width: 300px;, we can substitute the rest with tailwind utility classes.

I don’t believe the width style should be part of the configuration because it is used one time. The just-in-time mode provides the solution we need; w-[300px] generates custom class at run time and changes the width to 300 pixels wide.

After the modification;

<div class="flex flex-col mr-2 border-solid border-2 border-black w-[300px]">
      <label name="name" class="item card-row">
        <span class="field">Name:</span>
        <span class="field-text">{{ ordered.name }}</span>
      </label>
      <label class="item card-row" name="description">
        <span class="field">Description:</span>
        <span class="field-text">{{ ordered.description }}</span>
      </label>
</div>

Verify the result

The final stage is to verify the custom style actually works and the div component has the expected width.

We can open Chrome inspector, hover on the <div> element and inspect its width property. As the image indicates, we have successfully fix the width to 300 pixels.

Final thought

I really like to use Tailwind in Angular because it saves the efforts of authoring custom css classes in SCSS files. After switching to tailwind, I got rid of most of the SCSS files and replaced the styles with the counterpart utility classes. When utility class is unavailable, it is convenient to generate the custom class on the fly with arbitrary value. Authoring UI components can’t get any easier in web development.

This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other web technologies.

Resources:

1. Repo: https://github.com/railsstudent/ng-spanish-menu
2. Tailwind: https://tailwindcss.com/docs/installation