Autocomplete tailwind class doesn't work in VSCode (and other IDE?)

[garlandcrow]

So I noticed when updating to 1.x version from my 0.x version, that now since everything is setup using rollup that autocomplete doesn't work anymore w/ the Intellisense plugin I was using in for Tailwind in VSCode.

The fix is simple, so just needs a documentation addition to tell people about it. Feel free to assign this to me and ill update the documentation. The fix is:

add tailwind.config.js back to the root directory (most plugins parse this to add the intellisense) and then you can const tailwindConfig = require("./tailwind.config") from inside rollup and add it to the smelte({..., tailwind: tailwindConfig}) setup.

I'll have to check, but maybe the most correct thing is to import the smelte tailwind config into the tailwind.config.js file. Thoughts?

[garlandcrow]

So my suggestion above will indeed be missing the additions that smelte makes to the tailwindcss classes so won't show up in autocomplete. And the way its implemented now smelte is merging what you put in the rollup smelte({}). I could try importing the smelte/tailwind.config.js in my config by passing an empty config initially like:

const merge = require("merge-deep");
const smelteDefault = require("smelte/tailwind.config")({});
module.exports = merge(smelteDefault, {...})

But that might not be ideal either. It would be nice if there was some way to still keep a tailwind.config.js in my root like previous version of smelte, but I realize the way it works now is kind of "easier" for people to on-board. So maybe just some clear guidance on how to "eject" the tailwind config to your own file and still include the smelte styles rather than the other way around?

[garlandcrow]

My final solution:

create: tailwind.custom.js

module.exports = {
  // my tailwind config
}

create: tailwind.config.js

// merge my config w/ smelte tailwind config, just like they do in their rollup plugin
const myConfig = require("./tailwind.custom");
module.exports = require("smelte/tailwind.config")(myConfig);

modify: rollup.config.js

import tailwindConfig from "./tailwind.custom";
smelte({
  ...,
  tailwind: tailwindConfig
})