# babel-plugin-tailwind-string

> ## Introduction: This is a babel plugin transforms a string into a new string contain tailwind themeibutes, screen size, tailwind config value path key.

Latest version **1.0.12** (published 2019-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-tailwind-string
pnpm add babel-plugin-tailwind-string
yarn add babel-plugin-tailwind-string
bun add babel-plugin-tailwind-string
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2019-11-19 |
| First published | 2019-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 3 |
| Unpacked size | 163.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nghia Pham |
| Maintainers | phmngocnghia |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-tailwind-string
- Homepage: https://github.com/phmngocnghia/babel-plugin-tailwind-string
- npm.io page: https://npm.io/package/babel-plugin-tailwind-string

## Dependencies (3)

- [dlv](https://npm.io/package/dlv.md) ^1.1.3
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^1.1.3
- [deasync-promise](https://npm.io/package/deasync-promise.md) ^1.0.1

## Recent versions

- 1.0.12 (latest) — 2019-11-19
- 1.0.11 — 2019-11-07
- 1.0.10 — 2019-11-07
- 0.0.10 — 2019-11-05
- 0.0.9 — 2019-11-05
- 0.0.8 — 2019-11-05
- 0.0.7 — 2019-11-05
- 0.0.6 — 2019-11-05
- 0.0.5 — 2019-11-05
- 0.0.4 — 2019-11-05
- 0.0.3 — 2019-11-05
- 0.0.2 — 2019-11-05
- 0.0.1 — 2019-11-05

## README

# babel-plugin-tailwind-string

## Introduction:
This is a babel plugin transforms a string into a new string contain tailwind themeibutes, screen size, tailwind config value path key.

## Usecase:
To be used in combination of css-in-js libraries. eg: styled-components, emotion, linaria.

**Cons:**
- Reuse tailwind variable.
- Rapid prototype, code faster.
- Active matained.

**Input:**

```
// styled-componenets
const StyledComponentsButton = styled.button`
  ${tscreen`md`} {
    ${apply`mt-20 p-20`}
  }

  ${apply`mt-10 p-10 bg-testColor`}
  color: ${theme`colors.green.900`}
`
// emotion
const emotionButtonClass = cssEmotion`
  ${tscreen`md`} {
    ${apply`mt-20 p-20`}
  }

  ${apply`mt-10 p-10 bg-testColor `}
  color: ${theme`colors.green.900`}
`

const EmotionButton = emotion.button`
  ${tscreen`md`} {
    ${apply`mt-20 p-20`}
  }

  ${apply`mt-10 p-10 bg-testColor` };
  color: ${theme`colors.green.900`}
`

// linaria
const linariaButtonClass = cssEmotion`
  ${tscreen`md`} {
    ${apply`mt-20 p-20`}
  }

  ${apply`mt-10 p-10 bg-testColor `}
  color: ${theme`colors.green.900`}
`
```

**Output:**
```
const StyledComponentsButton = styled.button`
  ${`@media (min-width: 768px)`} {
    ${`margin-top: 5rem;
    padding: 5rem;`}
  }

  ${`margin-top: 2.5rem;
     padding: 2.5rem;
    background-color: yellow;`}
    color: ${`#22543d`}
`; // emotion

const emotionButtonClass = cssEmotion`
    ${`@media (min-width: 768px)`} {
        ${`margin-top: 5rem;
         padding: 5rem;`}
     }

     ${`margin-top: 2.5rem;
     padding: 2.5rem;
     background-color: yellow;`}
    color: ${`#22543d`}
`;
const EmotionButton = emotion.button`
    ${`@media (min-width: 768px)`} {
        ${`margin-top: 5rem;
        padding: 5rem;`}
    }

    ${`margin-top: 2.5rem;
        padding: 2.5rem;
        background-color: yellow;`};
        color: ${`#22543d`}
`; // linaria

const linariaButtonClass = cssEmotion`
    ${`@media (min-width: 768px)`} {
        ${`margin-top: 5rem;
        padding: 5rem;`}
    }

    ${`margin-top: 2.5rem;
    padding: 2.5rem;
    background-color: yellow;`}
    color: ${`#22543d`}
`;

```

## Usages:

```
npm install --dev babel-plugin-tailwind-string
yarn add --dev babel-plugin-tailwind-string
```

Since this is a babel plugin, we just need to add it to the "plugins" section in the babel configuration file to activate it.

```
{
  "plugins": [
    "babel-plugin-tailwind-string"
  ]
}
```

## Features:
### apply: transform css string using tailwind @apply directive:

**Input:**
```
const StyledComponentsButton = styled.button`
  ${apply`mt-10`}
`
```

**Output:**
```
const StyledComponentsButton = styled.button`
    margin-top: 1.25rem
`
```

### screen: transform css string using tailwind @tscreen directive

**Input:**
```
const StyledComponentsButton = styled.button`
  ${tscreen`md`} {
    ${apply`mt-10`}
  }
`
```

**Output:**
```
const StyledComponentsButton = styled.button`
    @media (min-width: 640px) {
        margin-top: 1.25rem   
    }
`
```

### screen: transform css string using tailwind tscreen function

**Input:**
```
const StyledComponentsButton = styled.button`
  ${tscreen`md`} {
    ${apply`mt-10`}
    color: ${theme`colors.green.900`}
  }
`
```

**Output:**
```
const StyledComponentsButton = styled.button`
    @media (min-width: 640px) {
        margin-top: 1.25rem;
        color: green;
    }
`
```

## Typescript users:
I haven't created a PR to update types for this package in the DefinitedType repository yet. VSCode users will recieve error like: `apply is not defined`, `apply is not a function`...
Currently, there is a workaround for this. Add 'babel-plugin-tailwind-string' to field "compilerOptions.types":
```
{
  "compilerOptions": {
    "target": "es5",                          
    "module": "commonjs",                     
    "jsx": "react",                     
    "strict": true,      
    

    "types": [
      "babel-plugin-tailwind-string"
    ],                           


    "esModuleInterop": true                   
  }
}
```

## LICENSE
MIT

---
_Source: https://npm.io/package/babel-plugin-tailwind-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._