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

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

Open
FranciscoKloganB opened this issue Nov 13, 2022 · 3 comments

Comments

@FranciscoKloganB
Copy link

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

ai commented Nov 13, 2022

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

FranciscoKloganB commented Dec 16, 2022

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

ai commented Dec 16, 2022

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

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

2 participants