Propelling ourselves in 2024 with some tailwind

June 19, 2024 The Editorial Board - Teamware Solutions

Cascading Style Sheets have been a programmer's nightmare. We reserve the word developer to
refer to individuals who are well-rounded in skill set. Developers have individuals who know how to write
code and supply instructions to runtimes like a browser. Isn’t it? CSS is essentially instructions to the
browser on how content described in the HTML is positioned inside the browser. In the journey of an
individual from programmer to developer they need to understand the components of CSS, the language,
the runtime (browser) and the result.
Many programmers in their arduous journey often look at CSS as just the language. Many frameworks help
and build upon that language. Bootstrap is very famous amongst them. The philosophy of Bootstrap is the
grid and the notations of *-lg, *-md, *-sm etc. indicating the stops in responsive design. As a programmer
one often needs to spend hours mastering these CSS classes with notation to get the ideal layout that our
designer has shipped to be built. The challenge programmers encounter is to have the map of which class
could yield the desired effect. This map is often built from experience which unfortunately is the arduous
journey of becoming a developer.
Smart programmers however take a slightly different route. Let us crack that path with a hint
<section style=”background-color: rgb(81,255,79); font-weight: 400; text-align: center”>
…
</section>
If you have spent some time programming you do know that this leads to plenty of styling problems down
the road. The reason, it is difficult to troubleshoot and propagate a change across the website to present a
coherent brand is far tougher.
Let us be clear we are not proposing you style your content in that manner.
We are throwing that as a hint. Even if you do not understand completely CSS as a language, you would
certainly know that semi-colon marks the end of an instruction. Look back at the style described above,
they are instructions to set different properties and are strung together in a single attribute; rightly named
style.
The idea behind tailwind CSS is rooted in this stringing together. Like style there is an attribute class which
helps us string classes of CSS together. These classes are containers which specify a group of HTML
styling properties. The unique selling point for Tailwind is how these CSS classes could be constructed for
varied uses. To be a framework the team building the framework took a radical and exhaustive approach.
They pivoted on naming convention and went ahead and created atomic classes that any developer would
need for styling. Yes, they did that. In case you have do not believe us take a look at a snippet of the
tailwind CSS from their GitHub repository. Got you. You will not find any tailwind CSS. Instead, you will find
many JS’s. Now that is interesting. Isn’t it?
Let us recap the important attributes of Tailwind CSS that we narrated so far. It is just one – Being atomic
with the CSS classes. The next one is about not having all of them defined in a CSS. We are sure at some
point they would have started like that but with programming skills, you could solve that problem and
program a script that could generate that monolith CSS. This is exactly what you will notice in that GitHub
repo. We could thus summarize the two important attributes of Tailwind CSS are –

1. Atomic CSS classes
2. Naming convention for CSS classes
Yes, you read it right, the convention in naming becomes the switch cases in JavaScript which then
generates the atomic styling attribute (e.g. background-color) with appropriate value. Let us take a look at
the convention –
//Padding conventions
p-0 {
padding: 0px;
}
px-0 {
padding-left: 0px;
padding-right: 0px;
}
py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
ps-0 {
padding-inline-start: 0px;
}

This just goes on. The base of this convention is; p stands for padding and the number that comes in the
name stands for the size of the padding. From the example above 0px. From the convention for sizes other
than 0, the framework uses rem as units instead of px.
But if you ask us now how this makes a programmer’s life any easier and conducive to grasping CSS; we
will reply by using the word “distractor”. As a budding programmer, the biggest mistake, you could make
picking up CSS is when you do not understand what each styling property yields in the browser. Now
compound that ignorance with convoluted CSS classes or inline style properties. You will end up doing a trial-
and-error changes. Nex to for all we know you have already abandoned any latent wish to learn CSS.
The properties of Tailwind CSS being atomic class, using convention helps you appreciate the language,
and take notice of the effect language has on the browser.
Thus, learning more along with building the solution. Along with that, it inculcates the habit of following
conventions which will you write better JavaScript code as well, won’t it?
Unlike traditional CSS you have one more step to take before you reap the tailwind from the Tailwind CSS.
As we pointed out earlier there is no CSS to begin with which has all those atomic classes. Thus, if you
want to view and experience the fruits of your labour of wrangling CSS, you will have to generate the CSS
based on the convention. To do that you have CLI for Tailwind CSS and its watch property. Like all the
node, React, and Angular projects you can instruct the CLI of Tailwind to watch for changes to your code
files. The CLI will oblige to that request and monitor all the HTML, and JS files for changes. Well, changes
to class names. As you modify your markup and decorate them with class names following the
conventions, the CLI reads those classes and then generates the CSS with appropriate atomic properties.
You need to include the output CSS using the link attribute.
Like all mature frameworks, you could customize this framework with aspect ratio, size values, and browser-
specific hacks. But like all other frameworks, we recommend you keep that for future endeavors. We hope

you make more friends with different languages even CSS in your early stages of life as a programmer than
enemy of it.