[Feature request] Integrating with Vue

[dhruvkb]

Is your feature request related to a problem? Please describe. Vue.js SFC puts styles in different .vue files using <style> tags. These styles can define Tailwind utilities outside of CSS, making it hard to determine custom class names using just cssFiles alone.

Describe the solution you'd like I'd love to see some way to support parsing of Vue SFCs to extract the CSS from them.

Describe alternatives you've considered An alternative (that goes against the concept of SFCs) would be to keep the CSS outside in a separate CSS file that's src-ed into the SFC. That way the plugin can still read and parse the file as regular CSS.

[hacknug]

Is your feature request related to a problem? Please describe. […] These styles can define Tailwind utilities outside of CSS, making it hard to determine custom class names using just cssFiles alone.

I might be forgeting something but, technically, they don't define Tailwind utilties since they will end up as part of different trees and you won't be able to use features like @apply with them. At least this was the case with Nuxt 2.

One workaround would be to define them inside the .pcss|.css file that contains your @tailwind rules using the @layer directive.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .text-body { @apply text-16 xl:text-18 font-100 leading-150 tracking-wide; }
}

In case you're using the default stylesheet for that, you could define an inline plugin on your config file in order to make those classes available to the global postcss tree that runs on your SFC styles. This is how it would look like:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addUtilities, addComponents, postcss }) {
      // NOTE: Using an external file with your custom utilities
      const utilities = fs.readFileSync('./assets/css/tailwind.utilities.pcss', 'utf-8')
      addUtilities(postcss.parse(utilities).nodes)

      // NOTE: Using an inline string with your custom components
      const components = `.text-body { @apply text-16 xl:text-18 font-100 leading-150 tracking-wide; }`
      addComponents(postcss.parse(components).nodes)
    }),
  ],
}

This should make all your classes available for Tailwind Intellisense and perhaps for this eslint plugin too. I still feel like this is outside of the scope of this plugin, though.