Juicy Tailwindcss Tools For Everyone
Tags: tailwindcss, webdev, css, beginners
Published: 2023-01-04 15:18:31

**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](https://github.com/ben-rogerson/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:

```js
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:

```js
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:

```js
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](https://marketplace.visualstudio.com/items?itemName=heybourn.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`:

```html
<div className="w-24 bg-yellow-400 font-bold text-3xl flex justify-center">
Headwind sorter
</div>
```
With `headwind`:
```html
<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 docs](https://firebasestorage.googleapis.com/v0/b/tik-tok-clone-40a98.appspot.com/o/tailwindDocsExtension.gif?alt=media&token=c4dc7cc5-1662-4f91-9cf2-c7b8d9b1e15f)

## Tailwind CSS Debug Screens
[Tailwind CSS Debug Screens](https://github.com/jorenvanhee/tailwindcss-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](https://firebasestorage.googleapis.com/v0/b/tik-tok-clone-40a98.appspot.com/o/tailwindDebugScreenPlugin.png?alt=media&token=9b89546c-e271-46fd-a3fd-2406745a0e12)

## Tailwindcss Brand Colors
[Tailwindcss Brand Colors](https://github.com/praveenjuge/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.

```html
<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](https://tailblocks.cc/) 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](https://tailblocks.cc/)
2. Pick out a block you like.

![Tailblocks](https://firebasestorage.googleapis.com/v0/b/tik-tok-clone-40a98.appspot.com/o/Sk%C3%A4rmbild_20230104_155336.png?alt=media&token=0e770aab-d8ba-41e7-ac94-2cc5decf83df)

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

In addition to **tailwind blocks**, there is another tool called [tailwind toolbox](https://www.tailwindtoolbox.com/) 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](https://gradient-designer.csspost.com/) 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] (https://firebasestorage.googleapis.com/v0/b/tik-tok-clone-40a98.appspot.com/o/Sk%C3%A4rmbild_20230104_160602.png?alt=media&token=b7e9edc1-256e-4e08-bc26-a77944ba14b3)

## Transform
[Transform](https://transform.tools/) is a tool that allows users to convert CSS styles into utility classes for use with the Tailwind CSS framework.

![Transform](https://firebasestorage.googleapis.com/v0/b/tik-tok-clone-40a98.appspot.com/o/Sk%C3%A4rmbild_20230104_161015.png?alt=media&token=9ed08621-72df-4c39-976d-9c2d03aa48bc)

---

## 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😊.