https://github.com/brunobertolini/tailed

Tailed is a tiny lib to add styled-components syntax like, with suport to conditional classes.
https://github.com/brunobertolini/tailed

css css-in-js hacktoberfest react styled-components tailwindcss

Last synced: 10 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/brunobertolini/tailed
• Owner: brunobertolini
• Created: 2021-09-16T09:22:51.000Z (over 3 years ago)
• Default Branch: develop
• Last Pushed: 2023-07-20T22:15:54.000Z (over 1 year ago)
• Last Synced: 2024-11-15T02:21:44.256Z (about 1 month ago)
• Topics: css, css-in-js, hacktoberfest, react, styled-components, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 2.09 MB
• Stars: 95
• Watchers: 3
• Forks: 5
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# 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.

```js

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 = () => (

  

    Magic!

  

)

```

### Using "as" prop

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

```js

const Button = tailed('button')``

// In this case, the rendered element will be an  tag instead of .


// There, you get AnotherComponent rendered instead of  tag

```

## Using without React

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

```js

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](https://github.com/brunobertolini/styled-by), you can create a powerfull conditional styles handler.

```js

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:

```json

"editor.quickSuggestions": {

  "strings": true

},

"tailwindCSS.experimental.classRegex" : [

  "tailed`([^`]*)",

  "tailed\\(.*?\\)`([^`]*)",

  "tail`([^`]*)"

],

// if you're using typescript

"tailwindCSS.includeLanguages" : {

  "typescriptreact" : "javascript",

  "typescript" : "javascript"

}

```