Breaking change after upgrade related to border-color #5039

rainerborene · 2021-07-22T02:21:32Z

What version of Tailwind CSS are you using?

v2.2.6

What build tool (or framework if it abstracts the build tool) are you using?

webpack 5.37.0

What version of Node.js are you using?

v14.1.0

What browser are you using?

Chrome

What operating system are you using?

Linux

Describe your issue

This line has a huge impact on the default styles and it was removed on the recent version. Most Tailwind examples out there uses something like:

<div class="text-black">
  <div class="border">
     <!-- Expected: border should not be black -->
  </div>
</div>

And it was used by the hr tag as well. Please, revert this change if possible. Thank you!

The text was updated successfully, but these errors were encountered:

adamwathan · 2021-07-22T10:39:21Z

Which line? Your link goes to this page:

Can you provide a reproduction? I tested the snippet you provided and the border is gray like expected, not black.

rainerborene · 2021-07-22T12:23:02Z

@adamwathan I figured out why this is happening. Turns out it is related to some invalid selectors. Say you have a custom style like:

.form-control {
  &[type="file"] {
    @apply bg-white border focus:outline-none focus:ring-1 cursor-pointer px-3 py-2;
  }

  &::file-selector-button {
    @apply rounded-none border-0 border-gray-300 border-solid px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
    margin-inline-end: theme('spacing.3');
    border-inline-end-width: 1px;
  }

  &:hover::file-selector-button {
    @apply bg-gray-200;
  }

  &::-webkit-file-upload-button {
    @apply rounded-none border-0 border-gray-300 border-solid px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
    margin-inline-end: theme('spacing.3');
    border-inline-end-width: 1px;
  }

  &:hover::-webkit-file-upload-button {
    @apply bg-gray-200;
  }
}

For some reason tailwindcss or postcss inlines only &::-webkit-file-upload-button which is an invalid selector. By the way, this is my postcss.config.js:

const path = require("path")

module.exports = ctx => ({
  plugins: [
    require("postcss-import")({
      path: path.resolve(__dirname + "/frontend/styles")
    }),
    require("tailwindcss")(`frontend/styles/tailwind.${path.basename(ctx.file, ".css")}.js`),
    require("postcss-nested"),
    require("postcss-flexbugs-fixes"),
    require("postcss-color-mod-function")({unresolved: "warn"}),
    require("postcss-preset-env")({
      stage: 3,
      autoprefixer: {
        flexbox: "no-2009"
      }
    })
  ]
})

Edit: To fix this problem I had to move the border rules and expand them manually:

@@ -4,9 +4,10 @@
   }
 
   &::file-selector-button {
-    @apply rounded-none border-0 border-gray-300 border-solid px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
+    @apply rounded-none px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
     margin-inline-end: theme('spacing.3');
     border-inline-end-width: 1px;
+    border: 0 theme('colors.gray.300') solid;
   }
 
   &:hover::file-selector-button {
@@ -14,12 +15,13 @@
   }
 
   &::-webkit-file-upload-button {
-    @apply rounded-none border-0 border-gray-300 border-solid px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
+    @apply rounded-none px-3 py-2 -mx-3 -my-2 bg-gray-100 leading-6 transition pointer-events-none;
     margin-inline-end: theme('spacing.3');
     border-inline-end-width: 1px;
+    border: 0 theme('colors.gray.300') solid;
   }
 
   &:hover::-webkit-file-upload-button {
     @apply bg-gray-200;
   }
-}
\ No newline at end of file
+}

adamwathan · 2021-07-22T13:30:40Z

Got it, thanks for the extra context! The solution in your case is to migrate to our official nesting plugin — the root of the issue here is that when Tailwind is parsing out the @apply stuff it doesn't really "understand" nesting properly per se (since it's not actually valid CSS), and that combined with some changes I made in 2.2.5 to increase the runtime performance of some of our selectors is causing this issue for you.

The solution is to make sure you un-nest your CSS before Tailwind sees it, and use our official tailwindcss/nesting plugin to do it (which is a light wrapper around postcss-nested and fixes some bugs/compatibility issues). This way Tailwind doesn't have to understand nested CSS because it's all been flattened before it's fed into Tailwind.

Update your config file to look like this:

  const path = require("path")

  module.exports = ctx => ({
    plugins: [
      require("postcss-import")({
        path: path.resolve(__dirname + "/frontend/styles")
      }),
+     require("tailwindcss/nesting"),
      require("tailwindcss")(`frontend/styles/tailwind.${path.basename(ctx.file, ".css")}.js`),
-     require("postcss-nested"),
      require("postcss-flexbugs-fixes"),
      require("postcss-color-mod-function")({unresolved: "warn"}),
      require("postcss-preset-env")({
        stage: 3,
+       // postcss-preset-env includes nesting as well, you don't need it twice
+       features: {
+         'nesting-rules': false
+       },
        autoprefixer: {
          flexbox: "no-2009"
        }
      })
    ]
})

You can read about our nesting stuff here:

https://tailwindcss.com/docs/using-with-preprocessors#nesting

rainerborene · 2021-07-22T14:18:29Z

@adamwathan Thanks for the feedback! But another issue came up after applying your suggestions.

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

Rebuilding...
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.5, but postcss-preset-env uses 7.0.36. Perhaps this is the source of the error below.
RangeError: Maximum call stack size exceeded
    at /tmp/tailbug/node_modules/animate.css/source/fading_entrances/fadeIn.css:1:1
    at Function.keys (<anonymous>)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:22:42)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17)
    at _clone (/tmp/tailbug/node_modules/postcss-preset-env/node_modules/autoprefixer/lib/prefixer.js:38:17) {
  postcssNode: AtRule {
    raws: {
      before: '\n\n',
      between: ' ',
      afterName: ' ',
      semicolon: false,
      after: '\n'
    },
    type: 'atrule',
    name: 'keyframes',
    parent: Root {
      raws: [Object],
      type: 'root',
      nodes: [Array],
      source: [Object],
      lastEach: 50,
      indexes: [Object],
      _autoprefixerDisabled: false,
      _autoprefixerPrefix: false,
      [Symbol(isClean)]: false,
      [Symbol(my)]: true,
      [Symbol(isClean)]: true
    },
    source: { start: [Object], input: [Input], end: [Object] },
    params: 'fadeIn',
    nodes: [ [Rule], [Rule] ],
    lastEach: 47,
    indexes: {},
    _autoprefixerDisabled: false,
    _autoprefixerPrefix: false,
    [Symbol(isClean)]: false,
    [Symbol(my)]: true,
    [Symbol(isClean)]: true
  }
}

You can reproduce the same bug using this repository: https://github.com/rainerborene/tailwindcss-bug

rainerborene · 2021-07-22T22:29:08Z

I tried to disable autoprefixer and it compiled. But this selector did not work as expected either.

.form-switch .form-check-input:checked ~ .form-check-label:after {
  @apply transform translate-x-full border-brand-base;
}

scardenas · 2021-07-23T08:33:15Z

Since 2.2.3 my borders are black too and I've lost some shadows.

I am using Angular and Tailwind is generating this extra CSS:

.card, hr, input, .input-group, .border-2, .border, .border-t, .border-l-2 {
    border-color: currentColor;
}

.card, .list, .dropdown-button-items, .dropdown, .page, .first, .last, input, textarea, .shadow, .shadow-xl, .shadow-sm, .shadow-inner {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
}

adriaanzon · 2021-07-23T11:23:31Z

I also get black borders with the following code which is defined in an import inside an @layer components block.

.Button--rounded {
    @apply inline-flex items-center justify-center border rounded-full shadow-sm;
}

When I move the import to the bottom of my entry css file (outside of @layer components), the border color turns gray again.

Also, the border color of the divide utility turned black. This was without using @apply but using the class on html elements directly.

adamwathan · 2021-07-23T11:32:51Z

@rainerborene Quick fix for your form-check-label selector is to use two : before after:

.form-switch .form-check-input:checked ~ .form-check-label::after {
  @apply transform translate-x-full border-brand-base;
}

I consider this a bug though since both syntaxes are valid in CSS, so will make a note to fix.

adamwathan · 2021-07-23T11:53:43Z

Reverted the main piece of the changes that cause this stuff for v2.2.7, check that out and see if it helps. Hopefully can resolve the underlying issues and bring these improvements back soon.

rainerborene · 2021-07-23T15:52:29Z

@adamwathan Thanks for reverting it back! I think you should reconsider these performance changes and make it optional. We have been using universal selectors for a long time and didn't notice any rendering slowness (at least in our case).

adamwathan · 2021-07-23T16:33:59Z

Yeah we'll see, the main problem is it was causing the Tailwind CSS homepage to take over 3 seconds to load in Safari, and now it loads in a few hundred milliseconds. Mainly effects pages with a huge number of DOM nodes (our homepage is almost 7000).

adamwathan · 2021-09-24T18:58:10Z

Hey! All of this should be resolved in the latest insiders build (npm install tailwindcss@insiders), even when enabling the universal selector optimizations:

// tailwind.config.js
module.exports = {
  experimental: { optimizeUniversalDefaults: true },
  // ...
}

I just merged proper support for the legacy :before and :after syntax (with a single colon instead of two), which fixes the source of this issue 👍🏻

rainerborene · 2021-09-24T19:01:16Z

@adamwathan You rock! I'm going to test it as soon as possible.

rainerborene mentioned this issue Jul 22, 2021

Shadow from modal inherited on inputs inside that modal #5042

Closed

adamwathan mentioned this issue Jul 23, 2021

Hotfix: Use universal selector again #5060

Merged

adamwathan closed this as completed Sep 24, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Breaking change after upgrade related to border-color #5039

Breaking change after upgrade related to border-color #5039

rainerborene commented Jul 22, 2021 •

edited

Loading

adamwathan commented Jul 22, 2021

rainerborene commented Jul 22, 2021 •

edited

Loading

adamwathan commented Jul 22, 2021 •

edited

Loading

rainerborene commented Jul 22, 2021 •

edited

Loading

rainerborene commented Jul 22, 2021

scardenas commented Jul 23, 2021

adriaanzon commented Jul 23, 2021

adamwathan commented Jul 23, 2021

adamwathan commented Jul 23, 2021

rainerborene commented Jul 23, 2021

adamwathan commented Jul 23, 2021

adamwathan commented Sep 24, 2021

rainerborene commented Sep 24, 2021

Breaking change after upgrade related to border-color #5039

Breaking change after upgrade related to border-color #5039

Comments

rainerborene commented Jul 22, 2021 • edited Loading

What version of Tailwind CSS are you using?

What build tool (or framework if it abstracts the build tool) are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

Describe your issue

adamwathan commented Jul 22, 2021

rainerborene commented Jul 22, 2021 • edited Loading

adamwathan commented Jul 22, 2021 • edited Loading

rainerborene commented Jul 22, 2021 • edited Loading

rainerborene commented Jul 22, 2021

scardenas commented Jul 23, 2021

adriaanzon commented Jul 23, 2021

adamwathan commented Jul 23, 2021

adamwathan commented Jul 23, 2021

rainerborene commented Jul 23, 2021

adamwathan commented Jul 23, 2021

adamwathan commented Sep 24, 2021

rainerborene commented Sep 24, 2021

rainerborene commented Jul 22, 2021 •

edited

Loading

rainerborene commented Jul 22, 2021 •

edited

Loading

adamwathan commented Jul 22, 2021 •

edited

Loading

rainerborene commented Jul 22, 2021 •

edited

Loading