If you’re like me and you find yourself looking up new libraries and tools, you might take a liking to Tailwind CSS! It is an amazing utility-first CSS framework that is very user-friendly. You might think, “great, sounds like Bootstrap”, but nope! Unlike Bootstrap, Tailwind does not have built-in predesigned components, but rather it has low-level utility classes that developers can choose from based on what she/he wishes to build — customization is the name of the game! Another pro to Tailwind is that all work can be done via in-line styling.
Tldr; If Bootstrap equates to cookie-cutter websites that look the same thanks to their fixed template styles, Tailwind is a shiny, new tool that gives you everything you need to create your design quickly and painlessly. To find out more directly from the source, take a peek here: https://tailwindcss.com/.
So now that we know what Tailwind is and why it’s so awesome, let’s get to installing and playing around with it!
- First, we have to install Tailwind via npm (if you’re not familar with npm, it is the node package manager for the Node JavaScript platform — it is used primarily to install, publish, and create node programs). Start with this command:
2. Then create a Tailwind config file (this is an opportunity to add customizations like colors, fonts, spacing, etc). Input this command in your terminal as follows:
3. Next, in the root directory of your project, create a file > name it postcss.config.js > include the following snippet and save:
4. Following that configuration step, open your main CSS file and include these directives for the three base packages of Tailwind:
5. To scan your files for classes and build your CSS, run the Tailwind CLI (command-line interface) using this:
Now that the installation is all taken care of, you’re ready to start! Before anything else, be sure to take a look through their “library” that has all of their fixed sets of typography, colors, drop shadows, flex box, backgrounds, borders, you name it. No really, there’s even a quick search for you to look up what you need by name! Take a peek here: https://tailwindcss.com/docs/font-family
This is also a quick preview of what using Tailwind looks like.
It may seem a bit intimidating at first, as it has you using long class names — but trust that you will get used to it, and you will also most definitely appreciate it over the course of your next project. With that, hope you have fun as you Tailwind away!
What’s your favorite styling tool? Feel free to share in a comment, and follow me for more of my discoveries as a growing developer!
