ecklf / tailwindcss-figma-plugin

Figma Plugin for Tailwind CSS
https://www.figma.com/community/plugin/738806869514947558/Tailwind-CSS
MIT License
269 stars 16 forks source link

Error Importing Tailwind Config #9

Closed esparkman closed 5 years ago

esparkman commented 5 years ago

Symptom: When uploading a tailwind config and clicking "Add Styles" the plugin is unresponsive.

Console Error:

TypeError: Cannot destructure property `theme` of 'undefined' or 'null'.
    at i (PLUGIN_1_SOURCE:1)
    at figma.ui.onmessage.e (PLUGIN_1_SOURCE:1)
    at e.RealmsVm.callFunction (figma_app.74b6b7c35d7299663668407dd62f7a27.min.js:455)
    at t.PluginUIHandle.z [as messageHandler] (figma_app.74b6b7c35d7299663668407dd62f7a27.min.js:821)
    at windowMessageEventListener.e (figma_app.74b6b7c35d7299663668407dd62f7a27.min.js:816)

tailwind.config.js:

const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        'wild-sand': '#F4F4F4',
        'regal-blue': '#004566',
        'brand-orange': '#FF8300',
        'modal-gray': 'rgba(54, 56, 61, 0.55)',
        'dusty-gray': '#979797',
        abbey: '#4D4F55',
        alabaster: '#F7F7F7',
        bombay: '#ADAEB3',
        bonjour: '#E3E2E3',
        concrete: '#F2F2F2',
        iron: '#DEE0E3',
        midgray: '#65676f',
        mischka: '#D9DAE0',
        'french-gray': '#C5C6CC',
        stormgray: '#6D6F77',
        trinidad: '#E63700',
        scorpion: '#5A5A5A',
        silver: '#BFBFBF',
        'shuttle-gray': '#606266'
      },
      fontFamily: {
        sans: ['Avenir Next', 'sans-serif']
      },
      inset: {
        '1/2': '50%',
        '1/3': '33.33%'
      },
      maxWidth: {
        '1/3': '33.3%',
        '3/4': '75%'
      },
      screens: {
        xs: { max: '639px' }
      },
      spacing: {
        '400px': '25rem'
      },
      zIndex: {
        '-10': '-10'
      }
    }
  },
  variants: {
    borderColor: ['focus', 'hover'],
    backgroundColor: ['responsive', 'hover', 'focus', 'active'],
    display: ['responsive', 'group-hover'],
    outline: ['focus', 'active']
  },
  plugins: [
    require('tailwindcss-gradients')({
      variants: ['responsive'],
      directions: {
        t: 'to top',
        r: 'to right',
        b: 'to bottom',
        l: 'to left'
      },
      gradients: {
        red: '#f00',
        'red-blue': ['#f00', '#00f'],
        'red-green-blue': ['#f00', '#0f0', '#00f'],
        'flush-trinidad': ['#FF8300', '#E63700']
      }
    })
  ]
}
ecklf commented 5 years ago

Should be working now, fix will be part of next release. Thanks for the issue <3