Strawberries are not only beautiful but also juicy and lovely to the taste buds, thereby preparing your stomach for the main meal. Hey! I'm not a nutritionist, so I may not be able to help you out with the nutritional facts of appetizers but I can help you with something. Just like appetizers appeal to taste buds, your website or application should also be appealing to users(unless you do not want to make some currency).
Front End Web Development could be an easy skill to learn in a short time until you come in contact with the "sophisticated lady" called CSS(Cascaded Stylesheet)😂 The discussion about CSS looking simple yet very tactical is unending. This is a major reason for the creation of various CSS frameworks. Many thanks to Open source projects and their contributors These frameworks take your development journey many meters away from the stress lane.
The implementation of CSS frameworks doesn't rule out the use of the original CSS file, most of them are not easily understood directly by the browser, hence the need for transpiling with the main CSS file. The main function of these frameworks is to help you implement the DRY(Don't Repeat Yourself) technique of coding.
Why write it everywhere you need it when you can declare it once and call it wherever and whenever needed?
Let's make a brief stop over at some of the popular CSS frameworks
CSS Frameworks
As a beginner in Web Development, there is always a confusion about which CSS framework to choose. This article would introduce you to some of them and also explain one of them in detail hoping that you feel at ease to include it in your learning journey.
Some popular CSS frameworks are:
Sass CSS: SASS is an acronym for Syntactically Awesome Stylesheet. It is a CSS extension file that is preprocessed into the original CSS file. This is more like defining styling rules in a separate file, than mentioning them in the main CSS file. Sass) requires installation on your machine or workspace (VS Code) and the sass file is saved with the .scss extension. Sass uses operations such as @imports, @mixin, and @extend to declare style rules.
Less CSS: LESS is an acronym for Leaner Style Sheet. It is also a CSS preprocessor just like SASS but it works on the client or server side. It is installed like other CSS libraries, it is saved with the .less file extension and linked in the HTML file. Less also includes various functions for string manipulations and mathematical operations. In other words, it does more than the usual CSS preprocessor.
TailWind CSS: There could be more than one way to do something but everyone loves the easier way, especially when it gives a better output. TailWind CSS is a CSS framework for building awesome designs easily straight from your Markup. This means calling different inbuilt utility components directly in your Markup text.
This article will dwell more on the last item of the above list (i.e Tailwind CSS) where the following would be duly explained:
- How to setup Tailwind CSS in your project
- TailWind CSS syntax and utilties
Please note that the writer of this article assumes that you have a basic knowledge of Vanilla CSS( i.e CSS in its original form).
Let's dive in!
Setting up Tailwind CSS
To set up Tailwind CSS in your project folder, ensure that you have Nodejs already installed. The reason is that you'd need the node-package-manager(npm) to install TailWind CSS. Installing Nodejs is beyond the scope of this article but you can check here for more information concerning Nodejs. In your project folder, create public and src subfolders respectively.
The use of tailwind automatically means there'd be two CSS files in your project. One input and the other output. see here
- Got to tailwindcss.com/docs/installation
- Install the tailwind CSS by typing
npm install -Dtailwind CSS in your code editor terminal. - Initialize the tailwind package with
npx tailwindcss init - This automatically creates a tailwind.config.js file in the src folder
- Check the package.json folder to ensure that the tailwind CSS is one of the dependencies.
"name": "portfolio-with-tailwindcss",
"version": "1.0.0",
"description": "",
"main": "tailwind.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
- Run the tailwind build in your terminal using
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch link the the css in your html using
<link href="/dist/output.css" rel="stylesheet">Do not forget to add the @tailwind directives to the main css file of your project @tailwind base; @tailwind components; @tailwind utilities;
After these steps, check the subfolders to ensure that the main CSS file is in the public folder while the tailwind CSS is in the src folder.
TailWind CSS Syntax
TailWind CSS uses style rules referred to as utilities to design an html page. For instance, it declares sizes in small, medium, and large denoted with sm, md, and lg respectively. It also uses units(numbers) to specify the intensity of the particular styling instead of the usual px, em ,etc. Just like Vanilla CSS, tailwind contain different styling components like flexbox, effects, filters, interactivity, spacing and more
Examples: To make a text bold
<div class="text-sm font-bold text-black">Make it Bold</div>
To apply hover on a nav link
<a class="bg-blue-500 hover:bg-blue-600">Contact</a>
In the last example, bg means background color while the number attached to it specifies the intensity of the color
Benefits of TailWind over other CSS frameworks
- It is utility based
- It used inline with the html element
- it is easier and faster to code
- It has an easy-to-understand documentation
Conclusion
It has been a smooth sail up to this point and I'm hopeful that you'd take it further from here in your learning and practice of TailWind CSS. Hopefully, in a subsequent article, we'd build a project from the scratch with Tailwind CSS or go in-depth on another CSS Framework. Till then, remember, every trial makes you better.