Figma gradient to Tailwind CSS

Installation

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

npx fgtw "<YOUR_BACKGROUND_STRING_FROM_FIGMA>

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

npm install fgtw
yarn add fgtw
pnpm add fgtw

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:

  npx fgtw "<YOUR_BACKGROUND_STRING_FROM_FIGMA>

  • Or use the package in your code:

  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:

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:

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

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:

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