Angular Material Datepicker Icon + TailwindCSS

milosdukic

Milos

Posted on December 30, 2019

Angular Material Datepicker Icon + TailwindCSS

This is a quick note/fix for any1 who uses Angular Material Datepicker and TailwindCSS. I have faced small cosmetic issue when trying to use Angular Material Calendar in my TailwindCSS based application.

Problem was that the Datepicker icon had an offset, and it was really annoying. Like so:
calendar-image-offset

So the fix for it is to set:

svg {
  display: inline;
}
Enter fullscreen mode Exit fullscreen mode

But I had to set it before "tailwindcss/utilities" are loaded or after the components are loaded :).
So my tailwind-build.css (this file can be named whatever you want) looks like this:

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

/* Custom component styling goes here*/
@import "./app/some_path_blah_blah/common.css";

@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

And in my common.css I added:

...
svg {
  display: inline;
}
Enter fullscreen mode Exit fullscreen mode

So the Datepicker should look like this:
calendar-icon-fix

Cheers!

💖 💪 🙅 🚩
milosdukic
Milos

Posted on December 30, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related