figma-gradient-to-tailwind-class v1.1.0

Figma gradient to Tailwind CSS

CLI

If you want to use this package as a CLI, you can use fttw-cli instead (which depends on this package):

  npx fttw-cli "background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);"

Installation

npm install figma-gradient-to-tailwind-class
yarn add figma-gradient-to-tailwind-class
pnpm add figma-gradient-to-tailwind-class

Result

import { format } from 'figma-gradient-to-tailwind';

const figmaGradient =
  'background: linear-gradient(180deg, #FFFFFF 0%, #000000 100%);';
const fomattedClassName = format(figmaGradient);

// RESULT: bg-[linear-gradient(180deg,#FFFFFF_0%,#000000_100%)]

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:

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