feat: use tailwind v2

ecklf · Jan 8, 2021 · 013d333 · 013d333
1 parent dff0da5
commit 013d333
Show file tree

Hide file tree

Showing 9 changed files with 390 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -15,35 +15,38 @@
   "author": "impulse",
   "license": "MIT",
   "dependencies": {
-    "autoprefixer": "^9.8.4",
+    "autoprefixer": "^10.2.1",
+    "classnames": "^2.2.6",
     "css-loader": "^3.6.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
+    "lodash": "^4.17.20",
     "mobx": "^5.15.4",
     "mobx-react-lite": "^2.0.7",
     "mobx-state-tree": "^3.16.0",
     "parse-color": "^1.0.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.1",
     "style-loader": "^1.2.1",
-    "tailwindcss": "^1.4.6",
+    "tailwindcss": "^2.0.2",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.6",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "2.1.2",
-    "@tailwindcss/custom-forms": "0.2.1",
+    "@fullhuman/postcss-purgecss": "3.1.3",
+    "@tailwindcss/forms": "^0.2.1",
     "@types/jest": "26.0.3",
     "@types/node": "14.0.14",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
     "cssnano": "^4.1.10",
     "jest": "26.1.0",
+    "postcss": "^8.2.3",
     "ts-jest": "26.1.1",
     "webpack-dev-server": "3.11.0"
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,8 +13,12 @@ const App = (props: Props) => {
     <Provider value={rootStore}>
       <div className="px-4 py-3">
         <FileUpload />
-        <ColorView className="mt-3" />
-        <Footer className="mt-3" />
+        <div className="mt-3">
+          <ColorView />
+        </div>
+        <div className="mt-3">
+          <Footer />
+        </div>
       </div>
     </Provider>
   );

diff --git a/src/components/ColorView.tsx b/src/components/ColorView.tsx
@@ -1,12 +1,11 @@
+import cx from "classnames";
 import { observer } from "mobx-react-lite";
 import React, { useState } from "react";
 import { useMst } from "../models/Root";
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
-
 interface Props {}
 
-const ColorView = observer(({ className }: Props) => {
+const ColorView = observer(({}: Props) => {
   const {
     addColorStyles,
     loadedTailwindConfig,
@@ -26,11 +25,12 @@ const ColorView = observer(({ className }: Props) => {
 
   return (
     <React.Fragment>
-      <div className={`${className} w-full`}>
+      <div className="w-full">
         <input
+          type="text"
           value={prefix}
           onChange={(e) => setPrefix(e.target.value)}
-          className="block w-full mt-2 select-none focus:shadow-none form-input"
+          className="block w-full mt-2 border-gray-300 rounded-md shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50"
           placeholder="Style name prefix (optional)"
         />
       </div>
@@ -40,7 +40,7 @@ const ColorView = observer(({ className }: Props) => {
           <input
             name="overrideStyles"
             type="checkbox"
-            className="form-checkbox"
+            className="text-teal-600 border-gray-300 rounded shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50"
             checked={overrideStyles}
             onChange={() => setOverrideStyles(!overrideStyles)}
             disabled={!hasAvailableColorStyles()}
@@ -54,7 +54,7 @@ const ColorView = observer(({ className }: Props) => {
           <input
             name="addSpaces"
             type="checkbox"
-            className="form-checkbox"
+            className="text-teal-600 border-gray-300 rounded shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50"
             checked={addSpaces}
             onChange={() => setAddSpaces(!addSpaces)}
           />
@@ -66,18 +66,23 @@ const ColorView = observer(({ className }: Props) => {
 
       <div className="flex flex-row items-center mt-2">
         <button
+          type="button"
+          className={cx(
+            "inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-teal-600 border border-transparent rounded-md shadow-sm",
+            hasAvailableColorStyles()
+              ? "hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+              : "opacity-75 cursor-not-allowed"
+          )}
+          disabled={hasAvailableColorStyles() ? false : true}
           onClick={() => {
             addColorStyles(prefix);
           }}
-          className={`select-none focus:outline-none bg-teal-500 hover:bg-teal-600 text-white font-medium py-2 px-4 rounded ${
-            hasAvailableColorStyles() ? "" : "opacity-50 cursor-not-allowed"
-          }`}
-          disabled={hasAvailableColorStyles() ? false : true}
         >
           Add Styles
         </button>
         <button
-          className="px-4 py-2 font-medium text-gray-500 hover:text-gray-800"
+          type="button"
+          className="inline-flex items-center px-4 py-2 ml-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
           onClick={() => {
             loadDefaultStub();
           }}

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
@@ -3,9 +3,9 @@ import React, { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 import { useMst } from "../models/Root";
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+interface Props {}
 
-const FileUpload = observer(({ className = "" }: Props) => {
+const FileUpload = observer(({}: Props) => {
   const { configName, errorMessage, readFile } = useMst();
 
   const onDrop = useCallback((acceptedFiles) => {
@@ -15,13 +15,13 @@ const FileUpload = observer(({ className = "" }: Props) => {
 
   return (
     <section
-      className={`${className} w-full px-4 py-4 text-center border ${
+      className={`w-full px-4 py-4 text-center border ${
         isDragActive
-          ? "bg-gray-200 border-gray-500 text-gray-700"
+          ? "bg-gray-100 border-gray-500 text-gray-700"
           : errorMessage
-          ? "bg-red-100 text-red-600 border-red-500"
+          ? "bg-red-50 text-red-600 border-red-500"
           : configName
-          ? "bg-teal-100 text-teal-600 border-teal-500"
+          ? "bg-teal-50 text-teal-600 border-teal-500"
           : "text-gray-600 border-gray-500"
       } border-dashed rounded-lg cursor-pointer`}
     >

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,12 +1,10 @@
 import React from "react";
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+interface Props {}
 
-const Footer = ({ className = "" }: Props) => {
+const Footer = ({}: Props) => {
   return (
-    <div
-      className={`${className} fixed bottom-0 left-0 right-0 flex items-center justify-between w-full px-4 py-2 bg-gray-800`}
-    >
+    <div className="fixed bottom-0 left-0 right-0 flex items-center justify-between w-full px-4 py-2 bg-gray-800">
       <div className="flex items-center flex-shrink-0 mr-6 text-white">
         <a
           target="_parent"

diff --git a/src/ui.html b/src/ui.html
@@ -1 +1 @@
-<div class="h-full bg-gray-100" id="react-page"></div>
+<div class="h-full bg-gray-50" id="react-page"></div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,27 +1,17 @@
+const colors = require("tailwindcss/colors");
+
 module.exports = {
-  purge: ["./src/**/*.tsx"],
+  purge: false,
+  darkMode: false, // or 'media' or 'class'
   theme: {
-    customForms: (theme) => ({
-      default: {
-        input: {
-          borderRadius: theme("borderRadius.default"),
-          backgroundColor: theme("colors.white"),
-          borderColor: theme("colors.gray.300"),
-          "&:focus": {
-            borderColor: theme("colors.gray.500"),
-          },
-        },
-        checkbox: {
-          color: theme("colors.teal.500"),
-          "&:focus": {
-            borderColor: theme("colors.gray.500"),
-            boxShadow: undefined,
-          },
-        },
+    extend: {
+      colors: {
+        teal: colors.teal,
       },
-    }),
+    },
+  },
+  variants: {
     extend: {},
   },
-  variants: {},
-  plugins: [require("@tailwindcss/custom-forms")],
+  plugins: [require("@tailwindcss/forms")],
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
+const trimEnd = require("lodash/trimEnd");
 
 module.exports = (env, argv) => ({
   mode: argv.mode === "production" ? "production" : "development",
@@ -26,33 +27,40 @@ module.exports = (env, argv) => ({
           {
             loader: "postcss-loader",
             options: {
-              ident: "postcss",
-              plugins: [
-                require("tailwindcss")("./tailwind.config.js"),
-                ...(argv.mode === "production"
-                  ? [
-                      require("@fullhuman/postcss-purgecss")({
-                        whitelist: ["link"],
-                        content: ["**/*.html", "**/*.tsx"],
-                        css: ["**/*.css"],
-                        defaultExtractor: (content) => {
-                          // Capture as liberally as possible, including things like `h-(screen-1.5)`
-                          const broadMatches =
-                            content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
+              postcssOptions: {
+                plugins: [
+                  require("tailwindcss")("./tailwind.config.js"),
+                  ...(argv.mode === "production"
+                    ? [
+                        require("@fullhuman/postcss-purgecss")({
+                          whitelist: ["link"],
+                          content: ["**/*.html", "**/*.tsx"],
+                          css: ["**/*.css"],
+                          defaultExtractor: (content) => {
+                            // Capture as liberally as possible, including things like `h-(screen-1.5)`
+                            const broadMatches =
+                              content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
+                            const broadMatchesWithoutTrailingSlash = broadMatches.map(
+                              (match) => trimEnd(match, "\\")
+                            );
 
-                          // Capture classes within other delimiters like .block(class="w-1/2") in Pug
-                          const innerMatches =
-                            content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) ||
-                            [];
+                            // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+                            const innerMatches =
+                              content.match(
+                                /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
+                              ) || [];
 
-                          return broadMatches.concat(innerMatches);
-                        },
-                      }),
-                    ]
-                  : []),
-                require("autoprefixer"),
-                require("cssnano"),
-              ],
+                            return broadMatches
+                              .concat(broadMatchesWithoutTrailingSlash)
+                              .concat(innerMatches);
+                          },
+                        }),
+                      ]
+                    : []),
+                  require("autoprefixer"),
+                  require("cssnano"),
+                ],
+              },
             },
           },
         ],
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="h-full bg-gray-100" id="react-page"></div>
		<div class="h-full bg-gray-50" id="react-page"></div>