hacknug / tailwindcss-text-fill-stroke

Text-fill and text-stroke utilities for Tailwind CSS.
https://www.npmjs.com/package/tailwindcss-text-fill-stroke
76 stars 2 forks source link

Stroke not applies #28

Open silveltman opened 2 years ago

silveltman commented 2 years ago

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>
hacknug commented 2 years ago

@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.

mcongrove commented 1 year ago

@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.

GustavTaxen commented 1 year ago

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?

manniL commented 1 year ago

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