tailorwind

Reusable and extensible React components using Tailwind CSS 🧶💙

---

What's this? 🧶

Tailorwind is a super tiny little library that allows you to easily declare components with the utility class names from Tailwind. Basically - you'll be able to pull stunts like these:

// Super basic
const ChiliButtonStyle = tw`bg-[red]`

// Kinda basic
const ChiliButton = tw.button`bg-[red]`

// Spicy basic
const ChiliButton = tw('button')`bg-[red]`

// Whoa! Look at you go!
const AnimatedChiliButton = tw(motion.button)`bg-[red]`

// You should really chillax.
const StyledComponent = styled.button`display: flex; justify-content: center;`
const ChiliButton = tw(StyledComponent)`bg-[red]`

// NOOOOOOOOOOO! 😭
const ChiliButton = tw(styled(motion.button)`display: flex;`)`justify-center bg-[red]`

Getting the show on the road 🍻

I knew you'd buy right into this piece of super tiny software the moment you stepped into this repo! You can either check it out at npmjs - or just install it using your favorite package manager.

Using yarn 🧶

yarn add tailorwind

or npm 📦

npm install tailorwind

or even pnpm 🍻

pnpm install tailorwind

All lined up and ready to go! 🥊 Just slap an import like this right onto your code and you're golden 👑

import { tw } from 'tailorwind'

What about the intellisense? 😱

Wouldn't this break the amazing Tailwind intellisense extension? Fret not! There's a solution for this 🙏

First off - you'll need the extension. Then you'll have to edit your vscode settings and add the following property:

"tailwindCSS.experimental.classRegex": [
    "tw\\.[^`]+`([^`]*)`", // tw.xxx`...`
    "tw\\(.*?\\).*?`([^`]*)" // tw(Component)`...`
]

I've stolen those regexes directly from tailwind-styled-components. In other words - don't thank me for em. Skip on over to that repo and give your thanks. 🙏

Why this? 🤔

I love Tailwind. It's simply great. But - I was starting to get a little bit tired of the whole "div-bonanza" consisting of <div className="p-8 bg-red-500 ... bla bla" /> and so on. I know what you're thinking - just declare a component that accepts children and use that bad boi if you'd like more verbose components. Fine, that's one way to go about it. But think of all the lines we're saving 💙.

We're taking this chunky chunk-chunk:

const ChiliButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
  return (
    <button className="bg-[red]" {...props}>
      {children}
    </button>
  )
}

and replacing it with this slimmy slim-slim:

const ChiliButton = tw.button`bg-[red]`

It might be a 🌶️HOT TAKE🌶️ but I'd say it's at least a little bit of a win.

With the power of Tailorwind ⚡

You get the gist. You write smaller amounts of code and it makes it a bit easier to read. Here's my final example to trick you into using my simple little library.

const BaseButton = tw(motion.button)`p-8 rounded-2xl`

const variants: Variants = {
  initial: {
    scale: 0.2,
    opacity: 0,
  },
  animate: {
    scale: 1,
    opacity: 1,
  },
  tap: {
    scale: 0.8,
  },
  hover: {
    scale: 1.2,
  },
}

BaseButton.setDefaultProps({
  initial: 'initial',
  animate: 'animate',
  whileTap: 'tap',
  whileHover: 'hover',
  variants,
})

const Button = {
  Primary: tw(BaseButton)`bg-[red]`,
  Secondary: tw(BaseButton)`bg-[green]`,
  Tertiary: tw(BaseButton)`bg-[blue]`,
}

Fully animated and ready to rumble - with the power of the all mighty framer-motion. Just slap one of those motion components right in there and watch that component purr. 🧶

Hey oh! Missing feature alert 🚨

You might end up in a corner where you need a bit more functionality. This teeny tiny lib is just supposed to do the absolute necessity to get the component declaration show on the road. If you're looking for a more styled-components type of wibe - I'd direct you right on over to: tailwind-styled-components. That's also a teeny tiny library that's just a tad bit larger - but also does a tad bit more. 🍻 So check that out before wreaking havoc over here with your silly little feature requests. 💙

The was built with love 🥰, black metal 🎸, and and just a bit of spare time. 💙