DEV Community

Cover image for Juicy Tailwindcss Tools For Everyone
Arafat
Arafat

Posted on • Updated on

Juicy Tailwindcss Tools For Everyone

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>;
}


Enter fullscreen mode Exit fullscreen mode

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 />


Enter fullscreen mode Exit fullscreen mode

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 />


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

With headwind:



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

Enter fullscreen mode Exit fullscreen mode




Tailwind Docs Extension

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

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.
Tailwind CSS Debug Screens

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>

Enter fullscreen mode Exit fullscreen mode




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

  1. Go to tailblocks
  2. Pick out a block you like.

Tailblocks

  1. Click the '<>View Code' button.
  2. Copy the code.
  3. Paste it into the html document
  4. 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.

Gradient Designer

Transform

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

Transform


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)

Collapse
 
atinypixel profile image
Aziz Kaukawala

Great collection! 🔥

Here's some more:

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

Happy Coding

Collapse
 
arafat4693 profile image
Arafat

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

Collapse
 
pjburgess profile image
Paul Burgess

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

Collapse
 
anshsaini profile image
Ansh Saini

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

Collapse
 
j471n profile image
Jatin Sharma

I like the Headwind. Thanks.

Collapse
 
arafat4693 profile image
Arafat

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

Collapse
 
j471n profile image
Jatin Sharma

Thanks mate.

Collapse
 
husseinkizz profile image
Hussein Kizz

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!

Collapse
 
peterwitham profile image
Peter Witham

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 :)

Collapse
 
arafat4693 profile image
Arafat

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

Collapse
 
hyggedev profile image
Chris Hansen

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.!

Collapse
 
giadat1599 profile image
giadat1599

Really helpful 👍

Collapse
 
firfin profile image
firfin

Thanks for the info, "gradient designer" seems to be missing a link though?

Collapse
 
arafat4693 profile image
Arafat • Edited

Thanks for letting me know, I've added the link now😁

Collapse
 
fernandosaraiva profile image
Fernando Saraiva

Great! Very good! It will be extremely useful for my current project.

Collapse
 
kylereeman profile image
KyleReemaN

thanks for sharing really like the transform tool :)

Collapse
 
arafat4693 profile image
Arafat

No problem, glad you found the article helpful😊