1.1.3 • Published 2 years ago
tailed-components v1.1.3
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
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
- Install Tailwind CSS IntelliSense
- Add these settings in your settings.json file:
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.experimental.classRegex": [
"tail`([^`]*)",
"tailed`([^`]*)",
"tailed\\(.*?\\)`([^`]*)",
"is\\(.*?\\)`([^`]*)",
"isnt\\(.*?\\)`([^`]*)"
]
🏁 Roadmap
- Autocomplete classes
- Conditional classes
- DOM props validation
- Vue wrapper
- Vscode extension
- Typescript support
📌 License
All assets and code are under the MIT LICENSE
Copyright (c) 2022, Marzuk Zarir 😎