Merge pull request #10 from tailwindcomponents/tailwindcss-v3

Tailwind CSS v3 & React v17
tailwindcomponents · May 15, 2022 · 9b115df · 9b115df
2 parents 14dc6d6 + 00e8ddd
commit 9b115df
Show file tree

Hide file tree

Showing 10 changed files with 15,555 additions and 31,164 deletions.
diff --git a/craco.config.js b/craco.config.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,45 +3,43 @@
     "version": "1.0.0",
     "private": true,
     "dependencies": {
-        "@babel/compat-data": "^7.8.0",
-        "@babel/preset-env": "^7.8.7",
-        "@craco/craco": "^5.6.3",
-        "@tailwindcss/forms": "^0.3.2",
-        "@testing-library/jest-dom": "^5.0.2",
+        "@babel/compat-data": "^7.16.4",
+        "@babel/preset-env": "^7.16.7",
+        "@tailwindcss/forms": "^0.4.0",
+        "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^9.5.0",
         "@testing-library/user-event": "^10.0.0",
-        "@types/classnames": "^2.2.10",
+        "@types/classnames": "^2.3.1",
         "@types/jest": "^25.1.3",
         "@types/node": "^13.7.7",
         "@types/react": "^16.9.23",
         "@types/react-dom": "^16.9.0",
-        "@types/react-redux": "^7.1.7",
-        "@types/react-router-dom": "^5.1.3",
-        "autoprefixer": "^9",
-        "classnames": "^2.2.6",
-        "connected-react-router": "^6.6.1",
-        "postcss": "^7",
-        "react": "^16.13.0",
-        "react-dom": "^16.13.0",
+        "@types/react-redux": "^7.1.21",
+        "@types/react-router-dom": "^5.3.2",
+        "autoprefixer": "^10.4.1",
+        "classnames": "^2.3.1",
+        "connected-react-router": "^6.9.2",
+        "postcss": "^8.4.5",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "react-ga": "^2.7.0",
-        "react-masonry-css": "^1.0.14",
-        "react-redux": "^7.2.0",
+        "react-masonry-css": "^1.0.16",
+        "react-redux": "^7.2.6",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
-        "redux": "^4.0.5",
-        "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+        "redux": "^4.1.2",
+        "tailwindcss": "^3.0.11",
         "typescript": "~3.8.3",
         "use-bus": "1.1.1"
     },
     "devDependencies": {
-        "@fullhuman/postcss-purgecss": "^2.1.0",
-        "react-scripts": "3.4.0"
+        "react-scripts": "^5.0.0"
     },
     "scripts": {
-        "start": "SKIP_PREFLIGHT_CHECK=true craco start",
-        "build": "PUBLIC_URL=\"/cheatsheet/\" SKIP_PREFLIGHT_CHECK=true craco build",
+        "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
+        "build": "PUBLIC_URL=\"/cheatsheet/\" SKIP_PREFLIGHT_CHECK=true react-scripts build",
         "postbuild": "rm -rf ../public/cheatsheet && mv build ../public/cheatsheet",
-        "test": "craco test"
+        "test": "react-scripts test"
     },
     "eslintConfig": {
         "extends": "react-app"

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,26 +1,6 @@
-const TailwindVueExtractor = content => {
-    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, "");
-    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_:/]+/g) || [];
-};
-
-const extensionsUsingCSS = ['html', 'js', 'tsx', 'ts'];
-const extensionsOfCSS = ["css", "less", "pcss", "postcss", "sass", "scss", "styl"];
-
-const purgecss = require('@fullhuman/postcss-purgecss')({
-    content: [`./@(public|src)/**/*.@(${extensionsUsingCSS.join("|")})`],
-    css: [`./src/**/*.@(${extensionsOfCSS.join("|")})`],
-    extractors: [
-        {
-            extractor: TailwindVueExtractor,
-            extensions: extensionsUsingCSS,
-        },
-    ],
-});
-
-  module.exports = {
-    plugins: [
-      require('tailwindcss')('tailwind.config.js'),
-      require('autoprefixer'),
-      ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
-    ],
-  };
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/infoTable.tsx b/src/components/infoTable.tsx
@@ -26,9 +26,10 @@ const InfoTable = ({ table }: any) => {
                                 {
                                     tr.map((td: string, index: Number) => {
                                         return (
-                                            <td
+                                            <td 
+                                            onClick={() => { navigator.clipboard.writeText(td); alert(td + " Copied to clipboard") }}
                                             key={'td-' + index}
-                                            className={classNames('font-mono text-xs p-2 border-b border-gray-300', {
+                                            className={classNames('font-mono cursor-copy text-xs hover:underline p-2 border-b border-gray-300', {
                                                 'text-purple-700 whitespace-nowrap': index === 0,
                                                 'text-blue-700': index === 1,
                                                 'text-gray-500 text-xs': index === 2,

diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx
@@ -3,29 +3,29 @@ import { ReactComponent as Logo } from '../images/logo.svg';
 import { dispatch } from 'use-bus';
 
 const SearchBar = (props: any) => {
-    const tailwindVersion = "2.1.0";
+    const tailwindVersion = "3.0.0";
     const searchInput: any = useRef(null);
 
     useEffect(() => {
         searchInput.current.focus();
     });
 
     return (
-        <div className="bg-white border-b lg:fixed lg:w-full lg:top-0 lg:left-0">
+        <div className="bg-white border-b lg:fixed lg:w-full lg:top-0 lg:z-50 lg:left-0">
             <div className="container p-4 mx-auto">
                 <div className="flex flex-col lg:items-center lg:justify-center lg:flex-row lg:space-x-4">
                     <div className="flex flex-col items-center sm:flex-row sm:justify-center">
                         <Logo className="object-cover object-left h-8" />
                         <h1 className="flex items-center pl-2 mt-2 text-lg text-gray-600 lg:mt-0 sm:ml-2 sm:border-l sm:border-gray-400">Cheatsheet <span className="flex items-center h-5 px-2 ml-2 text-xs font-bold text-white rounded-md bg-primary">{tailwindVersion}</span></h1>
                     </div>
 
-                    <input ref={searchInput} className="h-10 mt-4 border-gray-200 rounded-md lg:mt-0 lg:w-96 focus:border-teal-500 focus:ring focus:ring-primary focus:ring-opacity-40" type="text" placeholder="Search" onChange={props.search} />
+                    <input ref={searchInput} className="h-10 mt-4 border-gray-200 rounded-md lg:mt-0 2xl:w-96 focus:border-teal-400 focus:ring focus:ring-primary focus:ring-opacity-40" type="text" placeholder="Search" onChange={props.search} />
 
                     <div className="flex flex-col mt-4 space-y-3 lg:mt-0 sm:flex-row sm:space-y-0 sm:space-x-3 sm:items-center sm:justify-center">
-                        <button onClick={() => dispatch('ui/expand')} className="px-4 py-2 space-x-3 text-gray-600 transition-colors duration-200 transform border rounded-lg hover:bg-gray-100 focus:outline-none">Expand <span className="lg:hidden 2xl:inline">All</span></button>
-                        <button onClick={() => dispatch('ui/collapse')} className="px-4 py-2 space-x-3 text-gray-600 transition-colors duration-200 transform border rounded-lg hover:bg-gray-100 focus:outline-none">Collapse <span className="lg:hidden 2xl:inline">All</span></button>
-                        <a title="TailwindCSS" href="https://tailwindcomponents.com/" className="px-4 py-2 font-semibold text-center text-white rounded-md bg-primary hover:bg-teal-300">Back <span className="lg:hidden xl:inline">to components</span></a>
-                        <a className="flex items-center justify-center space-x-2 text-gray-700 hover:text-primary hover:underline" href="https://github.com/tailwindcomponents/cheatsheet">
+                        <button onClick={() => dispatch('ui/expand')} className="px-4 py-2 space-x-3 text-gray-600 transition-colors duration-300 transform border rounded-lg hover:bg-gray-100 focus:outline-none">Expand <span className="lg:hidden xl:inline">All</span></button>
+                        <button onClick={() => dispatch('ui/collapse')} className="px-4 py-2 space-x-3 text-gray-600 transition-colors duration-300 transform border rounded-lg hover:bg-gray-100 focus:outline-none">Collapse <span className="lg:hidden xl:inline">All</span></button>
+                        <a title="TailwindCSS" href="https://tailwindcomponents.com/" className="px-4 py-2 font-semibold text-center transition-colors duration-300 transform text-white rounded-md bg-primary hover:bg-teal-300">Back <span className="lg:hidden xl:inline">to components</span></a>
+                        <a className="flex items-center justify-center space-x-2 transition-colors duration-500 transform text-gray-700 hover:text-primary hover:underline" href="https://github.com/tailwindcomponents/cheatsheet">
                             <svg className="w-6 h-6 fill-current" viewBox="0 0 30 30">
                                 <path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z" />
                             </svg>

diff --git a/src/components/subcategory.tsx b/src/components/subcategory.tsx
@@ -27,12 +27,12 @@ const Subcategory = ({ subcategory }: any) => {
     return (
         <div>
             <div
-              className="flex items-center px-3 py-2 text-gray-700 border-gray-300 cursor-pointer hover:bg-gray-200 hover:text-gray-900"
+              className="flex items-center px-3 py-2 text-gray-700 border-gray-300 cursor-pointer transition-colors duration-300 transform hover:bg-gray-200 hover:text-gray-900"
               onClick={toggleCollapse}
             >
                 <h1 className="flex-1 font-mono text-sm">{subcategory.title}</h1>
                 <a
-                  className="px-2 py-1 text-xs font-bold text-white uppercase bg-gray-400 rounded-md hover:bg-primary"
+                  className="px-2 py-1 text-xs font-bold transition-colors duration-300 transform text-white uppercase bg-gray-400 rounded-md hover:bg-primary"
                   href={subcategory.docs}
                   target="_blank"
                   rel="noopener noreferrer"