Cascading Style Sheets or most commonly known as CSS is a programming language used for designing your website and make it look attractive. CSS has various properties to style your websites according to your wish. CSS is of 2 types:

• Internal CSS and,
• External CSS

Internal CSS helps us to write CSS in our HTML file itself inside of a tag called the <style> tag.

External CSS helps us to write our CSS in a different file altogether and we can link our CSS to our HTML by using the <link> tag.

Having multiple files one for the HTML and one for the CSS is hard. It increases the number of files your app has and can make it look complicated.

And internal CSS in every aspect of web development goes against every rule that needs to be followed while writing code. Internal CSS is written inside of an HTML element which goes against the rule that the design of the webpage and the context of the webpage must not be embedded or mixed with one another.

Hence, to make using CSS easier, certain frameworks have been made to make the implementation useful and also do not go against rules.

One such framework is tailwind css

Tailwind CSS was created by Tailwind Labs. It is a utility, mobile-first framework to style your applications. Tailwind CSS allows you to write CSS in the tag which is to be styled through the use of classNames. While using Tailwind CSS every style added to the className and if it is a genuine class, the style is going to be applied and the change can be seen on your web browser.

For eg:

<div className="pt-4"></div>

Note: pt-4 refers to padding-top: 4px

Result: padding-top of 4 px is applied to the element.

Magic right!

Now, you might be wondering how is the styling being applied when I am not using any CSS property?

That is the awesome part of the Tailwind CSS. What the classNames are, is they are just simple classNames and nothing else. But during compiling what happens is,

That specific className has the appropriate CSS property referenced to it and that property is applied as styling.

For eg: during compiling text-white is a className that has the appropriate CSS property referencing to it and that property is applied as styling. That CSS property is nothing but color: white

some more examples:

• mt-5 is a className that has the property of margin-top: 5

• bg-gray-100 is a className that has the property of background-color: rgba(243, 244, 246, var(--tw-bg-opacity))

• text-sm is a className that has the property of font-size: 0.875rem

And how did I get to know this?

• I got to know this from the tailwind css website and,
• I used the google developer tools to inspect the file and saw the name of the classes as normal classNames being used in the CSS section to style the elements and also saw the appropriate styling properties applied to it somewhat like this:

.pt-4 { padding-top: 4px; } This gave me clarity about how Tailwind CSS actually works

Hope you got clarity as well!

If you are not sure, try inspecting an app using Tailwind CSS and see for yourself!

Useful Links:

The tailwind CSS website:

• tailwindcss

The Tailwind CSS GitHub repository: https://github.com/tailwindlabs/tailwindcss