This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

tailed-components

What is Tailed Components?

Tailed components is a framework agnostic tiny (405B) library for add tailwind classes. It works like styled-components but with classnames instead of css props. It also supports conditional classes.

Why tailed components?

• 🚀 Work with any framework
• ⚡ Easy to use
• 📦 Very small bundle size
• 🔥 Conditional class helper
• ⏳ No runtime overhead like emotion or styled-components
• ✈️ Avoid utility class mess in react components

✨ Installation

1. Install and configure tailwindcss

2. Install tailed-components:

      npm i tailed-components

🚨 Usage

React

import tailed from 'tailed-components/lib/react'

const Heading = tailed('h1')`bg-gray-700 text-white
${(props) => (props.textLarge ? 'text-6xl' : 'text-base')}`

export default function App() {
    // render as <h1 class="bg-gray-700 text-white text-6xl">Hello world</h1>
    return <Heading textLarge>Hello world</Heading>
}

Using className prop

const Paragraph = tailed('p')`bg-gray-700 text-white`

// You can use className props as like regular component
// note: added classes always placed in last
export default function App() {
    // render as <p class="bg-gray-700 text-white text-center">Hello world</p>
    return <Paragraph className="text-center">Hello world</Paragraph>
}

Using as prop

const Button = tailed('button')`text-xl`

// Button component will render an 'a' tag instead of 'button' tag
<Button as="a">Click Here</Button>

// You can also pass another component like this
<Button as={AnotherComponent}>Click Here</Button>

Other frameworks

import tailed from 'tailed-components'

const classes = tailed`bg-gray-700 text-white
${(props) => (props.textLarge ? 'text-6xl' : 'text-base')}`

classes({ textLarge: true }) // bg-gray-700 text-white text-6xl

🚦 Conditional class helper

Prop key can be either truthy or falsy. You can use is and isnt helper only in tagged template literals

is('red')`bg-red-500` and red ? 'bg-red-500': '' are equivalent

isnt('blue')`bg-green-500` and blue ? '' : 'bg-green-500' are equivalent

import tailed from 'tailed-components/react'
import { is, isnt } from 'tailed-components'

const Button1 = tailed('button')`text-center p-3 ${is('red')`bg-red-500 mx-2`}`
const Button2 = tailed('button')`text-center p-3 ${isnt('blue')`bg-green-500 mx-2`}`

export default function App() {
    return (
        <>
            // <button class="text-center p-3 bg-red-500 mx-2">Click Here</button>
            <Button1 red={true}>Click Here</Button1>
            // <button class="text-center p-3 bg-green-500 mx-2">Click Here</button>
            <Button2 blue={false}>Click Here</Button2>
        </>
    )
}

note: these helpers cannot be deeply nested

🚨 VS Code Autocomplete

1. Install Tailwind CSS IntelliSense
2. Add these settings in your settings.json file:

"editor.quickSuggestions": {
  "strings": true
},
"tailwindCSS.experimental.classRegex": [
  "tail`([^`]*)",
  "tailed`([^`]*)",
  "tailed\\(.*?\\)`([^`]*)",
  "is\\(.*?\\)`([^`]*)",
  "isnt\\(.*?\\)`([^`]*)"
]

🏁 Roadmap

• [x] Autocomplete classes
• [x] Conditional classes
• [x] DOM props validation
• [ ] Vue wrapper
• [ ] Vscode extension
• [ ] Typescript support

📌 License

All assets and code are under the MIT LICENSE

Copyright (c) 2022, Marzuk Zarir 😎