It seems Tailwind CSS is trending, so I gave it a try.
To be honest, I’m writing this article while figuring out what exactly Tailwind CSS is.
What is Tailwind CSS?
Tailwind CSS
From the official site:
“Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.”
Interpreting it freely, I think it means “Tailwind CSS offers a simple way to write CSS but allows for advanced functionality, enabling you to create stylish designs without needing to write complex custom CSS files.”
Loading the tailwind.min.css File via CDN
* Since I’m just testing things out for now, I’ll only be loading the `tailwind.min.css` file.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
If you want to build your own components, you’ll need to install it via npm.
Writing HTML with Tailwind CSS
* You can just set font size, weight, alignment, etc. directly in the class attribute.
<h1 class="text-3xl text-green-700 text-center pt-10 text-ejcorp">Tried Using the Trending Tailwind CSS for Now</h1>
<div class="text-center mt-10">
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">Button</button>
</div>
<div class="text-center mt-10">
<p class="text-xs font-thin">Text</p>
<p class="text-sm font-extralight">Text</p>
<p class="text-base font-light">Text</p>
<p class="text-lg font-normal">Text</p>
<p class="text-xl font-medium">Text</p>
<p class="text-2xl font-semibold">Text</p>
<p class="text-3xl font-bold">Text</p>
<p class="text-4xl font-extrabold">Text</p>
<p class="text-5xl font-black">Text</p>
<p class="text-6xl">Text</p>
<div class="group m-10 p-10 border hover:bg-gray-100">
<p class="text-3xl font-black group-hover:text-red-900">Color changes on mouse hover.</p>
</div>
</div>
For how to write class attributes, please refer to:
Tailwind Cheat Sheeet
Demo Page: Tried Using the Trending Tailwind CSS for Now
Demo Page: Tried Using the Trending Tailwind CSS for Now
My Thoughts on Trying Out the Trending Tailwind CSS
After about an hour of trying out Tailwind CSS because it’s trending, I get the feeling that we’re moving towards writing all styles directly in HTML class attributes rather than using custom CSS styles for each company or individual.
It also eliminates the hassle of naming conventions for class names in projects, which can be a pain.
* Please use at your own discretion if you decide to reuse any parts.
Do not reuse the Google Analytics tag in the head tag of the demo page.
