vscode-cssvar icon indicating copy to clipboard operation
vscode-cssvar copied to clipboard

[Feat] Add examples for Tailwindcss setup with PostCSS plugins

Open phoenisx opened this issue 3 years ago • 0 comments

This extension already supports a minimal setup, i.e.

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting",
    "tailwindcss"
  ]

This works and it also detects CSS variables dynamically created by TailwindCSS plugins:

image


Improvement

A complex setup where users have custom options passed to plugins is not yet supported. E.g.:

  "cssvar.postcssPlugins": [
    "tailwindcss/nesting", // No way to pass options to this plugin
    "tailwindcss"  // No way to pass options to this plugin
  ]

Support to pass options to each plugin will be added as part of this feature: https://github.com/willofindie/vscode-cssvar/issues/61.

Once the above enhancement is added and released, the following syntax should work, keeping a check on backwards compatibility, resembling ESLint array syntax to pass options to a plugin, as follows:

  "cssvar.postcssPlugins": [
//  ["plugin-name", { plugin: options }]
    ["tailwindcss/nesting", { options }],
    ["tailwindcss", { tailwindOpts }]
  ]

phoenisx avatar Aug 30 '22 03:08 phoenisx