Propelling ourselves in 2024 with some tailwind

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 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 customise this framework with aspect ratio, size values and browser-

specific hacks. But like all other frameworks, we recommend you keep that for future endeavours. We hope

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

enemy of it.