Regression: parsing error when opening any tailwind.config.js

[leinardi]

The plugin throws a Parsing with every tailwind.config.js I tried, no matter how simple they are.

You can reproduce the error using this tailwind.config.js:

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        cyan: '#9cdbff',
      }
    },
  },
  variants: {},
  plugins: [],
}

or this:

module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: '#9cdbff',
      }
    }
  }
}

The error in console says only

{twPrefix: "", addSpaces: false, overrideStyles: false, configName: "tailwind.config.js", errorMessage: "Parsing failed!"}

[ecklf]

@leinardi import system works different now as described on the plugin page.

I actually expected this FileUpload.tsx#L33 to work to prevent people from importing .js files.

Probably need to add a notice if someone imports .js.

[leinardi]

I see, I don't actually use TailwindCSS (I use Figma just for Android and iOS development) so I can't generate one of this tailwind.json, but I would still like to use this plugin to import in Figma color styles from a configuration file. Could you please point me to a very simple example of tailwind.json that I can use to manually build mine?

[leinardi]

Never mind, I found a working one in this very same repo: https://raw.githubusercontent.com/impulse/tailwindcss-figma-plugin/e6048553c89dd362acd8546aa854d431849980f4/src/generated/tw.min.json

[leinardi]

This is the minimum needed to import the colors:

{
   "theme":{
      "colors":{
         "transparent":"transparent",
         "current":"currentColor",
         "black":"#000",
         "white":"#fff",
         "gray":{
            "100":"#f7fafc",
            "200":"#edf2f7",
            "300":"#e2e8f0",
            "400":"#cbd5e0",
            "500":"#a0aec0",
            "600":"#718096",
            "700":"#4a5568",
            "800":"#2d3748",
            "900":"#1a202c"
         },
         "red":{
            "100":"#fff5f5",
            "200":"#fed7d7",
            "300":"#feb2b2",
            "400":"#fc8181",
            "500":"#f56565",
            "600":"#e53e3e",
            "700":"#c53030",
            "800":"#9b2c2c",
            "900":"#742a2a"
         },
         "orange":{
            "100":"#fffaf0",
            "200":"#feebc8",
            "300":"#fbd38d",
            "400":"#f6ad55",
            "500":"#ed8936",
            "600":"#dd6b20",
            "700":"#c05621",
            "800":"#9c4221",
            "900":"#7b341e"
         },
         "yellow":{
            "100":"#fffff0",
            "200":"#fefcbf",
            "300":"#faf089",
            "400":"#f6e05e",
            "500":"#ecc94b",
            "600":"#d69e2e",
            "700":"#b7791f",
            "800":"#975a16",
            "900":"#744210"
         },
         "green":{
            "100":"#f0fff4",
            "200":"#c6f6d5",
            "300":"#9ae6b4",
            "400":"#68d391",
            "500":"#48bb78",
            "600":"#38a169",
            "700":"#2f855a",
            "800":"#276749",
            "900":"#22543d"
         },
         "teal":{
            "100":"#e6fffa",
            "200":"#b2f5ea",
            "300":"#81e6d9",
            "400":"#4fd1c5",
            "500":"#38b2ac",
            "600":"#319795",
            "700":"#2c7a7b",
            "800":"#285e61",
            "900":"#234e52"
         },
         "blue":{
            "100":"#ebf8ff",
            "200":"#bee3f8",
            "300":"#90cdf4",
            "400":"#63b3ed",
            "500":"#4299e1",
            "600":"#3182ce",
            "700":"#2b6cb0",
            "800":"#2c5282",
            "900":"#2a4365"
         },
         "indigo":{
            "100":"#ebf4ff",
            "200":"#c3dafe",
            "300":"#a3bffa",
            "400":"#7f9cf5",
            "500":"#667eea",
            "600":"#5a67d8",
            "700":"#4c51bf",
            "800":"#434190",
            "900":"#3c366b"
         },
         "purple":{
            "100":"#faf5ff",
            "200":"#e9d8fd",
            "300":"#d6bcfa",
            "400":"#b794f4",
            "500":"#9f7aea",
            "600":"#805ad5",
            "700":"#6b46c1",
            "800":"#553c9a",
            "900":"#44337a"
         },
         "pink":{
            "100":"#fff5f7",
            "200":"#fed7e2",
            "300":"#fbb6ce",
            "400":"#f687b3",
            "500":"#ed64a6",
            "600":"#d53f8c",
            "700":"#b83280",
            "800":"#97266d",
            "900":"#702459"
         }
      }
   }
}

[ecklf]

Never mind, I found a working one in this very same repo: https://raw.githubusercontent.com/impulse/tailwindcss-figma-plugin/e6048553c89dd362acd8546aa854d431849980f4/src/generated/tw.min.json

If you need to use a custom config I am afraid installing node/npm and running npx tailwind.json in your config directory is your only option now. Sanitizing the config for every possible scenario just got too messy.