Miroslav Slapka
Miroslav Slapka's Blog

Miroslav Slapka's Blog

My experience with Tailwind CSS + Angular

My experience with Tailwind CSS + Angular

A utility-first CSS framework you should try

Subscribe to my newsletter and never miss my upcoming articles

I've decided to try Tailwind CSS framework recently to build something simple - my personal page. The framework was released in 2017 by Adam Wathan and it's gaining on popularity. What is it exactly?

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

After reading this definition, you might think of Bootstrap, because it provides us with similar classes. For example mt-0 stands for margin-top: 0. Bootstrap is of course more robust and contains other parts, not just the utility classes.

I always liked my own classes to be reusable and the HTML to remain as clean as possible. Sometimes it's not easy but putting many classes to HTML that creates bloated code is not my thing and I've been trying to avoid it.

Tailwind CSS seems to do just that. Write the classes in your markup so you don't have to create any separate stylesheets at all. Why would I want to use that if it goes against my personal preferences I just mentioned? Adam wrote an article CSS Utility Classes and "Separation of Concerns" where he reasons out Tailwind CSS creation and ideation. He describes many obstacles we face daily styling the websites so I could relate.

There are many CSS frameworks though. Over the span of like 15 years I've written CSS without any nesting, then using preprocessors like Sass, trying various methods and object-oriented architectures like DoCSSa or iotaCSS, working with Susy framework before flex and grid even existed. One can appreciate the progress testing all these technologies and explore something new.

Let's put nostalgia aside and focus on Tailwind.

Angular integration

It's been a while since I've done something in Angular so I decided to create a simple page using it. As of writing, there's no Tailwind CSS installation guide for Angular. So far they list React and Vue based frameworks:

image.png

Never mind, installing Tailwind to Angular is as easy as installing another dev dependency to package.json.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

I have latest version of node.js and Angular installed: node --version outputs v16.4.1 and Angular is v12.

Make sure there is tailwind.config.js file in the root folder of your application.

image.png

The content of the file can look like this:

module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    // enabled: process.env.TAILWIND_MODE === 'build',
    content: ['./src/**/*.{html,ts}']
  },
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    container: {
      padding: '2rem',
    },
    fontFamily: {
      'sans': ['Open Sans', 'ui-sans-serif', 'system-ui'],
    }
  },
  variants: {},
  plugins: [],
};

Refer to the customization docs for more information.

In src/styles.scss include the following:

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

Everything should work fine now and we are ready to write some code.

Perks of Tailwind CSS

What really got me excited are some features that were added to Tailwind after version 2.1. You can see them already in the configuration file, where we can set them.

Just-in-Time Mode

Imagine for example bootstrap.css file. It contains all of the classes you can use to help you style the layout and components. So the file size is not really small. Tailwind had some performance issues due to enormous file size during development, because unlike Bootstrap, you can really style pretty much anything with just classes. It means there are classes for gradients, hovers, animations, transformations, cursors, you name it. Of course that produced a file size around 12MB that caused the browser to be sluggish.

To tackle this problem JIT mode was introduced, which serves the CSS on demand. Do you need only classes for grid? You get only that. Development is then fast and refresh happens as instantly as it should.

Of course if you build things for production, unused styles are removed by default.

Dark Mode

Another cool thing is dark mode. Some operating systems now supports this feature so if you want to take advantage of that and set the mood of your website accordingly, Tailwind has got you covered. It's not enabled by default, but we can do it manually. There are 2 options:

  • media
  • class

media option uses media query prefers-color-scheme, and based on the setting of the OS, dark variant is added before the classes: dark:{class}

<div class="bg-white dark:bg-gray-800">

class option is for cases when you want to toggle dark mode manually

Dynamic values

I'll let you just watch this video :-) Start at 7:18 if you want to skip JIT I already described.

Conclusion

So far I consider it a great tool for quick prototyping, especially if you like to play around with design directly in code instead of using proper tools for design. It also depends on the project you work on. This framework could be also a fit for the bigger teams where developers work only on the functionality and backend have to sometimes interfere with design and Tailwind gives them all they need to make some amends without asking someone else first.

You can see my personal website on mairo.eu

image.png

The names of the classes are concise and this design is quite minimalistic, so I enjoyed the process. Documentation is also good and you can quickly find whatever you need to make your website pixel perfect. I tried also dark mode, which is cool and easy to integrate. The markup can get bloated quickly however, especially if you decide to add all transitions, hovers, etc. as classes. Look at this example:

class="relative mt-20 py-16 bg-[#3F3D56] text-white dark:bg-white dark:text-gray-700"

There are 7 classes and it's still quite simple component. Of course you are not obliged to write your styles only using Tailwind in your HTML. You can use separate stylesheet and improve a legibility of your code.

Is there anything you can't find or do? Extend and write your own utilities.

There's many features I didn't describe as I haven't even tried them yet. But Tailwind CSS looks like a pretty powerful tool. They have many ideas to make it even better which is very exciting!

Give it a try and let me know what you think.

 
Share this