Table of Contents
-CSS and HTML
-What is Tailwind CSS?
-CSS vs. Tailwind CSS
-Applying it to your repertoire.
CSS and HTML
Hyper Text Markup Language (HTML)
Cascading Style Sheet (CSS)
What is Tailwind CSS
snippet of tailwind code from an old project of mine
Tailwind is a CSS framework that was first created in 2017 that has been consistently improving since its inception. This framework allows for you to directly insert CSS styling, such as color, padding, and image manipulation, into your HTML code without the headache of switching between stylesheets. You can use Tailwind with a link to a content delivery network (CDN) but it is recommended that you actually install tailwind in your project.
Installation of Tailwind to your project allows you to access to a custom CSS file, titled,
./src/tailwind.css, that allows you to establish a number of properties using a special name and using that name in your
class instead of retyping styles incessantly. Beware though, when forging new custom CSS rules or editing ones already created you must execute the
npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css command in your terminal to make it become active.
some custom css rules in an old project of mine
CSS vs. Tailwind CSS
Switching between HTML and different stylesheets can become tedious and tiresome, as well as writing rules for your styling can overlap one another and coding can get messy as the stylesheets become longer. While you can use the
style element to write CSS rules in HTML, this is seen as amateurish, especially the more rules you add, making your HTML page inundated.
Tailwind allows for you to write CSS rules within elements with use of the
class. This allows more versatility and customization in your code, as you are allowed to individually add styles to your elements rather than grouping together. You can also use a css stylesheet in tandem with Tailwind CSS but I recommend you either stick with one or the other to prevent overlapping code.
Adding it to Your Repertoire
The advent of Tailwind CSS is a game changer, easy to install, use, and implement into your code. Once you grasp the understanding of Tailwind you would never want to go back to
A snippet of code from a project I am working on in React. Tailwind being utilized
The Guide for Tailwind Installation is linked below
What are you waiting for, give up on the stylesheets and become accustomed to Tailwind starting right now!
Top comments (0)