Tailwind omits class focus:outline-solid

[j-hotlink]

Hi, I'm using tailwind v3.4.13.

When I set focus:outline-* styling on elements (mostly div's and td's) everything works as expected, provided I do not use the singular class focus:outline-solid.

Tailwind seems to ignore the class focus:outline-solid, which gets omitted from my local css output. It has no problem with the alternatives focus:outline-dotted, focus:outline-double or focus:outline-dashed), as can be seen here: https://jsfiddle.net/zo5g81yu/

Adding focus:outline-solid manually to my app css with this snippet seems to resolve the issue:

.focus\:outline-solid:focus {
 outline-style: solid;
}

However the final packaged code is supposed to be re-deployable without such hacks.

I'm using the standard out-the-box Phoenix tailwind.config.js setup, copied below for completeness. Is there a reason for this behaviour, and is there a workaround (without manually editing a css file) to get tailwind to generate this class itself?

Thanks.

tailwind.config.js

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

const plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")

module.exports = {
  content: [
    "./js/**/*.js",
    "../lib/*_web.ex",
    "../lib/*_web/**/*.*ex",
  ],
  theme: {
    extend: {
      fontSize: {
        xxs: [ '0.65rem', '0.8' ],
      },
      colors: {
        brand: "#FD4F00",
      }
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    // Allows prefixing tailwind classes with LiveView classes to add rules
    // only when LiveView classes are applied, for example:
    //
    //     <div class="phx-click-loading:animate-ping">
    //
    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),

    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
    // See your `CoreComponents.icon/1` for more information.
    //
    plugin(function({matchComponents, theme}) {
      //let iconsDir = path.join(__dirname, "../../../deps/heroicons/optimized")
      let iconsDir = "/volume/inspect/deps/heroicons/optimized"
      let values = {}
      let icons = [
        ["", "/24/outline"],
        ["-solid", "/24/solid"],
        ["-mini", "/20/solid"],
        ["-micro", "/16/solid"]
      ]
      icons.forEach(([suffix, dir]) => {
        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
          let name = path.basename(file, ".svg") + suffix
          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
        })
      })
      matchComponents({
        "hero": ({name, fullPath}) => {
          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
          let size = theme("spacing.6")
          if (name.endsWith("-mini")) {
            size = theme("spacing.5")
          } else if (name.endsWith("-micro")) {
            size = theme("spacing.4")
          }
          return {
            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
            "-webkit-mask": `var(--hero-${name})`,
            "mask": `var(--hero-${name})`,
            "mask-repeat": "no-repeat",
            "background-color": "currentColor",
            "vertical-align": "middle",
            "display": "inline-block",
            "width": size,
            "height": size
          }
        }
      }, {values})
    })
  ]
}

[wongjn]

As per the documentation, the class to set outline-style: solid is outline, not outline-solid. So, you'd use focus:outline: https://play.tailwindcss.com/LX6wdMyc7i

[j-hotlink]

Thank you!
My browser keeps defaulting me to the current documentation (v4 - with different class name https://tailwindcss.com/docs/outline-style).