Getting Started With TailwindCSS🚀 👨💻
What is Tailwind🤔?
Tailwind is a CSS framework that makes use of responsive, single-use utility classes. According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. This article aims to give a brief introduction/crash-course to this productivity tool.
If you are front end web developer, you probably already familiar with Bootstrap or some other CSS Framework( there’s a ton of them out there).
Although bootstrap is great and the most popular CSS framework, it is not necessarily the best for everyone/every project. If you are a fan of Bootstrap’s utility classes you will love tailwind. Tailwind focuses on productivity as opposed to giving you an opinionated way to build your components/elements.
I stumbled on tailwind doing some research on web design best practices. While watching Steve Schoger’s(co-creator of Tailwind) talk on “Refactoring UI “|CSS Day 2019 he spoke about Tailwind CSS so I went on to the official site to check it out. As I watched the demo on the index page, I was captivated by the unique approach of this framework and I fell in love
I challenged myself to learn something new. As soon as I tried using Tailwind CSS to build a simple dashboard design, it was a game-changer for me. Since then I have used it in some real projects and I’ve experienced a significant boost in my productivity. I can now write responsive UIs up to 2X faster. My CSS code is now way more concise and maintainable and I can customize it however I need.
Now is a good time to learn and take advantage of the full functionality of this forward-thinking and well-thought-out framework.
Let’s Get Started!
Installation
The easiest way to use tailwind is through the CDN link, but it comes with limitations. ( you won’t be able to write/compile your own custom classes with tailwind code). you could install tailwind using a package manager
The easiest way to use tailwind through the CDN link, but it doesn’t provide the full features of tailwind, Alternatively, the better approach is to install it using a package manager so as to get the full features of the framework
- Install on your project directory using npm or Yarn
# Using npm
npm install tailwindcss --save-dev# Using Yarn
yarn add tailwindcss --dev
2. Create your configuration file
Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:
# Using npm
npx tailwindcss init# Using Yarn
yarn tailwindcss init
This will create a minimal tailwind.config.js file at the root of your project:
you can configure create-react-app to use Tailwind.
Responsiveness is a Breeze
There are four major by default, inspired by common device resolutions
Small display(sm)@media (min-width: 640px) { /* … */}
Medium display (md)@media (min-width: 768px) { /* … */}
Large display (lg)@media (min-width: 1024px) { /* … */}
Extra-large display (xl)@media (min-width: 1280px) { /* … */}
To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character: e.g.
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --><img class=”w-16 md:w-32 lg:w-48" src=”…”>
By default, Tailwind uses a mobile-first breakpoint system, similar to Bootstrap. What this means is that unprefixed utility like uppercase take effect on all screen sizes, while prefixed utilities like md:uppercase only take effect at the specified breakpoint (medium) and above.
<div class=”bg-red-500 sm:bg-red-500 md-bg-blue-500 lg:bg-pink-”>Tip: Don’t use sm: to target mobile devices. Instead use un-prefixed utilities to target mobile, and override them at larger breakpoints.
Tailwind breakpoints only include a min-width and don’t include a max-width, which means any utilities you add at a smaller breakpoint will also be applied at larger breakpoints.
So if you want to apply a utility at one breakpoint only, the solution is to undo that utility at larger sizes by adding another utility that counteracts it.
The makers of tailwind put a lot of thought into making the framework as non-opinionated as possible, this gives you a lot of freedom and ease of customization.
Bonus:
- While you're still new to tailwind you might have to go back and forth their docs to get the right utility class names. Here’s a tailwind cheatsheet to help you get started 😉
- If you’re the kind of developer that prefers not to reinvent the wheel, Here are some reusable tailwind templates
