Package Exports

@aplr/tailwind-components
@aplr/tailwind-components/dist/tailwind-components.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@aplr/tailwind-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌬 Tailwind Components

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

Before 😵‍💫

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

After 🧖

const StyledButton = tw.div`
  ${({ $primary }) => ($primary ? "bg-indigo-600" : "bg-indigo-300")}

  flex
  items-center
  border
  border-transparent
  text-xs
  font-medium
  rounded
  shadow-sm
  text-white

  hover:bg-indigo-700
  focus:outline-none
`

<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

npm 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?)

{
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": [
    "tw(?:(?:(?:(?:\\[[.*]+\\])|(?:\\.[^`]+))+)|(?:\\(.+\\)))(?:<.+>)?`([^`]*)`",
    "tss`([^`]*)`"
  ]
}

Usage

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

import tw from "@aplr/tailwind-components"
import { render } from "react-dom"

const Button = tw.button`
  inline-flex
  flex-row
  items-center
  justify-center
  bg-indigo-500
  hover:bg-indigo-700
`

render(<Button>Click me!</Button>)

HTML

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

Interpolations

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

interface ButtonProps {
  $primary: boolean
}

const Button = tw.button<ButtonProps>`
  inline-flex
  ${({ $primary }) => ($primary ? "bg-indigo-600" : "bg-indigo-300")}
`

render(<Button $primary />)

HTML

<button class="inline-flex bg-indigo-600">
  <!-- children -->
</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

const RedButton = tw<ButtonProps>(Button)`
  ${({ $primary }) => ($primary ? "bg-red-600" : "bg-red-300")}
`

render(<RedButton $primary />)

HTML

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

Extend a Styled Component

const StyledComponent = styled.div`
  filter: blur(1px);
`

const  = tw(StyledComponent)`
  flex
`

HTML:

<div class="flex" style="filter: blur(1px);">
  <!-- children -->
</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.

const Button = tw.button`inline-flex items-center p-2`

<Button $as="a" href="#">Click me!</Button>

HTML

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

Advanced Example

import { ComponentProps, ElementType, PropsWithChildren } from "react"
import tw, { tss } from "@aplr/tailwind-components"

const ButtonSizes = {
  xs: tss`rounded px-3 py-1.5 text-xs`,
  sm: tss`rounded-sm px-4 py-2 text-sm`,
  md: tss`rounded-md px-5 py-2 text-sm`,
  lg: tss`rounded-md px-6 py-2 text-base`,
  xl: tss`rounded-md px-7 py-3 text-lg`,
}

const ButtonStyles = {
  primary: tss`bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500`,
  secondary: tss`bg-blue-100 text-blue-700 hover:bg-blue-200 focus:ring-blue-500`,
  light: tss`bg-white text-gray-700 hover:bg-gray-50 border-gray-300 focus:ring-blue-500`,
  success: tss`bg-green-600 text-white hover:bg-green-700 focus:ring-green-500`,
  danger: tss`bg-red-600 text-white hover:bg-red-700 focus:ring-red-500`,
  dark: tss`bg-zinc-800 text-white hover:bg-zinc-900 focus:ring-zinc-500`,
}

export type ButtonSize = keyof typeof ButtonSizes

export type ButtonStyle = keyof typeof ButtonStyles

type ButtonOwnProps<E extends ElementType> = PropsWithChildren<{
  as?: E
  size?: ButtonSize
  style?: ButtonStyle
  pill?: boolean
}>

type ButtonProps<E extends ElementType> = ButtonOwnProps<E> & ComponentProps<E>

type StyledButtonProps = {
  $size: ButtonSize
  $style: ButtonStyle
  $pill: boolean
}

const StyledButton = tw.button<StyledButtonProps>`
  inline-flex
  items-center
  border
  border-transparent
  font-medium
  shadow-sm
  focus:outline-none
  focus:ring-2
  focus:ring-offset-2
  cursor-pointer

  ${({ $style }) => ButtonStyles[$style]}
  ${({ $size }) => ButtonSizes[$size]}
  ${({ $pill }) => $pill && "rounded-full"}
`

export const Button = <E extends ElementType = "button">({
  as,
  size = "md",
  style = "primary",
  pill = false,
  children,
  ...props
}: ButtonProps<E>) => (
  <StyledButton $as={as} $style={style} $size={size} $pill={pill} {...props}>
    {children}
  </StyledButton>
)

render(
  <Button as="a" href="#" size="lg" style="light" pill>
    Click me!
  </Button>
)