# fgtw

> Converts a Figma gradient string to Tailwind CSS JIT className

Latest version **1.2.1** (published 2023-02-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install fgtw
pnpm add fgtw
yarn add fgtw
bun add fgtw
```

Provides the command `fgtw`.

## 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.2.1 |
| Published | 2023-02-15 |
| First published | 2023-02-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zelkhor |
| Maintainers | zelkhor |
| Keywords | figma, gradient, tailwind, css, tailwindcss, tailwindcss-jit |

## Links

- npm: https://www.npmjs.com/package/fgtw
- Repository: https://github.com/zelkhor/figma-gradient-to-tailwind-class
- Homepage: https://github.com/zelkhor/figma-gradient-to-tailwind-class#readme
- Issues: https://github.com/zelkhor/figma-gradient-to-tailwind-class/issues
- npm.io page: https://npm.io/package/fgtw

## Dependencies (1)

- [cli-color](https://npm.io/package/cli-color.md) ^2.0.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2023-02-15
- 1.2.0 — 2023-02-15

## README

# Figma gradient to Tailwind CSS

 <p align="justify">
    This project is a simple function that takes a background string from figma and converts it to a JIT background class for Tailwind CSS. 
    <br />
    <br />
</p>

[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)

<img src="./images/figma-string.png" width='auto' height='800' style='object-fit: contain' >

<br>

### Installation

You can either use this package as a CLI with the following command:

```bash
npx fgtw "<YOUR_BACKGROUND_STRING_FROM_FIGMA>
```

Or you can install it as a package and use it in your code:

```bash
npm install fgtw
yarn add fgtw
pnpm add fgtw
```

<br>

### How to use

- Open your Figma file
- Select the element you want to get the gradient from
- Select the "Inspect" tab
- Copy the full background string ex: `background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);`
- Then you can either
    - Use the CLI with the following command:

    ```bash
    npx fgtw "<YOUR_BACKGROUND_STRING_FROM_FIGMA>
    ```
  
    - Or use the package in your code:

    ```js
    import { format } from 'fgtw';
  
    const figmaGradient =
      'background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);';
    const fomattedClassName = format(figmaGradient);
  
    // RESULT: bg-[linear-gradient(180deg,#FFFFFF_0%,#000000_100%)]
    ```

### Common issue

#### My gradient is not showing up

If you are storing the tailwind gradient class in a variable and using it in your markup like so:

```js
const myTailwindClass = format("background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);");

return (
  <div className={myTailwindClass}>
    Gradient is not shown 😭
  </div>
);
``` 

This will not work because tailwind will purge all css and won't include a class in the final css file with your custom background
As stated in the docs:
```text
Note that you still need to write purgeable HTML when using arbitrary values, and your classes need to exist as complete strings for Tailwind to detect them correctly.
```
You can either use the generated class directly in your markup
  
```js
return (
  <div className="bg-[linear-gradient(180deg,#FFFFFF_0%,#000000_100%)]">
    Gradient is shown 🥳
  </div>
);
```

or add the generated class to a safelist.txt file and add it to your tailwind config
(This will work, but you should probably use the first solution if possible)


### Support

This package supports the following gradient types:

- linear-gradient
- radial-gradient
- conic-gradient

You can also have a string which chain multiple gradients together:

```js
const figmaGradient =
  'background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%), radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #000000 100%);';
```

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