Update to Tailwind V2

Author: DaneEveritt

package.json

@@ -4,7 +4,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.11",
-        "@types/react-copy-to-clipboard": "^4.3.0",
+        "@tailwindcss/forms": "^0.2.1",
         "axios": "^0.19.2",
         "chart.js": "^2.8.0",
         "codemirror": "^5.57.0",
@@ -38,6 +38,7 @@
         "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
+        "tailwindcss": "^2.0.2",
         "uuid": "^3.3.2",
         "xterm": "^4.9.0",
         "xterm-addon-attach": "^0.6.0",
@@ -67,6 +68,7 @@
         "@types/node": "^14.11.10",
         "@types/query-string": "^6.3.0",
         "@types/react": "^16.9.41",
+        "@types/react-copy-to-clipboard": "^4.3.0",
         "@types/react-dom": "^16.9.8",
         "@types/react-helmet": "^6.0.0",
         "@types/react-redux": "^7.1.1",
@@ -96,9 +98,8 @@
         "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
-        "tailwindcss": "^1.9.4",
         "terser-webpack-plugin": "^3.0.6",
-        "twin.macro": "^1.10.0",
+        "twin.macro": "^2.0.7",
         "typescript": "^3.9.6",
         "typescript-plugin-tw-template": "^2.0.1",
         "webpack": "^4.43.0",

resources/scripts/components/dashboard/AccountApiContainer.tsx

@@ -50,7 +50,7 @@ export default () => {
     return (
         <PageContentBlock title={'Account API'}>
             <FlashMessageRender byKey={'account'}/>
-            <div css={tw`md:flex flex-no-wrap my-10`}>
+            <div css={tw`md:flex flex-nowrap my-10`}>
                 <ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
                     <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
                 </ContentBox>

resources/scripts/components/elements/SubNavigation.tsx

@@ -11,7 +11,7 @@ const SubNavigation = styled.div`
         max-width: 1200px;
 
         & > a, & > div {
-            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
+            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-nowrap transition-all duration-150`};
 
             &:not(:first-of-type) {
                 ${tw`ml-2`};

resources/scripts/components/server/backups/BackupRow.tsx

@@ -40,7 +40,7 @@ export default ({ backup, className }: Props) => {
     });
 
     return (
-        <GreyRowBox css={tw`flex-wrap md:flex-no-wrap items-center`} className={className}>
+        <GreyRowBox css={tw`flex-wrap md:flex-nowrap items-center`} className={className}>
             <div css={tw`flex items-center truncate w-full md:flex-1`}>
                 <div css={tw`mr-4`}>
                     {backup.completedAt ?
@@ -60,7 +60,7 @@ export default ({ backup, className }: Props) => {
                             {backup.name}
                         </p>
                         {(backup.completedAt && backup.isSuccessful) &&
-                        <span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
+                        <span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
                         }
                     </div>
                     <p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -58,7 +58,7 @@ export default () => {
 
     return (
         <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
-            <div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
+            <div css={tw`flex flex-wrap-reverse md:flex-nowrap justify-center mb-4`}>
                 <ErrorBoundary>
                     <FileManagerBreadcrumbs
                         renderLeft={
@@ -73,7 +73,7 @@ export default () => {
                 </ErrorBoundary>
                 <Can action={'file.create'}>
                     <ErrorBoundary>
-                        <div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
+                        <div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-nowrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
                             <NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
                             <UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
                             <NavLink

resources/scripts/components/server/network/AllocationRow.tsx

@@ -58,7 +58,7 @@ const AllocationRow = ({ allocation }: Props) => {
     };
 
     return (
-        <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-no-wrap mt-2`}>
+        <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}>
             <div css={tw`flex items-center w-full md:w-auto`}>
                 <div css={tw`pl-4 pr-6 text-neutral-400`}>
                     <FontAwesomeIcon icon={faNetworkWired}/>

tailwind.config.js

@@ -1,44 +1,14 @@
 module.exports = {
     theme: {
         fontFamily: {
-            sans: [
-                'Rubik',
-                '-apple-system',
-                'BlinkMacSystemFont',
-                '"Helvetica Neue"',
-                '"Roboto"',
-                'system-ui',
-                'sans-serif',
-            ],
-            header: [
-                '"IBM Plex Sans"',
-                '"Roboto"',
-                'system-ui',
-                'sans-serif',
-            ],
-            serif: [
-                'Constantia',
-                '"Lucida Bright"',
-                'Lucidabright',
-                '"Lucida Serif"',
-                'Lucida',
-                'serif',
-            ],
-            mono: [
-                '"IBM Plex Mono"',
-                '"Source Code Pro"',
-                'SourceCodePro',
-                'Menlo',
-                'Monaco',
-                'Consolas',
-                'monospace',
-            ],
+            sans: [ 'Rubik', '-apple-system', 'BlinkMacSystemFont', '"Helvetica Neue"', '"Roboto"', 'system-ui', 'sans-serif' ],
+            header: [ '"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif' ],
+            mono: [ '"IBM Plex Mono"', '"Source Code Pro"', 'SourceCodePro', 'Menlo', 'Monaco', 'Consolas', 'monospace' ],
         },
         colors: {
             transparent: 'transparent',
             black: 'hsl(210, 27%, 10%)',
             white: '#ffffff',
-            'basically-white': '#fafafb',
             primary: {
                 50: 'hsl(202, 100%, 95%)', // lightest
                 100: 'hsl(204, 100%, 86%)', // lighter
@@ -119,11 +89,8 @@ module.exports = {
             transitionDuration: {
                 250: '250ms',
             },
-            minWidth: {
-                '48': '12rem',
-            },
             borderColor: theme => ({
-                default: theme('colors.neutral.400', 'cuurrentColor'),
+                default: theme('colors.neutral.400', 'currentColor'),
             }),
         },
     },