🌬 Tailwind Components

Tailwind-native react components. Just like styled-components, without the css.

Before 😵‍💫

1const Button = ({ primary }) => (
2  <div
3    className={`flex ${
4      primary ? "bg-indigo-600" : "bg-indigo-300"
5    } inline-flex items-center border border-transparent text-xs font-medium rounded shadow-sm text-white hover:bg-indigo-700 focus:outline-none`}
6  />
7)

After 🧖

1const StyledButton = tw.div`
2  ${({ $primary }) => ($primary ? "bg-indigo-600" : "bg-indigo-300")}
3
4  flex
5  items-center
6  border
7  border-transparent
8  text-xs
9  font-medium
10  rounded
11  shadow-sm
12  text-white
13
14  hover:bg-indigo-700
15  focus:outline-none
16`
17
18<StyledButton $primary={false}>

Features

💅 Compatible with Styled Components

⚡️ Use it like any other React Component

🤯 No lines exceeding max line length

🧘 Cleaner code in the render function

Install

You have to install and configure Tailwind CSS to use this extension. Install TailwindCSS

1npm install --save @aplr/tailwind-components

VSCode IntelliSense

First, install Tailwind CSS IntelliSense VSCode extension

Then, add the following settings to your user or workspace settings (How to edit VSCode settings?)

1{
2  "tailwindCSS.includeLanguages": {
3    "typescript": "javascript",
4    "typescriptreact": "javascript"
5  },
6  "editor.quickSuggestions": {
7    "strings": true
8  },
9  "tailwindCSS.experimental.classRegex": [
10    "tw(?:(?:(?:(?:\\[[.*]+\\])|(?:\\.[^`]+))+)|(?:\\(.+\\)))(?:<.+>)?`([^`]*)`",
11    "tss`([^`]*)`"
12  ]
13}

Usage

Import the tw helper and use it to define React components styled with TailwindCSS.

1import tw from "@aplr/tailwind-components"
2import { render } from "react-dom"
3
4const Button = tw.button`
5  inline-flex
6  flex-row
7  items-center
8  justify-center
9  bg-indigo-500
10  hover:bg-indigo-700
11`
12
13render(<Button>Click me!</Button>)

HTML

1<button class="inline-flex flex-row items-center justify-center bg-indigo-500 hover:bg-indigo-700">
2  Click me!
3</button>

Interpolations

Tailwind Components support interpolations in the template syntax. The most common use are conditional class names, as shown in the following example.

1interface ButtonProps {
2  $primary: boolean
3}
4
5const Button = tw.button<ButtonProps>`
6  inline-flex
7  ${({ $primary }) => ($primary ? "bg-indigo-600" : "bg-indigo-300")}
8`
9
10render(<Button $primary />)

HTML

1<button class="inline-flex bg-indigo-600">
2  <!-- children -->
3</button>

Be sure to set the entire class name

✅ ${({ $primary }) => $primary ? "bg-indigo-600" : "bg-indigo-300"}

❌ bg-indigo-${({ $primary }) => $primary ? "600" : "300"}

Transient props

Tailwind Components support transient props. Prefixing prop names with a dollar sign ($) prevents them being forwarded to the DOM.

Extend a Tailwind Component

1const RedButton = tw<ButtonProps>(Button)`
2  ${({ $primary }) => ($primary ? "bg-red-600" : "bg-red-300")}
3`
4
5render(<RedButton $primary />)

HTML

1<button class="inline-flex bg-red-600">
2  <!-- children -->
3</button>

Extend a Styled Component

1const StyledComponent = styled.div`
2  filter: blur(1px);
3`
4
5const  = tw(StyledComponent)`
6  flex
7`

HTML:

1<div class="flex" style="filter: blur(1px);">
2  <!-- children -->
3</div>

Polymorphic Components

In order to change the underlying component, you can pass the component to be rendered to the $as prop at runtime. The styles will stay the same, just the element is changed.

1const Button = tw.button`inline-flex items-center p-2`
2
3<Button $as="a" href="#">Click me!</Button>

HTML

1<a href="#" class="inline-flex items-center p-2">Click me!</a>

Advanced Example

1import { ComponentProps, ElementType, PropsWithChildren } from "react"
2import tw, { tss } from "@aplr/tailwind-components"
3
4const ButtonSizes = {
5  xs: tss`rounded px-3 py-1.5 text-xs`,
6  sm: tss`rounded-sm px-4 py-2 text-sm`,
7  md: tss`rounded-md px-5 py-2 text-sm`,
8  lg: tss`rounded-md px-6 py-2 text-base`,
9  xl: tss`rounded-md px-7 py-3 text-lg`,
10}
11
12const ButtonStyles = {
13  primary: tss`bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500`,
14  secondary: tss`bg-blue-100 text-blue-700 hover:bg-blue-200 focus:ring-blue-500`,
15  light: tss`bg-white text-gray-700 hover:bg-gray-50 border-gray-300 focus:ring-blue-500`,
16  success: tss`bg-green-600 text-white hover:bg-green-700 focus:ring-green-500`,
17  danger: tss`bg-red-600 text-white hover:bg-red-700 focus:ring-red-500`,
18  dark: tss`bg-zinc-800 text-white hover:bg-zinc-900 focus:ring-zinc-500`,
19}
20
21export type ButtonSize = keyof typeof ButtonSizes
22
23export type ButtonStyle = keyof typeof ButtonStyles
24
25type ButtonOwnProps<E extends ElementType> = PropsWithChildren<{
26  as?: E
27  size?: ButtonSize
28  style?: ButtonStyle
29  pill?: boolean
30}>
31
32type ButtonProps<E extends ElementType> = ButtonOwnProps<E> & ComponentProps<E>
33
34type StyledButtonProps = {
35  $size: ButtonSize
36  $style: ButtonStyle
37  $pill: boolean
38}
39
40const StyledButton = tw.button<StyledButtonProps>`
41  inline-flex
42  items-center
43  border
44  border-transparent
45  font-medium
46  shadow-sm
47  focus:outline-none
48  focus:ring-2
49  focus:ring-offset-2
50  cursor-pointer
51
52  ${({ $style }) => ButtonStyles[$style]}
53  ${({ $size }) => ButtonSizes[$size]}
54  ${({ $pill }) => $pill && "rounded-full"}
55`
56
57export const Button = <E extends ElementType = "button">({
58  as,
59  size = "md",
60  style = "primary",
61  pill = false,
62  children,
63  ...props
64}: ButtonProps<E>) => (
65  <StyledButton $as={as} $style={style} $size={size} $pill={pill} {...props}>
66    {children}
67  </StyledButton>
68)
69
70render(
71  <Button as="a" href="#" size="lg" style="light" pill>
72    Click me!
73  </Button>
74)