support tailwind config

package.json

@@ -19,10 +19,14 @@
     "@testing-library/react": "^10.0.1",
     "autoprefixer": "^9.7.4",
     "bootstrap": "^4.4.1",
+    "codegen.macro": "^3.0.0",
     "debounce-fn": "^4.0.0",
     "faker": "^4.1.0",
     "history": "^5.0.0-beta.5",
     "match-sorter": "^4.0.2",
+    "postcss": "^7.0.27",
+    "postcss-cli": "^7.1.0",
+    "postcss-import": "^12.0.1",
     "prop-types": "^15.7.2",
     "querystringify": "^2.1.1",
     "react": "16.13.0",

postcss.config.js

@@ -0,0 +1,9 @@
+const isProd = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    isProd ? require('autoprefixer') : null,
+  ].filter(Boolean),
+}

src/authenticated-app.js

@@ -34,8 +34,8 @@ function AuthenticatedApp() {
 }
 
 const navLinkClassName =
-  'block w-full h-full px-3 py-2 mx-0 my-2 text-gray-900 border-l-4 border-transparent rounded-sm hover:text-blue-700 hover:decoration-none hover:bg-gray-300'
-const activeNavLinkClassName = 'bg-gray-300 border-l-4 border-blue-700'
+  'block w-full h-full px-3 py-2 mx-0 my-2 text-gray-900 border-l-4 border-transparent rounded-sm hover:text-primary hover:decoration-none hover:bg-gray-300'
+const activeNavLinkClassName = 'bg-gray-300 border-l-4 border-primary'
 
 function Nav(params) {
   return (

src/bootstrap.js

@@ -1,4 +1,5 @@
 import './hacks'
+import './styles/tailwind'
 import '@reach/dialog/styles.css'
 import '@reach/menu-button/styles.css'
 import '@reach/tabs/styles.css'

src/components/lib.js

@@ -59,8 +59,8 @@ export const Button = withClassNames(
 )
 
 const buttonVariants = {
-  primary: 'bg-blue-700 text-white',
-  secondary: 'bg-gray-400 text-gray-800',
+  primary: 'bg-primary text-white',
+  secondary: 'bg-gray-100 text-gray-800',
 }
 
 export const FormGroup = withClassNames('div', 'flex flex-col')
@@ -75,5 +75,5 @@ export function FullPageSpinner() {
 
 export const Link = withClassNames(
   RouterLink,
-  'text-blue-600 hover:text-blue-800 hover:underline',
+  'text-primary hover:text-primary-800 hover:underline',
 )

src/styles/global.css

@@ -1,5 +1,3 @@
-@import '~tailwindcss/dist/tailwind.css';
-
 #root {
   color: #434449;
   margin: 0 auto;

src/styles/tailwind/index.js

@@ -0,0 +1,3 @@
+import codegen from 'codegen.macro'
+
+codegen`module.exports = require('./tailwind-codegen')`

src/styles/tailwind/tailwind-codegen.js

@@ -0,0 +1,16 @@
+const {spawnSync} = require('child_process')
+
+function generateTailwindCode() {
+  const result = spawnSync(
+    './node_modules/.bin/postcss --output node_modules/.cache/app-postcss/styles.css src/styles/tailwind/tailwind.css',
+    {stdio: 'ignore', shell: true},
+  )
+  if (result.status !== 0) {
+    console.error(result.stdout)
+    console.error(result.stderr)
+    throw new Error(`postcss failure. Exit status: ${result.status}`)
+  }
+  return `require('.cache/app-postcss/styles.css')`
+}
+
+module.exports = generateTailwindCode

src/styles/tailwind/tailwind.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss/base';
+
+@import 'tailwindcss/components';
+
+@import 'tailwindcss/utilities';

tailwind.config.js

@@ -1 +1,22 @@
-module.exports = {}
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#3f51b5',
+        'primary-100': '#b7c1f8',
+        'primary-800': '#364495',
+        secondary: '#6f7077',
+        warning: '#ffc107',
+        success: '#4caf50',
+        danger: '#ef5350',
+        gray: {
+          '100': '#f1f2f7',
+          '200': '#f1f1f4',
+          '300': '#e4e5e9',
+          '400': '#6f7077',
+          '800': '#434449',
+        },
+      },
+    },
+  },
+}