Ever since it was introduced in 2017, TailwindCSS has been in the news. And you can find people who are in support of this framework and against this framework too.
At its core, TailwindCSS is a framework that makes writing CSS easy and less tedious/frustrating. What is does it that it generates thousands of utility classes so that you don't have to write CSS and can focus on writing HTML.
We at eka.care needed some framework that could allow us to create markups using HTML/CSS of the design fast. We decided to go with TailwindCSS. Here is why.
The hardest thing for a developer is coming up with meaningful names.
With TailwindCSS, this thing goes away.
Everything that you need to apply as CSS properties to HTML Element is applied as different utility classes to the element. Here is how:
.person-name-container{
border-radius: 16px;
padding: 16px;
background: #222;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
.person-name{
font-weight: 700;
font-size: 18px;
color: #fff;
}
<div class="person-name-container">
<p class="person-name">Jhon Doe</p>
</div>How you'd normally write HTML
<div class="rounded-16 p-16 bg-neutral-9 shadow-tight-3">
<p class="font-700 text-18 text-actionPrimary">Jhon Doe</p>
</div>How you'd write HTML using TailwindCSS
You can see the code significantly reduces, and thus so does the probability of bugs.
As most of the CSS classes have been already generated by TailwindCSS, you can focus on creating HTML.
Got to increase the padding from 16px to 20px, no worries, just replace class p-16 with p-20.
<div class="rounded-16 p-16 bg-neutral-9 shadow-tight-3">
<p class="font-700 text-18 text-actionPrimary">Jhon Doe</p>
</div>Before
<div class="rounded-16 p-20 bg-neutral-9 shadow-tight-3">
<p class="font-700 text-18 text-actionPrimary">Jhon Doe</p>
</div>After
That's it. No going back to those days where you had to find the css file, then find the class and then make the change therein.
Once of the major features of Tailwind is how easy it makes creating responsive layouts.
<div class="flex flex-col md:flex-row md:p-24 p-16 bg-neutral-1">
<p class="p-8">Jhon Doe</p>
<p class="p-8">Mary Jane</p>
<p class="p-8">Ryan Parker</p>
</div>Creating responsive layouts
Just apply the respective classes that you wish to see at different breakpoints prefixed by the screen prefix i.e md / sm / lg and such.
TailwindCSS comes with purgeCSS using which only those CSS classes which have been used in your HTML go live. Other are automatically removed.
This assures that your CSS file size in production is always small, without any unnecessary code.
At Eka.care, for our doctor tool, even though our development CSS is around 2-3 MBs, the production CSS is around 10-15 KBs.
Click here for more stories about how we build our eka.care #ekaCares.
Click here if you’d like to build next-gen healthcare products with us. 💚
