clarify usage

[nakanakaii]

I just found out about your plugin, but it doesn't provide clear usage and the usage section in readme.md is just how to set the plugin up

[plastikmind]

first install, set tailwind.config.js;

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: { // defaults to these values
    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
  ],
}

then use like this

<h1 className="font-bold text-6xl text-stroke-black text-stroke-2 text-fill-transparent">HELLO</h1>

[hacknug]

@plastikmind thanks for the help here. This is exactly how I use it and depending on how do I want the elements to look like, I might use the .paint-[*] utilities to change the rendering order of those layers.

I've just pushed a new version of the plugin fixing a couple bugs mentioned in another issue issue. You can find the package on NPM under tailwindcss-text-fill-stroke@beta (beta for now until I can test a little more but I think it's pretty safe to use since the plugins doesn't do much).

I ended up adding support for arbitrary values and variants, so hopefully that'll make the plugin a little more useful until we get this into core (guessing once this in properly spec'd without vendor prefix).

If you still have a use for this plugin, I'd love to hear your thoughts on the changes and any idea you have to improve it. At the moment I'm thinking about adding a demo showcase how I use it (thanks for the request @nakanakaii!), and looking into adding support for using it with custom properties to align its usage with other color-related plugins in core.

Feel free to open new issues for any bugs you encounter on the new version (hopefully none but we all know how this goes so…) 👍

[silveltman]

Ah I understand. Works fine now, thanks! 2 questions though.

1. Is it correct that the plugin uses the defailt tailwind colors and NOT the one configured/extended in tailwind.config?
2. Is it possible to use gradient text-stroke and text-fill with this plugin?

BTW, i made a text-border plugin myself too which does it by using the text-shadow property (https://www.npmjs.com/package/tailwindcss-text-border). However, I switched to yours because I needed transparent text. Anyway, maybe there are some thing in it that can help improve your plugin. Doesn't hurt sharing I though :)

[hacknug]

@silveltman

1. It should not as long as it is properly configured. Are you using the plugin-specific config properties (textFillColor, textStrokeColor, textStrokeWidth)? By default, if those aren't used, it falls back to using borderColor and borderWidth. This was a decision I took back when the JIT engine wasn't a thing so perhaps it's better to simply use theme.colors now? Wdyt?
2. The plugin doesn't do anything special so it should be possible as long as what you have in mind makes sense from a CSS standpoint. Here's a quick demo I just put togetherwith some possible usecases: https://play.tailwindcss.com/wNV1WTta5L

[silveltman]

1. I actually removed the things in tailwind.config, since I thought it were just defaults anyway. I'm not sure what you mean by "it falls back to using borderColor and borderWidth". Do you mean the same values that are available for borders are available for stroke OR do you mean that I literally have to set the border-color and it will use the same color?
2. all clear 👍

I think using theme.colors would be great, since it removes the need for extra line in tailwind.config (right?)