tailwindcss-text-fill-stroke icon indicating copy to clipboard operation
tailwindcss-text-fill-stroke copied to clipboard

Stroke not applies

Open silveltman opened this issue 3 years ago • 4 comments

I've setup correctly (I believe), but the plugin is not doing anything.

tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
  theme: {
    textFillColor: (theme) => theme('borderColor'),
    textStrokeColor: (theme) => theme('borderColor'),
    textStrokeWidth: (theme) => theme('borderWidth'),
    paintOrder: {
      fsm: { paintOrder: 'fill stroke markers' },
      fms: { paintOrder: 'fill markers stroke' },
      sfm: { paintOrder: 'stroke fill markers' },
      smf: { paintOrder: 'stroke markers fill' },
      mfs: { paintOrder: 'markers fill stroke' },
      msf: { paintOrder: 'markers stroke fill' },
    },
  },
  variants: {
    // all the following default to ['responsive']
    textFillColor: ['responsive'],
    textStrokeColor: ['responsive'],
    textStrokeWidth: ['responsive'],
    paintOrder: ['responsive'],
  },
  plugins: [
    require('tailwindcss-text-fill-stroke'), // no options to configure
  ],
}

markup:

      <span
        class="text-stroke-white text-stroke-2"
      >
        LOREM IPSUM
      </span>

silveltman avatar Aug 16 '22 19:08 silveltman

@silveltman I think you're using the v1 of the plugin since v2 is marked as beta on npm.

If you want to use v1 you'll have to require the plugin like this:

require('tailwindcss-text-fill-stroke')()

If you want to use v2 (which is the one with support for arbitrary values and all of the cool things from TailwindCSS v3), you can try installing tailwindcss-text-fill-stroke@beta.

Sorry for the inconvenience. I published this as a beta expecting to hear back from some of the users that encountered the same issues you pointed out but they never got back to me. If this is something you're planning on using on a current project, I'd love to hear if everything works as you'd expect once running the beta tag.

I'll look into adding a playground demo before moving out of beta and, hopefully at a later date, support for using it with custom properties to better align its usage to other color-related plugins from core.

hacknug avatar Aug 16 '22 22:08 hacknug

@hacknug Regarding the beta, I'm only using it for -webkit-text-fill-color, but it works as expected. The only change I needed for the upgrade was to remove the () from the require.

I appreciate the additional flexibility of arbitrary values and the lower number of sub-dependencies.

mcongrove avatar Dec 01 '22 22:12 mcongrove

The beta version appears to be working fine in my project as well.

Is there an ETA for when beta will be released as the official version?

GustavTaxen avatar Dec 22 '22 12:12 GustavTaxen

@hacknug would be nice to see an official release of the beta 👀

TheAlexLichter avatar Feb 05 '23 20:02 TheAlexLichter