Use Tailwind 3.0 (#515)

* upgrade to tailwind 3.0 alpha, make config changes

* rewrite svg: w/ new addVariant API tailwindlabs/tailwindcss#5809

* first first-of-type:before: order issue (tw fix in next alpha)

tailwindlabs/tailwindcss#6112
tailwindlabs/tailwindcss#6016
tailwindlabs/tailwindcss#6018

* replace tailwindcss-children plugin with new custom addVariant

* oh yeah... use stroke-green-500

* each variant doesn't need its own plugin

* update yarn.lock after merging main

app/pages/ProjectsPage.tsx

@@ -27,7 +27,7 @@ const Metric = ({ label, value, className }: MetricProps) => (
     <div className="flex">
       <div className="text-display-lg mr-4">{value}</div>
       <div>
-        <SparklineSVG className="stroke-current text-green-500 w-full" />
+        <SparklineSVG className="stroke-green-500 w-full" />
       </div>
     </div>
   </div>

libs/ui/lib/breadcrumbs/Breadcrumbs.tsx

@@ -11,7 +11,7 @@ export const Breadcrumbs = ({ data }: BreadcrumbsProps) => (
   <ol className="text-xs font-mono uppercase mb-6">
     {data.map(({ href, label }) => (
       <li
-        className="inline-block first-of-type:before:content-none 
+        className="inline-block before:first-of-type:content-none 
                    before:content-['/'] before:mx-2 before:text-gray-400"
         key={`${href}-${label}`}
       >

libs/ui/lib/radio/Radio.tsx

@@ -44,7 +44,7 @@ const cardLabelStyles = `
   peer-disabled:hover:bg-gray-500
 
   children:py-2 children:px-4 children:-mx-4 children:border-gray-400
-  children:first:-mt-2 children:last:-mb-2
+  first:children:-mt-2 last:children:-mb-2
   peer-checked:children:border-green-500
   cursor-pointer peer-disabled:cursor-default
 `

package.json

@@ -108,8 +108,7 @@
     "postcss-nesting": "^8.0.1",
     "prettier": "2.4.0",
     "rollup": "^2.52.7",
-    "tailwindcss": "^2.2.0",
-    "tailwindcss-children": "^2.1.0",
+    "tailwindcss": "^3.0.0-alpha.2",
     "ts-node": "^9.1.1",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "~4.4.2",

tailwind.config.js

@@ -3,15 +3,10 @@
 /** @type {import('tailwindcss/lib/util/createPlugin').default} */
 // @ts-ignore
 const plugin = require('tailwindcss/plugin')
-const defaultConfig = require('tailwindcss/defaultConfig')
-
-const childrenPlugin = require('tailwindcss-children')
 
 /** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
 module.exports = {
-  mode: 'jit',
-  purge: ['./libs/ui/**/*.{ts,tsx,mdx}', './app/**/*.{ts,tsx}'],
-  darkMode: false,
+  content: ['./libs/ui/**/*.{ts,tsx,mdx}', './app/**/*.{ts,tsx}'],
   theme: {
     extend: {
       borderRadius: {
@@ -74,20 +69,11 @@ module.exports = {
     },
   },
   plugins: [
-    // imitation of the twin.macro svg: variant. svg:text-green-500 puts green
-    // on an SVG that's an immediate child of the element
-    plugin(function ({ addVariant, e }) {
-      addVariant('svg', ({ modifySelectors, separator }) => {
-        modifySelectors(
-          ({ className }) => `.${e(`svg${separator}${className}`)} > svg`
-        )
-      })
+    plugin(({ addVariant }) => {
+      // imitation of the twin.macro svg: variant. svg:text-green-500 puts green
+      // on an SVG that's an immediate child of the element
+      addVariant('svg', '& > svg')
+      addVariant('children', '& > *')
     }),
-    childrenPlugin,
   ],
-  /**
-   * TODO: This isn't respected, need an upstream fix.
-   * @see https://github.com/tailwindlabs/tailwindcss/issues/3949
-   */
-  variantOrder: ['children', ...defaultConfig.variantOrder, 'svg'],
 }