refactor: Upgrade to tailwind version 3 #3700

driskull · 2021-12-14T00:50:39Z

Related Issue: #2078

Summary

refactor: Upgrade to tailwind 3

1x -> 2x: https://v2.tailwindcss.com/docs/upgrading-to-v2
2x -> 3x: https://tailwindcss.com/docs/upgrade-guide

Issues to track:

3.0.7: config fontSize values starting with a dash do not work tailwindlabs/tailwindcss#6599
3.0.7: 'rotate.-90' does not exist in theme config tailwindlabs/tailwindcss#6601

# Conflicts: # package-lock.json # package.json

driskull

Initial comments.

driskull · 2021-12-15T00:18:22Z

tailwind.config.ts

-  future: {
-    removeDeprecatedGapUtilities: true
-  },
-  variants: {


https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration

driskull · 2021-12-15T00:18:50Z

tailwind.config.ts

@@ -259,13 +270,6 @@ module.exports = {
      const utilities = Object.assign({}, ...colorMap);

      addUtilities(utilities, variants("borderColor"));
-    }
-  ],
-  future: {


https://v2.tailwindcss.com/docs/upgrading-to-v2#remove-future-and-experimental-configuration-options

src/assets/styles/_spacing.scss

driskull · 2021-12-15T00:21:59Z

src/components/calcite-action-menu/calcite-action-menu.scss

@@ -33,5 +33,5 @@
 }

 .menu {
-  @apply flex-col flex-no-wrap outline-none;
+  @apply flex-col flex-nowrap outline-none;


https://v2.tailwindcss.com/docs/upgrading-to-v2#update-renamed-utility-classes

driskull · 2021-12-15T00:22:15Z

src/components/calcite-action-pad/calcite-action-pad.scss

@@ -39,7 +39,7 @@
    ::slotted(calcite-action-group) {
      @apply border-0
      p-0;
-      border-inline-end-width: theme("borderWidth.default");
+      border-inline-end-width: theme("borderWidth.DEFAULT");


https://v2.tailwindcss.com/docs/upgrading-to-v2#update-default-theme-keys-to-default

driskull · 2021-12-15T00:27:31Z

src/components/calcite-tip-manager/calcite-tip-manager.scss

@@ -56,8 +56,7 @@
 }

 .tip-container {
-  @apply mt-0


removed mt-0 because mt-px; was already setting the margin.

driskull · 2021-12-15T00:27:52Z

src/components/calcite-value-list-item/calcite-value-list-item.scss

@@ -21,7 +21,7 @@ calcite-pick-list-item {

 :host([active]),
 :host([selected]) {
-  @apply shadow-outline-active;
+  @apply ring;


https://v2.tailwindcss.com/docs/upgrading-to-v2#replace-shadow-outline-and-shadow-xs-with-ring-utilities

driskull · 2021-12-15T00:59:50Z

tailwind.config.ts

@@ -44,7 +45,14 @@ module.exports = {
        2: "var(--calcite-ui-text-2)",
        3: "var(--calcite-ui-text-3)",
        inverse: "var(--calcite-ui-text-inverse)",
-        link: "var(--calcite-ui-text-link)"
+        link: "var(--calcite-ui-text-link)",
+        color: {


I had to add this here to get it to find text-color-{x}. If someone knows if we can restructure this somehow that would be great. :)

If this doesn't get resolved in this PR, can you create a follow-up issue for this (assuming we'd want to change it)?

tailwind.config.ts

package.json

driskull · 2021-12-15T19:27:42Z

Seems like something is going on with the font sizing and line height. Can someone assist with that part?

driskull · 2021-12-20T18:16:22Z

src/components/calcite-action/calcite-action.scss

@@ -18,7 +18,7 @@
    justify-start
    m-0
    relative
-    text--2h
+    text-n2h


classes that start with a dash were not working. They would either not be applied or cause a build error.

I changed all of them to be n2h instead of -2h.

tailwindlabs/tailwindcss#6599

# Conflicts: # src/components/calcite-panel/calcite-panel.scss # src/components/calcite-tab-nav/calcite-tab-nav.scss

driskull · 2021-12-20T18:28:58Z

src/components/calcite-pick-list/calcite-pick-list.scss

@@ -21,7 +21,7 @@
    justify-end
    items-stretch
    mb-1;
-  &.sticky {
+  &.sticky-pos {


tailwindlabs/tailwindcss#6386 (comment)

Looks like we need to make sure our classes never match tailwind utils. We could look into creating a stylelint rule or similar to prevent circular dependencies.

driskull · 2021-12-20T18:38:11Z

All tests passing, please review.

driskull · 2021-12-20T19:08:58Z

src/assets/styles/_header.scss

@@ -30,5 +30,5 @@ h3.heading {
 }
 h4.heading,
 h5.heading {
-  @apply text--1h;
+  @apply text-n1h;


tailwindlabs/tailwindcss#6599

classes that start with a dash were not working. They would either not be applied or cause a build error.

I changed all of them to be n2h instead of -2h.

tailwindlabs/tailwindcss#6599

driskull · 2021-12-20T23:20:10Z

src/components/calcite-tip/calcite-tip.scss

@@ -68,7 +68,7 @@
 }

 .image-frame {
-  width: theme("width.[1/4");


This one was missing a closing bracket. I'm not sure it was failing but maybe we can use some linting here.

jcfranco

Awesome! Thanks for working on this to bump Tailwind to the latest version. 🎉

I'll defer to @macandcheese and/or @asangma on some comments, but the code LGTM!

jcfranco · 2021-12-20T23:32:56Z

src/components/calcite-pick-list/calcite-pick-list.scss

@@ -21,7 +21,7 @@
    justify-end
    items-stretch
    mb-1;
-  &.sticky {
+  &.sticky-pos {


Looks like we need to make sure our classes never match tailwind utils. We could look into creating a stylelint rule or similar to prevent circular dependencies.

jcfranco · 2021-12-20T23:34:55Z

src/components/calcite-tip/calcite-tip.scss

@@ -68,7 +68,7 @@
 }

 .image-frame {
-  width: theme("width.[1/4");
+  width: theme("width[1/4]");


Nice catch!

jcfranco · 2021-12-20T23:41:21Z

tailwind.config.ts

@@ -44,7 +45,14 @@ module.exports = {
        2: "var(--calcite-ui-text-2)",
        3: "var(--calcite-ui-text-3)",
        inverse: "var(--calcite-ui-text-inverse)",
-        link: "var(--calcite-ui-text-link)"
+        link: "var(--calcite-ui-text-link)",
+        color: {


If this doesn't get resolved in this PR, can you create a follow-up issue for this (assuming we'd want to change it)?

tailwind.config.ts

stencil.config.ts

# Conflicts: # package-lock.json # package.json # src/components/calcite-shell-center-row/calcite-shell-center-row.scss # stencil.config.ts

# Conflicts: # package-lock.json # package.json # stencil.config.ts

driskull · 2021-12-21T21:29:31Z

tailwind.config.ts

-    },
-    ({ addUtilities, theme, variants }) => {
+    }),
+    plugin(({ addUtilities, theme, variants }) => {


I'm not sure if these plugins are still needed. Tailwind 3 might provide these already.

driskull · 2021-12-21T21:29:48Z

tailwind.config.ts

@@ -109,10 +110,7 @@ module.exports = {
      l: "1024px",
      xl: "1440px"
    },
-    textColor: (theme) => ({


This wasn't necessary anymore.

driskull · 2021-12-21T21:30:04Z

tailwind.config.ts

-      color: theme("colors.text")
-    }),
-    backgroundColor: (theme) => ({
+    backgroundColor: ({ theme }): object => ({


We might be able to remove or refactor this at some point.

driskull · 2021-12-21T21:30:14Z

tailwind.config.ts

@@ -147,9 +145,6 @@ module.exports = {
        "outline-active": "0 0 0 1px var(--calcite-ui-brand)",
        none: "none"
      },
-      fill: (theme) => ({


Wasn't necessary anymore

driskull · 2021-12-21T21:31:21Z

tailwind.config.ts

@@ -39,7 +40,7 @@ module.exports = {
          3: "var(--calcite-ui-foreground-3)"
        }
      },
-      text: {
+      color: {


We might be able to remove or refactor this at some point. Tailwind colors usually just go like text-<color> instead of text-color-<color>. This allows people to use colors as variants

driskull added 3 commits December 10, 2021 12:30

tailwind 3 work

00d6ba6

WIP

634fde6

cleanup

9a2a139

github-actions bot assigned driskull Dec 14, 2021

github-actions bot added this to the Sprint 12/6 - 12/17 milestone Dec 14, 2021

github-actions bot added the refactor Issues tied to code that needs to be significantly reworked. label Dec 14, 2021

driskull added 7 commits December 14, 2021 13:18

WIP

cb98925

Merge branch 'master' into dris0000/tailwind-3

7aca12c

# Conflicts: # package-lock.json # package.json

cleanup

b06e2b1

get things running

2c33f4f

cleanup

b00d9c6

test compressed to remove comments?

5852bd6

revert

b480f70

driskull requested review from jcfranco, asangma, macandcheese and paulcpederson and removed request for jcfranco December 15, 2021 01:42

driskull added 3 commits December 15, 2021 09:06

Merge branch 'master' into dris0000/tailwind-3

0d9a369

cssnano test

1221063

lite preset

c41087b

driskull commented Dec 15, 2021

View reviewed changes

driskull requested a review from jrowlingson December 15, 2021 18:46

font size test

4078bd8

driskull changed the title ~~refactor: Upgrade to tailwind 3.0.0~~ refactor: Upgrade to tailwind 3 Dec 15, 2021

driskull added 2 commits December 15, 2021 11:15

revert

2775f11

fix test

73ce082

bump

d25d5b2

driskull added 4 commits December 16, 2021 13:10

bump and revert changes

a078a17

bump

5b2ce32

revert class name changes.

eb6737c

use "n" instead of "-" for config fontSize values.

d3a7a2c

driskull commented Dec 20, 2021

View reviewed changes

driskull added 2 commits December 20, 2021 10:19

Merge branch 'master' into dris0000/tailwind-3

f46cd35

# Conflicts: # src/components/calcite-panel/calcite-panel.scss # src/components/calcite-tab-nav/calcite-tab-nav.scss

fix class

f9723d5

driskull commented Dec 20, 2021

View reviewed changes

driskull changed the title ~~refactor: Upgrade to tailwind 3~~ refactor: Upgrade to tailwind version 3 Dec 20, 2021

driskull marked this pull request as ready for review December 20, 2021 18:37

driskull requested a review from a team as a code owner December 20, 2021 18:37

remove cssnano

2d0ed78

driskull commented Dec 20, 2021

View reviewed changes

cleanup fraction values.

dc4bdc8

driskull commented Dec 20, 2021

View reviewed changes

jcfranco approved these changes Dec 20, 2021

View reviewed changes

driskull added 2 commits December 20, 2021 16:07

cleanup typing config

b0ab948

Merge branch 'master' into dris0000/tailwind-3

5cd165b

# Conflicts: # package-lock.json # package.json # src/components/calcite-shell-center-row/calcite-shell-center-row.scss # stencil.config.ts

driskull mentioned this pull request Dec 21, 2021

Refactor tailwind config #3743

Closed

driskull added 3 commits December 21, 2021 09:53

cleanup config

f955a93

Merge branch 'master' into dris0000/tailwind-3

9ae5641

# Conflicts: # package-lock.json # package.json # stencil.config.ts

Merge branch 'master' into dris0000/tailwind-3

4dab5c2

driskull commented Dec 21, 2021

View reviewed changes

driskull merged commit e1df5c4 into master Dec 21, 2021

driskull deleted the dris0000/tailwind-3 branch December 21, 2021 21:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Upgrade to tailwind version 3 #3700

refactor: Upgrade to tailwind version 3 #3700

driskull commented Dec 14, 2021 •

edited

Loading

driskull left a comment

driskull Dec 15, 2021

driskull Dec 15, 2021

driskull Dec 15, 2021

driskull Dec 15, 2021

driskull Dec 15, 2021

driskull Dec 15, 2021

driskull Dec 15, 2021 •

edited

Loading

jcfranco Dec 20, 2021

driskull Dec 21, 2021

driskull commented Dec 15, 2021

driskull Dec 20, 2021

driskull Dec 20, 2021

jcfranco Dec 20, 2021

driskull commented Dec 20, 2021

driskull Dec 20, 2021

driskull Dec 20, 2021

jcfranco left a comment •

edited

Loading

jcfranco Dec 20, 2021

jcfranco Dec 20, 2021

jcfranco Dec 20, 2021

driskull Dec 21, 2021

driskull Dec 21, 2021

driskull Dec 21, 2021

driskull Dec 21, 2021

driskull Dec 21, 2021

refactor: Upgrade to tailwind version 3 #3700

refactor: Upgrade to tailwind version 3 #3700

Conversation

driskull commented Dec 14, 2021 • edited Loading

Summary

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull Dec 15, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull commented Dec 15, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull commented Dec 20, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

driskull commented Dec 14, 2021 •

edited

Loading

driskull Dec 15, 2021 •

edited

Loading

jcfranco left a comment •

edited

Loading