Tailed

Tailed is a tiny lib to add styled-components syntax like, with suport to conditional classes.

Motivation

It's was initally be created to work with tailwindcss and avoid class mess inside react components without need a build process, but it's can used with any framework (maybe I need split in two packages later).

Usage

Tailed works like styled-components, but, with class names instead of css props.

import { tailed } from 'tailed-js'

const Box = tailed('div')`
  bg-red
  p-2 lg:p-4
  rounded-sm lg:rounded-lg

  ${props => props?.size === 'small' && 'text-sm'}
`

// it's allow especialization
const ErrorBox = tailed(Box)`
  border-red
`

// and you can continue using className prop to add extra class names
const App = () => (
  <Box className="m-4">
    Magic!
  </Box>
)

Using "as" prop

Like styled-components, you can add as prop to use a diferent base component:

const Button = tailed('button')``

// In this case, the rendered element will be an <a> tag instead of <button>.
<Button as="a" />

// There, you get AnotherComponent rendered instead of <button> tag
<Button as={AnotherComponent}>

Using without React

You can use this lib with a more independent way, importing tail insteadof tailed.

import { tail } from `tailed-js`

const classNames = tail`
  bg-red
  p-2 lg:p-4
  rounded-sm lg:rounded-lg

  ${props => props?.size === 'small' && 'text-sm'}
`

const names = classNames({
  size: 'small'
})

It's totally independent of lib/frameowork and is a dependency free.

A bit more powerfull

Using tailed with styled-by, you can create a powerfull conditional styles handler.

import { tail } from 'tailed-js'
import styledBy from 'styled-by'

// you can use tail or tailed here
const classNames = tail`
  bg-red
  p-2 lg:p-4
  rounded-sm lg:rounded-lg

  ${styledBy('size', {
    sm: 'text-sm',
    lg: 'text-lg'
  })}
`

VS Code IntelliSense autocomplete

You can add these settings on your user config:

"editor.quickSuggestions": {
  "strings": true
},
"tailwindCSS.experimental.classRegex" : [
  "tailed`([^`]*)",
  "tailed\\(.*?\\)`([^`]*)",
  "tail`([^`]*)"
],
// if you're using typescript
"tailwindCSS.includeLanguages" : {
  "typescriptreact" : "javascript",
  "typescript" : "javascript"
}