Not working with Tailwindcss 2.0.2 about figma-tailwindcss HOT 4 CLOSED

Haven't tried tailwind 2.x but I'm guessing the theme variable is already declared in the tailwind config object. You can name the theme import whatever you want since it's a default export, for example:

import myTheme from './theme`

and then use it like this:

theme: {
   colors: {
      ...myTheme.colors
}

from figma-tailwindcss.

Going to close this since this isn't really an issue with the plugin. If you have any other questions, feel free to reach out to me.

from figma-tailwindcss.

I know this is isn't really an issue with the plugin but I am unable to extend tailwind.config.js with the generated theme.js so every time I make changes on Figma I only have to paste the new file.

What is working

You hard copy and paste the content of const theme = { <your theme config> } in tailwind.config.js as it follows:

module.exports = {
  purge: {
   . . .
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    // i.e.
    extend: {
      colors: {
        Green: '#60dcb0',
        Orange: '#feb881',
        Blue: '#5ecad8',
        Pink: '#f66295',
        Grey: '#6f6f6f',
        Hover: '#f8b16f',
        Normal: '#f38219',
        Active: '#9f5108',
        'Light-Green': '#f2fffb',
        'Light-Orange': '#fffbf2',
        'Light-Blue': '#f2feff',
        'Light-Pink': '#fff2f8',
        'Light-grey': '#f2f6f7',
        'BG-grey': '#f5f5f5',
      },
      boxShadow: {
        'Glow-Green': '0px 34px 40px -15px rgba(17,205,138,0.3)',
        'Glow-Orange': '0px 34px 40px -15px rgba(250,165,38,0.3)',
        'Glow-Blue': '0px 34px 40px -15px rgba(18,178,200,0.3)',
        'Glow-Pink': '0px 34px 40px -15px rgba(238,72,129,0.2)',
      },
      borderRadius: {
        none: '0',
        xs: '0.125rem',
        sm: '0.3125rem',
        default: '0.625rem',
        lg: '1.875rem',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

What is not working

• Trying to import or require a module and assign it to tailwind config theme: property

const MyTheme = require('./theme')
module.exports = {
  purge: {
   . . .
  },
  darkMode: false, // or 'media' or 'class'
  theme: MyTheme,
  variants: {
    extend: {},
  },
  plugins: [],
}

• Imports like import myTheme from './theme' are NOT allowed in taiwind.config.js

Thanks you for your work and your support

from figma-tailwindcss.

@moracabanas

if you remove the export statement from the generated file you can import it in your tailwind config like so:

const myTheme = require('./theme');

the importsyntax gives some errors but it does work.

Once you have the imported myTheme variable (don't use theme since that's a key already existing in your tailwind config), you have to do it per key. For example with the spread operator (adding your values to some defaults):

 fontFamily: {
      sans: [
        'system-ui',
         ....
      ],
      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
      ...myTheme.fontFamily
    },

That's a nice way to use TailwindCSS's default values (you can output a tailwind config with all the values in it using npx tailwindcss init --full) and extend them with your own from the theme file.

from figma-tailwindcss.