tailed - GitLite

KO | EN

gitlite — search

#react #typescript #llm #go #machine-learning #rust #linux #docker #macos #awesome #kubernetes #pytorch #openai #open-source

tailed

(★ 97)

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

File Explorer

Download Latest Version (.zip)

- - release.yml
  - test.yml
- FUNDING.yml
- commit-msg
- pre-commit
- pre-push
- index.d.ts
- index.js
- index.test.tsx
- index.tsx
.commitlintrc.js
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.lintstagedrc
.prettierrc.js
.releaserc.json
CHANGELOG.md
jest.config.js
package-lock.json
package.json
README.md
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/brunobertolini/tailed

Downloads the entire project code from GitHub to your computer.

cd tailed

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 = () => (
  <Box className="m-4">
    Magic!
  </Box>
)

```

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

```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"
}
```