Angular Material Datepicker Icon + TailwindCSS

laptoptheone profile image LaptopTheOne ・1 min read

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:

So the fix for it is to set:

svg {
  display: inline;

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";

And in my common.css I added:

svg {
  display: inline;

So the Datepicker should look like this:


Posted on by:

laptoptheone profile



Software engineer working in various web based technologies: Angular2+, NodeJS, React, Ruby on Rails. Previously worked in embedded environment and C/C++ domain


markdown guide