search

ben-rogerson / twin.macro

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
MIT License
7.89k stars 184 forks source link

Preflight false makes plugin like @tailwindcss/forms to not work #777

Closed kpratik2015 closed 1 year ago

kpratik2015 commented 1 year ago

Hi, I was upgrading my twin 2.x nextjs project to 3.x with tailwindcss 3.x. As preflight.css between v2 and v3 tailwindcss has changed, it has affected my project styling. So as per suggestion here, I disabled preflight in tailwind.config.js and separately loaded v2 preflight.css in <head>

module.exports = {
  presets: [],
  darkMode: "class",
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  corePlugins: {
    preflight: false,
  },
  content: ["./public/**/*.html"],
  plugins: [
        require("@tailwindcss/typography"),
        require("@tailwindcss/forms"),
        require("@tailwindcss/aspect-ratio"),
  ]
};

But because of this @tailwindcss/forms plugin is not working and I suspect others too. I notice this because checkbox input on check does not have the green tick when preflight: false.

My project setup is similar to this.

ben-rogerson commented 1 year ago

The forms plugin is made to work with tailwind v3 which - by the sound of this - also means v3 preflight.

You can try adding parts of the v3 preflight over the top of your old preflight to make this work, perhaps some of these styles from the v3 preflight may help:

({
  "*, ::before, ::after": {
    "boxSizing": "border-box",
    "borderWidth": "0",
    "borderStyle": "solid",
    "borderColor": "currentColor",
  },
  "::before, ::after": {
    "--tw-content": "''"
  },
  "button, input, optgroup, select, textarea": {
    "fontFamily": "inherit",
    "fontSize": "100%",
    "fontWeight": "inherit",
    "lineHeight": "inherit",
    "color": "inherit",
    "margin": "0",
    "padding": "0"
  },
  "button, select": {
    "textTransform": "none"
  },
})
kpratik2015 commented 1 year ago

Thanks @ben-rogerson for the insight. Turns out there is some issue only in development mode where we thought specificity is being lost. But actually some of the CSS wasn't getting injected in development mode even though class names are attached. This does not happen in production build so no conflict with v3 preflight specificity for buttons.

I am not sure why some CSS is not being injected in development mode at times (with some page updates it injects the missing CSS sometimes), but it is not relevant to this and low priority now. Thanks again.