Add nodejs and yarn

Bumps [tailwindcss](https://github.com/tailwindcss/tailwindcss) from 1.1.2 to 1.1.3.
- [Release notes](https://github.com/tailwindcss/tailwindcss/releases)
- [Commits](https://github.com/tailwindcss/tailwindcss/compare/v1.1.2...v1.1.3)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.envrc

@@ -0,0 +1 @@
+use flake

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitignore

@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Nix
+.direnv/

README.md

@@ -1,4 +1,12 @@
-# rebuilding-bartik
+# Rebuilding Bartik
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/7e49981e-951a-41ae-b0b9-d5b09989d448/deploy-status)](https://app.netlify.com/sites/rebuilding-bartik/deploys)
+
+A clone of [Drupal](https://www.drupal.org)’s default theme, Bartik, built with [Vue.js](https://vuejs.org) and [Tailwind CSS](https://tailwindcss.com).
+
+![A screenshot of the Rebuilding Bartik website](screenshot.png)
+
+[View the site live on Netlify →](https://rebuilding-bartik.oliverdavies.uk)
 
 ## Project setup
 ```

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1659446231,
+        "narHash": "sha256-hekabNdTdgR/iLsgce5TGWmfIDZ86qjPhxDg/8TlzhE=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "eabc38219184cc3e04a974fe31857d8e0eac098d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-21.11",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,23 @@
+{
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-21.11";
+
+  outputs =
+    { nixpkgs, ... }:
+    let
+      system = "x86_64-linux";
+      pkgs = nixpkgs.legacyPackages.${system};
+
+      inherit (pkgs) mkShell nodejs;
+      inherit (pkgs.nodePackages) yarn;
+    in
+    {
+      devShells.${system}.default = mkShell {
+        buildInputs = [
+          nodejs
+          yarn
+        ];
+      };
+
+      formatter.${system} = pkgs.nixfmt-rfc-style;
+    };
+}

package.json

@@ -8,41 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "tailwindcss": "^0.7.2",
-    "vue": "^2.5.17"
+    "postcss-import": "^12.0.1",
+    "tailwindcss": "^1.1.3",
+    "tailwindcss-skip-link": "^1.0.1",
+    "vue": "^2.6.6"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.5",
-    "@vue/cli-service": "^3.1.4",
-    "babel-eslint": "^10.0.1",
+    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.3",
     "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "vue-template-compiler": "^2.5.17"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": "./tailwind.js",
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.5.21"
+  }
 }

postcss.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
+      content: [
+        './src/**/*.vue',
+        './public/index.html',
+      ],
+      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+    })
+  ]
+}
+

public/_redirects

@@ -0,0 +1 @@
+https://rebuilding-bartik.netlify.com/* https://rebuilding-bartik.oliverdavies.uk/:splat 301!

public/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Rebuilding Bartik with Vue.js and Tailwind CSS</title>
   </head>
-  <body class="text-black bg-black text-sm leading-normal">
+  <body>
     <noscript>
       <strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

src/App.vue

@@ -1,22 +1,111 @@
 <template>
-  <div id="app">
-    <Welcome title="Rebuilding Bartik"/>
+  <div id="app" class="min-h-screen font-sans bg-black text-white text-sm leading-normal">
+    <skip-link></skip-link>
+
+    <header class="bg-blue-300">
+      <div class="py-4 text-white">
+        <div id="header" class="mx-auto px-4 relative xl:max-w-6xl">
+          <div class="flex flex-col-reverse">
+            <div class="flex items-center">
+              <img src="@/assets/img/logo.svg" alt="" class="mr-4">
+              <div class="text-2xl">
+                <a href="#0">{{ title }}</a>
+              </div>
+            </div>
+
+            <div class="text-sm flex justify-end">
+              <a href="#0">Log in</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-1">
+        <main-menu></main-menu>
+      </div>
+    </header>
+
+    <div class="bg-white text-black">
+      <div class="max-w-6xl mx-auto px-4 py-6">
+        <drupal-message type="status">
+          <p>
+            A Bartik clone, built with
+            <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
+          </p>
+        </drupal-message>
+
+        <div class="-mx-6 md:flex md:flex-row-reverse">
+          <main id="main" class="flex-1 px-6 pb-8 lg:pb-12">
+            <div class="font-serif">
+              <h1 class="text-3xl font-normal leading-tight">Welcome to {{ title }}</h1>
+              <p class="mt-1">No front page content has been created yet.</p>
+              <p>Follow the <a href="#0">User Guide</a> to start building your site.</p>
+            </div>
+
+            <div class="mt-6 lg:mt-10"><a href="#0"><img src="@/assets/img/feed.svg" alt=""></a></div>
+          </main>
+
+          <aside class="w-full px-6 -mb-4 md:w-1/3 lg:w-1/4">
+            <sidebar-block>
+              <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300">Search</h2>
+
+              <div class="mt-3">
+                <form action="#" class="flex">
+                  <input type="text" class="w-full py-1 px-2 border border-solid border-grey-400 xl:w-auto">
+
+                  <button type="submit" class="flex-none ml-2 px-3 rounded-full bg-grey-200 border-b border-solid border-grey-500">
+                    <img src="@/assets/img/search.svg" class="block">
+                  </button>
+                </form>
+              </div>
+            </sidebar-block>
+          </aside>
+        </div>
+      </div>
+    </div>
+
+    <footer id="footer" class="bg-black text-white text-xs">
+      <div class="max-w-6xl mx-auto px-4 pt-16 pb-8 bg-grey-700">
+        <div class="border-t border-solid border-grey-600 pt-6">
+          <div>
+            <p><a href="#0">Contact</a></p>
+          </div>
+
+          <div class="mt-6">
+            <p>
+              A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik).
+              Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a>
+              using <a href="https://vuejs.org">Vue.js</a>
+              and <a href="https://tailwindcss.com">Tailwind CSS</a>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script>
-import Welcome from './components/Welcome.vue'
+import MainMenu from '@/components/MainMenu'
+import SidebarBlock from '@/components/SidebarBlock'
+import SkipLink from '@/components/SkipLink'
 
 export default {
   name: 'app',
+
   components: {
-    Welcome,
+    MainMenu,
+    SidebarBlock,
+    SkipLink
+  },
+
+  data () {
+    return {
+      title: 'Rebuilding Bartik'
+    }
   }
 }
 </script>
 
-<style>
-@tailwind preflight;
-@tailwind components;
-@tailwind utilities;
-</style>
+<style src="@/assets/css/tailwind.css"/>

src/assets/css/components.css

@@ -0,0 +1,17 @@
+#main a {
+  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
+
+  &:hover,
+  &:focus {
+    @apply text-blue-100 border-solid
+  }
+}
+
+#footer a {
+  @apply text-white no-underline border-b border-dotted border-white;
+
+  &:hover,
+  &:focus {
+    @apply border-none
+  }
+}

src/assets/css/tailwind.css

@@ -0,0 +1,7 @@
+@import 'tailwindcss/base';
+
+@import 'tailwindcss/components';
+@import './components.css';
+
+@import 'tailwindcss/utilities';
+@import './utilities.css';

src/assets/css/utilities.css

@@ -0,0 +1,4 @@
+.skip-link:focus {
+  left: 50%;
+  transform: translateX(-50%)
+}

src/components/DrupalMessage.vue

@@ -0,0 +1,30 @@
+<template>
+    <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
+    <div class="flex items-center py-4 pl-3 pr-4 mb-6 border rounded-sm" :class="classes">
+      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-300 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: String
+  },
+
+  computed: {
+    classes: function () {
+      return {
+        status: 'border-green-200 text-green-400 bg-green-100'
+      }[this.type]
+    },
+
+    wrapperClasses: function () {
+      return {
+        status: 'bg-green-300'
+      }[this.type]
+    }
+  }
+}
+</script>

src/components/MainMenu.vue

@@ -2,30 +2,30 @@
   <div>
     <button
       type="button"
-      class="w-full p-3 block sm:hidden bg-blue-lighter text-sm text-grey-darker text-left focus:outline-none"
-      @click="open = !open"
+      class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden"
+      @click="toggle"
     >
       <div class="flex items-center justify-between">
         <div>
           {{ navText }} - Main navigation
         </div>
         <div>
-          <img src="img/hamburger.svg" alt="">
+          <img src="@/assets/img/hamburger.svg" alt="">
         </div>
       </div>
     </button>
 
-    <div class="container mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
+    <div class="mx-auto px-4 sm:block xl:max-w-6xl" :class="[ isOpen ? 'block' : 'hidden' ]">
       <div class="mt-2 sm:mt-0">
-        <nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
+        <nav class="flex flex-wrap pb-2 -mt-1 -mx-3 sm:-mx-0 md:p-0">
           <div
-            class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
+            class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"
             :key="link.title"
             v-for="(link, index) in links"
           >
             <a
-              class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
-              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
+              class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
               :href="link.href"
             >
               {{ link.title }}
@@ -38,44 +38,50 @@
 </template>
 
 <script>
-  export default {
-    data: function () {
-      return {
-        activeTab: 0,
-        open: false,
-        links: [
-          {
-            title: 'Home',
-            href: '#0',
-          },
-          {
-            title: 'Drupal',
-            href: 'https://www.drupal.org',
-          },
-          {
-            title: 'Vue.js',
-            href: 'https://vuejs.org',
-          },
-          {
-            title: 'Tailwind CSS',
-            href: 'https://tailwindcss.com',
-          },
-          {
-            title: 'View code on GitHub',
-            href: 'https://github.com/opdavies/rebuilding-bartik',
-          },
-          {
-            title: 'Read blog post',
-            href: 'https://www.oliverdavies.uk/blog/rebuilding-bartik-with-vuejs-tailwind-css',
-          },
-        ]
-      }
-    },
+export default {
+  data: function () {
+    return {
+      activeTab: 0,
+      isOpen: false,
+      links: [
+        {
+          title: 'Home',
+          href: '#0'
+        },
+        {
+          title: 'Drupal',
+          href: 'https://www.drupal.org'
+        },
+        {
+          title: 'Vue.js',
+          href: 'https://vuejs.org'
+        },
+        {
+          title: 'Tailwind CSS',
+          href: 'https://tailwindcss.com'
+        },
+        {
+          title: 'View code on GitHub',
+          href: 'https://github.com/opdavies/rebuilding-bartik'
+        },
+        {
+          title: 'Read blog post',
+          href: 'https://www.oliverdavies.uk/blog/rebuilding-bartik-with-vuejs-tailwind-css'
+        }
+      ]
+    }
+  },
 
-    computed: {
-      navText: function () {
-        return this.open ? 'Hide' : 'Show';
-      }
+  computed: {
+    navText: function () {
+      return this.isOpen ? 'Hide' : 'Show'
+    }
+  },
+
+  methods: {
+    toggle () {
+      this.isOpen = !this.isOpen
     }
   }
+}
 </script>

src/components/SidebarBlock.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="p-4 mb-4 bg-grey-100">
+    <slot></slot>
+  </div>
+</template>

src/components/SkipLink.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <a href="#main-content" class="skip-link py-1 px-2 rounded-b-lg text-white bg-black-60 focus:no-underline focus:outline-none">Skip to main content</a>
+  </div>
+</template>

src/components/Welcome.vue

@@ -1,94 +0,0 @@
-<template>
-  <div>
-    <div class="bg-blue-dark">
-      <div class="py-4 text-white">
-        <div class="container mx-auto px-4 relative">
-          <div class="flex flex-col-reverse">
-            <div class="flex items-center">
-              <img src="img/logo.svg" alt="" class="mr-4">
-              <div class="text-2xl">
-                <a href="#0" class="text-white no-underline">{{ title }}</a>
-              </div>
-            </div>
-
-            <div class="text-sm flex justify-end">
-              <a href="#0" class="text-white no-underline hover:underline">Log in</a>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <main-menu></main-menu>
-    </div>
-
-    <div class="bg-white pt-3 pb-4 lg:pb-12">
-      <div class="container mx-auto px-4">
-        <div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
-          <div class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
-            <div class="font-serif">
-              <h1 class="font-normal">Welcome to {{ title }}</h1>
-              <p>No front page content has been created yet.</p>
-              <p>Follow the <a href="#0" class="text-blue-dark hover:text-blue no-underline border-b border-blue border-dotted hover:bg-solid">User Guide</a> to start building your site.</p>
-            </div>
-
-            <div class="mt-10">
-              <a href="#0">
-                <img src="img/feed.svg" alt="">
-              </a>
-            </div>
-          </div>
-
-          <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
-            <div class="p-4" style="background-color: #f6f6f2">
-              <h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2>
-
-              <div>
-                <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto">
-
-                  <button type="submit" class="bg-grey-light px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" style="background-color: #f0f0f0">
-                    <img src="img/loupe.svg" class="block">
-                  </button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="text-xs text-white">
-      <div class="container mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-darkest pt-6 -mb-6">
-          <div class="mb-6">
-            <p><a href="#0" class="text-white no-underline border-b border-dotted border-white">Contact</a></p>
-          </div>
-
-          <div class="mb-6">
-            <p>
-              A clone of <a href="https://www.drupal.org" class="text-white no-underline border-b border-dotted border-white">Drupal</a>’s default theme (Bartik).
-              Built by <a href="https://www.oliverdavies.uk" class="text-white no-underline border-b border-dotted border-white">Oliver Davies</a>
-              using <a href="https://vuejs.org" class="text-white no-underline border-b border-dotted border-white">Vue.js</a>
-              and <a href="https://tailwindcss.com" class="text-white no-underline border-b border-dotted border-white">Tailwind CSS</a>.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import MainMenu from './MainMenu.vue';
-
-export default {
-  components: { MainMenu },
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+Vue.component('drupal-message', require('@/components/DrupalMessage').default)
+
 new Vue({
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app')

tailwind.config.js

@@ -0,0 +1,45 @@
+module.exports = {
+  theme: {
+    colors: {
+      black: {
+        default: '#22292f',
+        60: 'rgba(0,0,0,.6)'
+      },
+      blue: {
+        100: '#bcdefa',
+        200: '#3490dc',
+        300: '#2779bd'
+      },
+      green: {
+        100: '#f3faee',
+        200: '#cde2c2',
+        300: '#77b159',
+        400: '#325e1c'
+      },
+      grey: {
+        100: '#f6f6f2',
+        200: '#f0f0f0',
+        300: '#dae1e7',
+        400: '#b8c2cc',
+        500: '#8795a1',
+        600: '#3d4852'
+      },
+      transparent: 'transparent',
+      white: '#fff'
+    },
+    extend: {
+      fontFamily: {
+        sans: ['sans-serif']
+      },
+      fontSize: {
+        '3xl': '1.75rem'
+      },
+      maxWidth: {
+        '6xl': '80rem'
+      }
+    }
+  },
+  plugins: [
+    require('tailwindcss-skip-link')()
+  ]
+}

tailwind.js

@@ -1,955 +0,0 @@
-/*
-
-Tailwind - The Utility-First CSS Framework
-
-A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
-David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
-
-Welcome to the Tailwind config file. This is where you can customize
-Tailwind specifically for your project. Don't be intimidated by the
-length of this file. It's really just a big JavaScript object and
-we've done our very best to explain each section.
-
-View the full documentation at https://tailwindcss.com.
-
-
-|-------------------------------------------------------------------------------
-| The default config
-|-------------------------------------------------------------------------------
-|
-| This variable contains the default Tailwind config. You don't have
-| to use it, but it can sometimes be helpful to have available. For
-| example, you may choose to merge your custom configuration
-| values with some of the Tailwind defaults.
-|
-*/
-
-let defaultConfig = require('tailwindcss/defaultConfig')()
-
-
-/*
-|-------------------------------------------------------------------------------
-| Colors                                    https://tailwindcss.com/docs/colors
-|-------------------------------------------------------------------------------
-|
-| Here you can specify the colors used in your project. To get you started,
-| we've provided a generous palette of great looking colors that are perfect
-| for prototyping, but don't hesitate to change them for your project. You
-| own these colors, nothing will break if you change everything about them.
-|
-| We've used literal color names ("red", "blue", etc.) for the default
-| palette, but if you'd rather use functional names like "primary" and
-| "secondary", or even a numeric scale like "100" and "200", go for it.
-|
-*/
-
-let colors = {
-  'transparent': 'transparent',
-
-  'black': '#22292f',
-  'grey-darkest': '#3d4852',
-  'grey-darker': '#606f7b',
-  'grey-dark': '#8795a1',
-  'grey': '#b8c2cc',
-  'grey-light': '#dae1e7',
-  'grey-lighter': '#f1f5f8',
-  'grey-lightest': '#f8fafc',
-  'white': '#ffffff',
-
-  'red-darkest': '#3b0d0c',
-  'red-darker': '#621b18',
-  'red-dark': '#cc1f1a',
-  'red': '#e3342f',
-  'red-light': '#ef5753',
-  'red-lighter': '#f9acaa',
-  'red-lightest': '#fcebea',
-
-  'orange-darkest': '#462a16',
-  'orange-darker': '#613b1f',
-  'orange-dark': '#de751f',
-  'orange': '#f6993f',
-  'orange-light': '#faad63',
-  'orange-lighter': '#fcd9b6',
-  'orange-lightest': '#fff5eb',
-
-  'yellow-darkest': '#453411',
-  'yellow-darker': '#684f1d',
-  'yellow-dark': '#f2d024',
-  'yellow': '#ffed4a',
-  'yellow-light': '#fff382',
-  'yellow-lighter': '#fff9c2',
-  'yellow-lightest': '#fcfbeb',
-
-  'green-darkest': '#0f2f21',
-  'green-darker': '#1a4731',
-  'green-dark': '#1f9d55',
-  'green': '#38c172',
-  'green-light': '#51d88a',
-  'green-lighter': '#a2f5bf',
-  'green-lightest': '#e3fcec',
-
-  'teal-darkest': '#0d3331',
-  'teal-darker': '#20504f',
-  'teal-dark': '#38a89d',
-  'teal': '#4dc0b5',
-  'teal-light': '#64d5ca',
-  'teal-lighter': '#a0f0ed',
-  'teal-lightest': '#e8fffe',
-
-  'blue-darkest': '#12283a',
-  'blue-darker': '#1c3d5a',
-  'blue-dark': '#2779bd',
-  'blue': '#3490dc',
-  'blue-light': '#6cb2eb',
-  'blue-lighter': '#bcdefa',
-  'blue-lightest': '#eff8ff',
-
-  'indigo-darkest': '#191e38',
-  'indigo-darker': '#2f365f',
-  'indigo-dark': '#5661b3',
-  'indigo': '#6574cd',
-  'indigo-light': '#7886d7',
-  'indigo-lighter': '#b2b7ff',
-  'indigo-lightest': '#e6e8ff',
-
-  'purple-darkest': '#21183c',
-  'purple-darker': '#382b5f',
-  'purple-dark': '#794acf',
-  'purple': '#9561e2',
-  'purple-light': '#a779e9',
-  'purple-lighter': '#d6bbfc',
-  'purple-lightest': '#f3ebff',
-
-  'pink-darkest': '#451225',
-  'pink-darker': '#6f213f',
-  'pink-dark': '#eb5286',
-  'pink': '#f66d9b',
-  'pink-light': '#fa7ea8',
-  'pink-lighter': '#ffbbca',
-  'pink-lightest': '#ffebef',
-}
-
-module.exports = {
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Colors                                  https://tailwindcss.com/docs/colors
-  |-----------------------------------------------------------------------------
-  |
-  | The color palette defined above is also assigned to the "colors" key of
-  | your Tailwind config. This makes it easy to access them in your CSS
-  | using Tailwind's config helper. For example:
-  |
-  | .error { color: config('colors.red') }
-  |
-  */
-
-  colors: colors,
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Screens                      https://tailwindcss.com/docs/responsive-design
-  |-----------------------------------------------------------------------------
-  |
-  | Screens in Tailwind are translated to CSS media queries. They define the
-  | responsive breakpoints for your project. By default Tailwind takes a
-  | "mobile first" approach, where each screen size represents a minimum
-  | viewport width. Feel free to have as few or as many screens as you
-  | want, naming them in whatever way you'd prefer for your project.
-  |
-  | Tailwind also allows for more complex screen definitions, which can be
-  | useful in certain situations. Be sure to see the full responsive
-  | documentation for a complete list of options.
-  |
-  | Class name: .{screen}:{utility}
-  |
-  */
-
-  screens: {
-    'sm': '576px',
-    'md': '768px',
-    'lg': '992px',
-    'xl': '1200px',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Fonts                                    https://tailwindcss.com/docs/fonts
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your project's font stack, or font families.
-  | Keep in mind that Tailwind doesn't actually load any fonts for you.
-  | If you're using custom fonts you'll need to import them prior to
-  | defining them here.
-  |
-  | By default we provide a native font stack that works remarkably well on
-  | any device or OS you're using, since it just uses the default fonts
-  | provided by the platform.
-  |
-  | Class name: .font-{name}
-  |
-  */
-
-  fonts: {
-    'sans': [
-      'system-ui',
-      'BlinkMacSystemFont',
-      '-apple-system',
-      'Segoe UI',
-      'Roboto',
-      'Oxygen',
-      'Ubuntu',
-      'Cantarell',
-      'Fira Sans',
-      'Droid Sans',
-      'Helvetica Neue',
-      'sans-serif',
-    ],
-    'serif': [
-      'Constantia',
-      'Lucida Bright',
-      'Lucidabright',
-      'Lucida Serif',
-      'Lucida',
-      'DejaVu Serif',
-      'Bitstream Vera Serif',
-      'Liberation Serif',
-      'Georgia',
-      'serif',
-    ],
-    'mono': [
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      'Liberation Mono',
-      'Courier New',
-      'monospace',
-    ],
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Text sizes                         https://tailwindcss.com/docs/text-sizing
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your text sizes. Name these in whatever way
-  | makes the most sense to you. We use size names by default, but
-  | you're welcome to use a numeric scale or even something else
-  | entirely.
-  |
-  | By default Tailwind uses the "rem" unit type for most measurements.
-  | This allows you to set a root font size which all other sizes are
-  | then based on. That said, you are free to use whatever units you
-  | prefer, be it rems, ems, pixels or other.
-  |
-  | Class name: .text-{size}
-  |
-  */
-
-  textSizes: {
-    'xs': '.75rem',     // 12px
-    'sm': '.875rem',    // 14px
-    'base': '1rem',     // 16px
-    'lg': '1.125rem',   // 18px
-    'xl': '1.25rem',    // 20px
-    '2xl': '1.5rem',    // 24px
-    '3xl': '1.875rem',  // 30px
-    '4xl': '2.25rem',   // 36px
-    '5xl': '3rem',      // 48px
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Font weights                       https://tailwindcss.com/docs/font-weight
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your font weights. We've provided a list of
-  | common font weight names with their respective numeric scale values
-  | to get you started. It's unlikely that your project will require
-  | all of these, so we recommend removing those you don't need.
-  |
-  | Class name: .font-{weight}
-  |
-  */
-
-  fontWeights: {
-    'hairline': 100,
-    'thin': 200,
-    'light': 300,
-    'normal': 400,
-    'medium': 500,
-    'semibold': 600,
-    'bold': 700,
-    'extrabold': 800,
-    'black': 900,
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Leading (line height)              https://tailwindcss.com/docs/line-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your line height values, or as we call
-  | them in Tailwind, leadings.
-  |
-  | Class name: .leading-{size}
-  |
-  */
-
-  leading: {
-    'none': 1,
-    'tight': 1.25,
-    'normal': 1.5,
-    'loose': 2,
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Tracking (letter spacing)       https://tailwindcss.com/docs/letter-spacing
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your letter spacing values, or as we call
-  | them in Tailwind, tracking.
-  |
-  | Class name: .tracking-{size}
-  |
-  */
-
-  tracking: {
-    'tight': '-0.05em',
-    'normal': '0',
-    'wide': '0.05em',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Text colors                         https://tailwindcss.com/docs/text-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your text colors. By default these use the
-  | color palette we defined above, however you're welcome to set these
-  | independently if that makes sense for your project.
-  |
-  | Class name: .text-{color}
-  |
-  */
-
-  textColors: colors,
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Background colors             https://tailwindcss.com/docs/background-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your background colors. By default these use
-  | the color palette we defined above, however you're welcome to set
-  | these independently if that makes sense for your project.
-  |
-  | Class name: .bg-{color}
-  |
-  */
-
-  backgroundColors: colors,
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Background sizes               https://tailwindcss.com/docs/background-size
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your background sizes. We provide some common
-  | values that are useful in most projects, but feel free to add other sizes
-  | that are specific to your project here as well.
-  |
-  | Class name: .bg-{size}
-  |
-  */
-
-  backgroundSize: {
-    'auto': 'auto',
-    'cover': 'cover',
-    'contain': 'contain',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border widths                     https://tailwindcss.com/docs/border-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border widths. Take note that border
-  | widths require a special "default" value set as well. This is the
-  | width that will be used when you do not specify a border width.
-  |
-  | Class name: .border{-side?}{-width?}
-  |
-  */
-
-  borderWidths: {
-    default: '1px',
-    '0': '0',
-    '2': '2px',
-    '4': '4px',
-    '8': '8px',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border colors                     https://tailwindcss.com/docs/border-color
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border colors. By default these use the
-  | color palette we defined above, however you're welcome to set these
-  | independently if that makes sense for your project.
-  |
-  | Take note that border colors require a special "default" value set
-  | as well. This is the color that will be used when you do not
-  | specify a border color.
-  |
-  | Class name: .border-{color}
-  |
-  */
-
-  borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Border radius                    https://tailwindcss.com/docs/border-radius
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your border radius values. If a `default` radius
-  | is provided, it will be made available as the non-suffixed `.rounded`
-  | utility.
-  |
-  | If your scale includes a `0` value to reset already rounded corners, it's
-  | a good idea to put it first so other values are able to override it.
-  |
-  | Class name: .rounded{-side?}{-size?}
-  |
-  */
-
-  borderRadius: {
-    'none': '0',
-    'sm': '.125rem',
-    default: '.25rem',
-    'lg': '.5rem',
-    'full': '9999px',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Width                                    https://tailwindcss.com/docs/width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your width utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based numeric scale, a percentage
-  | based fraction scale, plus some other common use-cases. You
-  | can, of course, modify these values as needed.
-  |
-  |
-  | It's also worth mentioning that Tailwind automatically escapes
-  | invalid CSS class name characters, which allows you to have
-  | awesome classes like .w-2/3.
-  |
-  | Class name: .w-{size}
-  |
-  */
-
-  width: {
-    'auto': 'auto',
-    'px': '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '64': '16rem',
-    '1/2': '50%',
-    '1/3': '33.33333%',
-    '2/3': '66.66667%',
-    '1/4': '25%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.66667%',
-    '5/6': '83.33333%',
-    'full': '100%',
-    'screen': '100vw',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Height                                  https://tailwindcss.com/docs/height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your height utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based numeric scale plus some other
-  | common use-cases. You can, of course, modify these values as
-  | needed.
-  |
-  | Class name: .h-{size}
-  |
-  */
-
-  height: {
-    'auto': 'auto',
-    'px': '1px',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '24': '6rem',
-    '32': '8rem',
-    '48': '12rem',
-    '64': '16rem',
-    'full': '100%',
-    'screen': '100vh',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Minimum width                        https://tailwindcss.com/docs/min-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your minimum width utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | couple common use-cases by default. You can, of course, modify
-  | these values as needed.
-  |
-  | Class name: .min-w-{size}
-  |
-  */
-
-  minWidth: {
-    '0': '0',
-    'full': '100%',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Minimum height                      https://tailwindcss.com/docs/min-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your minimum height utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | few common use-cases by default. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .min-h-{size}
-  |
-  */
-
-  minHeight: {
-    '0': '0',
-    'full': '100%',
-    'screen': '100vh',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Maximum width                        https://tailwindcss.com/docs/max-width
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your maximum width utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. By default
-  | we provide a sensible rem based scale and a "full width" size,
-  | which is basically a reset utility. You can, of course,
-  | modify these values as needed.
-  |
-  | Class name: .max-w-{size}
-  |
-  */
-
-  maxWidth: {
-    'xs': '20rem',
-    'sm': '30rem',
-    'md': '40rem',
-    'lg': '50rem',
-    'xl': '60rem',
-    '2xl': '70rem',
-    '3xl': '80rem',
-    '4xl': '90rem',
-    '5xl': '100rem',
-    'full': '100%',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Maximum height                      https://tailwindcss.com/docs/max-height
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your maximum height utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. We provide a
-  | couple common use-cases by default. You can, of course, modify
-  | these values as needed.
-  |
-  | Class name: .max-h-{size}
-  |
-  */
-
-  maxHeight: {
-    'full': '100%',
-    'screen': '100vh',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Padding                                https://tailwindcss.com/docs/padding
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your padding utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default we
-  | provide a sensible rem based numeric scale plus a couple other
-  | common use-cases like "1px". You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .p{side?}-{size}
-  |
-  */
-
-  padding: {
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Margin                                  https://tailwindcss.com/docs/margin
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your margin utility sizes. These can be
-  | percentage based, pixels, rems, or any other units. By default we
-  | provide a sensible rem based numeric scale plus a couple other
-  | common use-cases like "1px". You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .m{side?}-{size}
-  |
-  */
-
-  margin: {
-    'auto': 'auto',
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Negative margin                https://tailwindcss.com/docs/negative-margin
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your negative margin utility sizes. These can
-  | be percentage based, pixels, rems, or any other units. By default we
-  | provide matching values to the padding scale since these utilities
-  | generally get used together. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .-m{side?}-{size}
-  |
-  */
-
-  negativeMargin: {
-    'px': '1px',
-    '0': '0',
-    '1': '0.25rem',
-    '2': '0.5rem',
-    '3': '0.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '8': '2rem',
-    '10': '2.5rem',
-    '12': '3rem',
-    '16': '4rem',
-    '20': '5rem',
-    '24': '6rem',
-    '32': '8rem',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Shadows                                https://tailwindcss.com/docs/shadows
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your shadow utilities. As you can see from
-  | the defaults we provide, it's possible to apply multiple shadows
-  | per utility using comma separation.
-  |
-  | If a `default` shadow is provided, it will be made available as the non-
-  | suffixed `.shadow` utility.
-  |
-  | Class name: .shadow-{size?}
-  |
-  */
-
-  shadows: {
-    default: '0 2px 4px 0 rgba(0,0,0,0.10)',
-    'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
-    'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
-    'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-    'outline': '0 0 0 3px rgba(52,144,220,0.5)',
-    'none': 'none',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Z-index                                https://tailwindcss.com/docs/z-index
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your z-index utility values. By default we
-  | provide a sensible numeric scale. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .z-{index}
-  |
-  */
-
-  zIndex: {
-    'auto': 'auto',
-    '0': 0,
-    '10': 10,
-    '20': 20,
-    '30': 30,
-    '40': 40,
-    '50': 50,
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Opacity                                https://tailwindcss.com/docs/opacity
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your opacity utility values. By default we
-  | provide a sensible numeric scale. You can, of course, modify these
-  | values as needed.
-  |
-  | Class name: .opacity-{name}
-  |
-  */
-
-  opacity: {
-    '0': '0',
-    '25': '.25',
-    '50': '.5',
-    '75': '.75',
-    '100': '1',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | SVG fill                                   https://tailwindcss.com/docs/svg
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your SVG fill colors. By default we just provide
-  | `fill-current` which sets the fill to the current text color. This lets you
-  | specify a fill color using existing text color utilities and helps keep the
-  | generated CSS file size down.
-  |
-  | Class name: .fill-{name}
-  |
-  */
-
-  svgFill: {
-    'current': 'currentColor',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | SVG stroke                                 https://tailwindcss.com/docs/svg
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you define your SVG stroke colors. By default we just provide
-  | `stroke-current` which sets the stroke to the current text color. This lets
-  | you specify a stroke color using existing text color utilities and helps
-  | keep the generated CSS file size down.
-  |
-  | Class name: .stroke-{name}
-  |
-  */
-
-  svgStroke: {
-    'current': 'currentColor',
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Modules                  https://tailwindcss.com/docs/configuration#modules
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you control which modules are generated and what variants are
-  | generated for each of those modules.
-  |
-  | Currently supported variants:
-  |   - responsive
-  |   - hover
-  |   - focus
-  |   - focus-within
-  |   - active
-  |   - group-hover
-  |
-  | To disable a module completely, use `false` instead of an array.
-  |
-  */
-
-  modules: {
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundColors: ['responsive', 'hover', 'focus'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderCollapse: [],
-    borderColors: ['responsive', 'hover', 'focus'],
-    borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
-    borderWidths: ['responsive'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    flexbox: ['responsive'],
-    float: ['responsive'],
-    fonts: ['responsive'],
-    fontWeights: ['responsive', 'hover', 'focus'],
-    height: ['responsive'],
-    leading: ['responsive'],
-    lists: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    negativeMargin: ['responsive'],
-    objectFit: false,
-    objectPosition: false,
-    opacity: ['responsive'],
-    outline: ['focus'],
-    overflow: ['responsive'],
-    padding: ['responsive'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    shadows: ['responsive', 'hover', 'focus'],
-    svgFill: [],
-    svgStroke: [],
-    tableLayout: ['responsive'],
-    textAlign: ['responsive'],
-    textColors: ['responsive', 'hover', 'focus'],
-    textSizes: ['responsive'],
-    textStyle: ['responsive', 'hover', 'focus'],
-    tracking: ['responsive'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    zIndex: ['responsive'],
-  },
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Plugins                                https://tailwindcss.com/docs/plugins
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you can register any plugins you'd like to use in your
-  | project. Tailwind's built-in `container` plugin is enabled by default to
-  | give you a Bootstrap-style responsive container component out of the box.
-  |
-  | Be sure to view the complete plugin documentation to learn more about how
-  | the plugin system works.
-  |
-  */
-
-  plugins: [
-    require('tailwindcss/plugins/container')({
-      // center: true,
-      // padding: '1rem',
-    }),
-  ],
-
-
-  /*
-  |-----------------------------------------------------------------------------
-  | Advanced Options         https://tailwindcss.com/docs/configuration#options
-  |-----------------------------------------------------------------------------
-  |
-  | Here is where you can tweak advanced configuration options. We recommend
-  | leaving these options alone unless you absolutely need to change them.
-  |
-  */
-
-  options: {
-    prefix: '',
-    important: false,
-    separator: ':',
-  },
-
-}