feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

lachlanjc · 2022-01-17T03:17:26Z

The tailwind package was still designed for Tailwind v1, which is now v3. I've updated the package to convert arrays to objects so they're more usable in a theme, as well as supporting Theme UI breakpoints.

For testing, Tailwind seemingly no longer has an option to generate all the classes for the snapshot; it now only generates classes it sees used in your source code. I pulled in an example Tailwind page & find-replaced some classnames with keys from our theme, so it would generate a few hundred lines of results. Not perfect, but functioning.

📦 Published PR as canary version: 0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/color@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/components@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/core@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/css@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/custom-properties@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/editor@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install gatsby-plugin-theme-ui@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install gatsby-theme-style-guide@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install gatsby-theme-ui-layout@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/match-media@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/mdx@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/parse-props@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-base@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-bootstrap@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-bulma@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-dark@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-deep@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-funk@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-future@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-polaris@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-roboto@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-sketchy@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-swiss@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-system@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-tailwind@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/preset-tosh@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/presets@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/prism@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/sidenav@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/style-guide@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/tailwind@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/theme-provider@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install theme-ui@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
npm install @theme-ui/typography@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
# or 
yarn add @theme-ui/color-modes@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/color@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/components@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/core@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/css@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/custom-properties@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/editor@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add gatsby-plugin-theme-ui@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add gatsby-theme-style-guide@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add gatsby-theme-ui-layout@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/match-media@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/mdx@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/parse-props@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-base@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-bootstrap@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-bulma@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-dark@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-deep@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-funk@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-future@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-polaris@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-roboto@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-sketchy@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-swiss@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-system@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-tailwind@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/preset-tosh@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/presets@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/prism@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/sidenav@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/style-guide@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/tailwind@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/theme-provider@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add theme-ui@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0
yarn add @theme-ui/typography@0.14.0--canary.2082.dcc4b46f0b087ba0af01a6353cb47648ceb35d58.0

Version

Published prerelease version: v0.14.0-develop.9

Changelog

🎉 This release contains work from a new contributor! 🎉

Thank you, Brage (@braaar), for all your work!

🚀 Enhancement

feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
@theme-ui/tailwind
- feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
@theme-ui/custom-properties
- feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
@theme-ui/color-modes
- feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
theme-ui
- feat(theme-ui): Add sx prop to BaseStyles component #2081 (@lachlanjc)

🐛 Bug Fix

feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
Finish editing note #2079 (@lachlanjc)
fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
@theme-ui/sidenav
- fix(sidenav): Build with latest theme-ui version #2084 (@lachlanjc)
@theme-ui/components
- components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)

👨‍💻 Minor changes

docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

docs(jsx): add some more detail to #with-swc section in jsx-pragma docs #2094 (@hasparus @lachlanjc)
e2e: Upgrade dependencies #2098 (@lachlanjc)
Set up CodeSandbox CI #2085 (@lachlanjc)
examples: Remove CodeSandbox starter example #2086 (@lachlanjc)
docs: Document default theme values #2087 (@lachlanjc)
docs: add dependencies to "getting started" #2071 (@braaar)
@theme-ui/sidenav
- sidenav: Fix props leaking to DOM on Pagination component #2057 (@lachlanjc)

Authors: 4

Atanas Stoyanov (@atanasster)
Brage (@braaar)
Lachlan Campbell (@lachlanjc)
Piotr Monwid-Olechnowicz (@hasparus)

vercel · 2022-01-17T03:17:30Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/6bfMQPEtLQA5jgbuBJX5gVBUa8mH
✅ Preview: https://theme-ui-git-lachlanjc-tw3-systemui.vercel.app

hasparus · 2022-01-21T17:08:07Z

Wow, you're on fire!

hasparus · 2022-01-21T17:09:43Z

This should get a piece of user facing changelog, right?

codesandbox-ci · 2022-01-24T15:24:09Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3ded464:

Sandbox	Source
next-theme-ui-example	Configuration
system-ui/theme-ui	Configuration

hasparus

👍

hasparus · 2022-03-21T12:54:45Z

🚀 PR was released in v0.14.0 🚀

feat(tailwind): Upgrade Tailwind theme conversion for v3.0

22e96cc

lachlanjc added the enhancement New feature or request label Jan 17, 2022

lachlanjc requested a review from hasparus January 17, 2022 03:17

Merge branch 'develop' into lachlanjc-tw3

3ded464

vercel bot deployed to Preview January 24, 2022 15:23 View deployment

hasparus approved these changes Jan 30, 2022

View reviewed changes

hasparus merged commit f30b1cf into develop Jan 30, 2022

hasparus deleted the lachlanjc-tw3 branch January 30, 2022 14:27

hasparus added the prerelease This change is available in a prerelease. label Jan 30, 2022

This was referenced Feb 13, 2022

chore(deps): bump follow-redirects from 1.14.7 to 1.14.8 #2132

Merged

fix(style-guide): use inherited fontSize for ColorPalette color labels #2135

Merged

This was referenced Feb 20, 2022

chore(deps): bump next from 12.0.9 to 12.1.0 in /examples/next #2136

Merged

fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138

Merged

chore(deps): bump prismjs from 1.26.0 to 1.27.0 #2141

Merged

This was referenced Mar 1, 2022

chore(deps): bump @emotion/styled from 11.6.0 to 11.8.1 #2155

Merged

chore(deps-dev): bump @babel/register from 7.16.0 to 7.17.0 #2152

Merged

This was referenced Mar 16, 2022

chore(deps): bump lodash-es from 4.17.15 to 4.17.21 #2167

Merged

fix(docs): make layout more consistent #2168

Merged

fix(color-modes): properly use print mode even if its name is initialColorModeName #2090

Merged

hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

lachlanjc commented Jan 17, 2022 •

edited by hasparus

vercel bot commented Jan 17, 2022 •

edited

hasparus commented Jan 21, 2022

hasparus commented Jan 21, 2022

codesandbox-ci bot commented Jan 24, 2022

hasparus left a comment

hasparus commented Mar 21, 2022

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082

Conversation

lachlanjc commented Jan 17, 2022 • edited by hasparus

Version

🚀 Enhancement

🐛 Bug Fix

👨‍💻 Minor changes

🏠 Internal

Authors: 4

vercel bot commented Jan 17, 2022 • edited

hasparus commented Jan 21, 2022

hasparus commented Jan 21, 2022

codesandbox-ci bot commented Jan 24, 2022

hasparus left a comment

Choose a reason for hiding this comment

hasparus commented Mar 21, 2022

lachlanjc commented Jan 17, 2022 •

edited by hasparus

vercel bot commented Jan 17, 2022 •

edited