Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stroke not applies #28

Open
silveltman opened this issue Aug 16, 2022 · 4 comments
Open

Stroke not applies #28

silveltman opened this issue Aug 16, 2022 · 4 comments

Comments

@silveltman
Copy link

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
Copy link
Owner

hacknug commented Aug 16, 2022

@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
Copy link

@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
Copy link

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?

@TheAlexLichter
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants