Arafat

Posted on Jan 4, 2023 • Updated on Jan 13, 2023

Juicy Tailwindcss Tools For Everyone

#tailwindcss #webdev #css #beginners

Tailwind CSS is a utility-first CSS framework that can help developers build custom designs quickly and easily. One of the things that makes Tailwind CSS so powerful is the abundance of third-party tools and resources available to use in conjunction with it. In this article, we'll take a look at some of the coolest Tailwind CSS tools out there.

Twin.macro for the Tailwind-in-js

twin.macro is a library that allows you to use these styles in your JavaScript code. This library works exactly like styled-components.

Here is an example of how you might use twin.macro to style a button in a React component:

import tw from "twin.macro";

const StyledButton = tw.button`
  bg-blue-500
  hover:bg-blue-700
  text-white
  font-bold
  py-2
  px-4
  rounded
`;

function MyButton() {
  return <StyledButton>Click me!</StyledButton>;
}

Switch to the styled import to add conditional styling:

import tw, { styled } from 'twin.macro'

const StyledInput = styled.input(({ hasBorder }) => [
  `color: black;`,
  hasBorder && tw`border-purple-500`,
])
const Input = () => <StyledInput hasBorder />

Or use backticks to mix with sass styles:

import tw, { styled } from 'twin.macro'

const StyledInput = styled.input`
  color: black;
  ${({ hasBorder }) => hasBorder && tw`border-purple-500`}
`
const Input = () => <StyledInput hasBorder />

Headwind Extenstion

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. We all know that utility frameworks come with a long list of class names. This extension enforces consistent ordering of classes and automatically removes any accidental duplicate class names on save.

For example, without headwind:

<div className="w-24 bg-yellow-400 font-bold text-3xl flex justify-center">
Headwind sorter
</div>

With headwind:

<div className="flex justify-center w-24 text-3xl font-bold bg-yellow-400">
Headwind sorter
</div

Tailwind Docs Extension

This VS extension lets you quickly access Tailwind docs pages from within VSCode.

Tailwind CSS Debug Screens

Tailwind CSS Debug Screens is a plugin that shows the currently active screen like sm, md, lg, etc. (responsive breakpoint).

Look at the bottom-left corner.

Tailwindcss Brand Colors

Tailwindcss Brand Colors is a plugin for the Tailwind CSS framework that allows you to easily add colors from popular brand color palettes to your project.

For example, you could use the text-twitter class to apply the Twitter blue color to some text, or the bg-github class to set the background color of an element to the GitHub blue color.

<h1 class="text-twitter">This text will be Twitter blue</h1>
<p class="bg-github text-white p-4">
 This paragraph will have a GitHub blue background and white text
</p>

Tailblocks

Tailblock is a pre-designed block of UI elements that are styled using the framework's utility classes and can be easily dropped into a project to save time and reduce the need for custom CSS. These include common UI patterns such as navigation bars, buttons, forms, and other interface elements.

How to use

Go to tailblocks
Pick out a block you like.

Click the '<>View Code' button.
Copy the code.
Paste it into the html document
Repeat the process with as many blocks as you like 👍.

In addition to tailwind blocks, there is another tool called tailwind toolbox that works pretty much in the same way. The Tailwind toolbox is also a collection of pre-built, customizable templates and components that can be used as a starting point for a new project.

Gradient Designer

We all know how hard it is to make a gradient color in CSS, and with tailwinds utility classes, It is way more complicated. Gradient designer is a tool that allows users to create and customize gradients for use in web design and other visual media. The tool generates the corresponding CSS and Tailwind code for the gradient, which can be copied and pasted into a web design project.

Transform

Transform is a tool that allows users to convert CSS styles into utility classes for use with the Tailwind CSS framework.

Conclusion

Thank you, guys, for reading the article from start to end. I hope you guys liked these tools and have discovered something new today and can use them to boost your productivity. See you all in my next article😊.

Top comments (18)

Aziz Kaukawala • Jan 5 '23

Great collection! 🔥

Here's some more:

Flowrift: Beautifully designed Tailwind CSS UI blocks.
Flowbite: Tailwind CSS component library.

Happy Coding

Arafat • Jan 5 '23

Thanks mate. Yea I agree, Those tools are also pretty handy. 😊👌

Paul Burgess • Jan 8 '23

Tailwind. The framework for developers who don't know what they're doing.

Ansh Saini • Jan 14 '23

I’m curious why you think that. Can you elaborate?

Jatin Sharma • Jan 5 '23

I like the Headwind. Thanks.

Arafat • Jan 5 '23

👍👍. I also read your articles. They are great.

Jatin Sharma • Jan 5 '23

Thanks mate.

Hussein Kizz • May 11 '23

Really great article, I wish debug screens was just a chrome extension or vscode than the crazy part to set it up, but liked this very much, chill up tailwind die hards, let me also share my tailwind stuff collection, affiliate.notion.so/my-tailwind-no... of course am a notion affiliate but nothing sold here, it's all free, just my personal stuff I use daily!

Peter Witham • Jan 7 '23

Thanks for the list, especially the debug screens. I spend more time than I want to admit sometimes fighting those screen size classes to figure out what's going on :)

Arafat • Jan 7 '23

Yes, same goes for me. Really like the debug tool😊

Chris Hansen • Jan 20 '23

Bookmarked half of these. Thanks so much. I just wish tailblocks had a React version so I didn't have to change out all the classnames and component-ize them.!