Tw-Tailwind

A lighter version of twin.macro that allows you to create tailwind react components like styled-components

Install

Using npm

1npm i tw-tailwind

Using yarn

1yarn add tw-tailwind

⚠️ Tw-Tailwind requires TailwindCSS to be installed and configured on your project too. Install TailwindCSS

Usage

Import

1import tw from 'tw-tailwind'

Features

1const sharedClasses = tw`border-red-500`

1const Component = tw.div`flex items-center justify-center`
2
3const Component = tw(Button)`flex items-center justify-center`

1interface Props {
2  $hasBorder: boolean
3}
4const Component = tw.div<Props>`
5  bg-red-500 
6  ${({ $hasBorder }) => $hasBorder && 'border-2 border-blue-500'}`
7
8const Component = tw(Button)<Props>`
9  bg-red-500 
10  ${({ $hasBorder }) => $hasBorder && 'border-2 border-blue-500'}`

1const Component = tw.div(() => ['bg-red-500'])
2
3const Component = tw(Button)(() => ['bg-red-500'])

1interface Props {
2  $hasBorder: boolean
3}
4const Component = tw.div<Props>(({ $hasBorder }) => [
5  'bg-red-500',
6  $hasBorder && 'border-2 border-blue-500',
7])
8
9const Component = tw(Button)<Props>`
10  bg-red-500 
11  ${({ $hasBorder }) => $hasBorder && 'border-2 border-blue-500'}`

Example

Button

1import tw from 'tw-tailwind'
2
3const colors = {
4  white: tw`bg-white hover:bg-gray-100 text-black`,
5  gray: tw`bg-gray-100 hover:bg-gray-200 text-black`,
6  emerald: tw`bg-emerald-600 hover:bg-emerald-700 text-white`,
7}
8const loadingColors: typeof colors = {
9  white: tw`text-white`,
10  gray: tw`text-gray-100`,
11  emerald: tw`text-emerald-600`,
12}
13
14type ButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref'> & {
15  color?: keyof typeof colors
16  isLoading?: boolean
17}
18
19export const Button = ({ children, className, type = 'button', color = 'emerald', isLoading, ...props }: ButtonProps) => (
20  <ButtonStyled type={type} {...props} $color={color} $isLoading={isLoading} className={className}>
21    {children}
22  </ButtonStyled>
23)
24
25const ButtonStyled = tw.button<{ $color: keyof typeof colors; $isLoading?: boolean }>(({ $isLoading, $color }) => [
26  `disabled:opacity-30 disabled:pointer-events-none text-white font-medium rounded-md px-4 h-10 flex items-center relative select-none`,
27  colors[$color],
28  $isLoading && ['pointer-events-none', loadingColors[$color]],
29])

Input

1import { forwardRef, ReactNode } from 'react'
2import tw from 'tw-tailwind'
3import { Label } from './label'
4import clsx from 'clsx'
5
6const colors = { white: tw`bg-white `, gray: tw`bg-gray-200` }
7
8type InputProps = Omit<JSX.IntrinsicElements['input'], 'ref'> & {
9  label?: string
10  icon?: ReactNode
11  className?: string
12  color?: keyof typeof colors
13}
14export const Input = forwardRef<HTMLInputElement, InputProps>(
15  ({ label, className, icon, color = 'white', ...props }, ref) => (
16    <Container className={className}>
17      {label && <Label>{label}</Label>}
18      <Wrapper>
19        <InputStyled className={clsx([colors[color], !!icon && `pl-10 `])} {...props} ref={ref} />
20        <IconWrapper>{icon}</IconWrapper>
21      </Wrapper>
22    </Container>
23  ),
24)
25
26Input.displayName = 'Input'
27
28const InputStyled = tw.input`bg-white rounded-md px-3 shadow-sm h-10 flex border border-gray-300 items-center w-full pb-px`
29const Container = tw.div`text-sm w-full`
30const Wrapper = tw.div`relative`
31const IconWrapper = tw.div`absolute text-xl h-10 px-3 flex justify-center items-center top-0 left-0`

VS Code IntelliSense

Install "Tailwind CSS IntelliSense" VSCode - extension for autocomplete

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

1  // vs code setting.json
2
3  "scss.validate": false,
4  "editor.quickSuggestions": {
5    "strings": true
6  },
7  "editor.autoClosingQuotes": "always",
8  "tailwindCSS.experimental.classRegex": [
9    "tw`([^`]*)", // tw`...`
10    "tw\\.[^`]+`([^`]*)", // tw.xxx`...`
11    "tw\\(.*?\\).*?`([^`]*)", // tw(Component)`...`
12    ["tw\\.[^\\)]+\\(.*=>([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], // tw.xxx(()=> ['...'])
13    ["tw\\(.*?\\)\\(.*=>([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], // tw(Component)(()=> ['...'])
14    ["tw\\(.*?\\).*?\\(.*=>([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], // tw(Component)<...>(()=> ['...'])
15    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] // clsx( ['...'])
16  ],
17
18  "tailwindCSS.includeLanguages": {
19    "typescript": "javascript",
20    "typescriptreact": "javascript"
21  },