select all inputs with type as well as text area and select elements with :focus

[FranciscoKloganB]

Howdy! 👋

I am currently working on a TailwindCSS/PostCSS project and I am using the @tailwindcss/forms plugin. Unfortunately, it applies an undesired color styling to my forms. The author's recommended approach is to use normal CSS to override that color on the base layer which I am doing. I also have postcss-nested installed and configured on my project according to the instructions of TailwindCSS v3 documentation.

Given the two examples below, only the first one works. The second, which I wish it worked does not. I would like to know what I am doing wrong. :(

TLDR: The first example works but I have to add :focus suffix to all elements I want to target.

// Works
@layer base {
  [type="text"]:focus,
  [type="email"]:focus,
  [type="url"]:focus,
  [type="password"]:focus,
  [type="number"]:focus,
  [type="date"]:focus,
  [type="datetime-local"]:focus,
  [type="month"]:focus,
  [type="search"]:focus,
  [type="tel"]:focus,
  [type="time"]:focus,
  [type="week"]:focus,
  [multiple]:focus,
  textarea:focus,
  select:focus {
    border-color: theme("colors.primary-light");
  }
}

// Does not work
@layer base {
  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    &:focus {
      border-color: theme("colors.primary-light");
    }
  }
}

[ai]

Hi! The second example should work (at least with only postcss-nested).

1. What is your PostCSS config?
2. What is your output and what output do you expect?

[FranciscoKloganB]

Hey! How are you? Sorry for the late response but I spent so much time on this, I eventually just accepted pure CSS.

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-focus-visible": {
      replaceWith: "[data-focus-visible-added]"
    },
    "tailwindcss/nesting": "postcss-nested",
    tailwindcss: {},
    autoprefixer: {}
  }
}

/* I would expect the output above (commented with // Works); */

/* But when the code minifies, from what I remember back then, it simply "spitted out" whatever I had written. */

select:focus {
  border-color: theme("colors.primary-light");
}

[ai]

Can you show me some example on top of pure postcss-nested (without any plugins) in a way: input, real output, expected output?