Update tailwindCSS and purge config

Author: ktquez

package-lock.json

@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/vue-a11y/website#readme",
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.3.0",
+    "@fullhuman/postcss-purgecss": "^3.1.3",
     "@goy/vuepress-plugin-svg-icons": "^4.2.1",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vuepress/plugin-blog": "^1.9.2",
@@ -53,8 +53,10 @@
     "eslint-plugin-vuejs-accessibility": "^0.4.0",
     "gh-pages": "^3.1.0",
     "node-sass": "^4.14.1",
+    "postcss": "^7.0.35",
     "sass-loader": "^9.0.3",
-    "vuepress": "^1.5.4",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "vuepress": "^1.8.0",
     "vuepress-plugin-canonical": "^1.0.0"
   },
   "dependencies": {
@@ -66,7 +68,6 @@
     "@vue-a11y/skip-to": "^2.1.2",
     "@vue/composition-api": "^1.0.0-beta.11",
     "@vueuse/core": "^4.0.0-beta.9",
-    "tailwindcss": "^1.7.6",
     "vue-disqus": "^4.0.1"
   }
 }

package.json

@@ -1,46 +1,6 @@
-const autoprefixer = require('autoprefixer')
-const tailwindcss = require('tailwindcss')
-
-const plugins = [
-  tailwindcss('./tailwind.config.js'),
-  autoprefixer()
-]
-
-if (process.env.NODE_ENV !== 'development') {
-  plugins.push(
-    require('@fullhuman/postcss-purgecss')({
-      whitelist: [
-        'html',
-        'body',
-        'figure',
-        'figcaption',
-        'blockquote',
-        'code',
-        'small',
-        'kbd',
-        'app',
-        'mode-dark',
-        'mode-sepia',
-        'icon',
-        'outbound',
-        'DocSearch'
-      ],
-      whitelistPatterns: [
-        /set-/,
-        /DocSearch-/
-      ],
-      whitelistPatternsChildren: [
-        /content__default$/,
-        /nprogress$/,
-        /search-box$/,
-        /custom-block$/
-      ],
-      content: ['./src/.vuepress/**/*.vue'],
-      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
-    })
-  )
-}
-
 module.exports = {
-  plugins
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
 }

src/.vuepress/config/postcss.js

@@ -105,7 +105,7 @@ export default {
       text-decoration-line: underline;
       text-decoration-color: var(--accent);
       transition: text-decoration .2s;
-      outline: none;
+      outline: none !important;
     }
   }
 }

src/.vuepress/theme/components/CardPost.vue

@@ -7,7 +7,7 @@
       src="/vue-a11y-logo.svg"
       alt="Vue A11y logo"
     >
-    <span class="font-bold sr-only text-22 lg:ml-2 lg:not-sr-only ">Vue A11y</span>
+    <span class="hidden font-bold text-22 lg:ml-2 lg:block">Vue A11y</span>
   </RouterLink>
 </template>
 

src/.vuepress/theme/components/Logo.vue

@@ -75,5 +75,4 @@ export default {
 }
 </script>
 
-<style lang="scss" src="@/theme/styles/base.scss"></style>
-<style src="@/theme/styles/tailwind.css"></style>
+<style lang="scss" src="@/theme/styles/index.scss"></style>

src/.vuepress/theme/layouts/GlobalLayout.vue

@@ -4,31 +4,23 @@
   padding-left: 0;
 }
 
-@media(prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-    animation: none !important;
-    scroll-behavior: auto !important;
-  }
-}
-
 [tabindex]:not([tabindex="-1"]), a, button, input, select, textarea {
   position: relative;
   z-index: 2;
-  outline: 2px solid transparent;
+  outline-width: 3px !important;
+  outline-style: dotted !important;
+  outline-color: transparent;
   outline-offset: 6px;
   transition: outline-offset .1s ease;
 }
 
 *:focus {
   outline-color: var(--color);
-  outline-offset: 3px;
+  outline-offset: 2px !important;
 }
 
 [tabindex="-1"] {
-	outline: 0
+	outline: 0 !important;
 }
 
 .max-char {
@@ -48,3 +40,13 @@ body.set-reduce-motion {
     scroll-behavior: auto !important;
   }
 }
+
+@media(prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}

src/.vuepress/theme/styles/_a11y.scss

@@ -122,7 +122,7 @@
   }
 
   .table-wrapper {
-    @apply w-full overflow-x-auto whitespace-no-wrap;
+    @apply w-full overflow-x-auto whitespace-nowrap;
     @screen lg {
       @apply whitespace-normal;
     }

src/.vuepress/theme/styles/_markdown.scss

@@ -2,36 +2,6 @@
   color: var(--color) !important;
 }
 
-div.search-box {
-  input {
-    background: none;
-    @apply w-full py-5 pl-10 rounded-md bg-secondary c-border-color text-color text-base left-0 z-10;
-
-    &:focus {
-      outline: auto;
-    }
-
-    &.focused {
-      @apply w-full left-0 #{!important};
-    }
-
-    &::placeholder {
-      color: var(--color) !important;
-    }
-  }
-
-  > ul {
-    @apply left-0 mt-4 z-50;
-    @screen lg {
-      @apply ml-8;
-    }
-    @screen xl {
-      @apply ml-16 #{!important};
-      width: 80% !important;
-    }
-  }
-}
-
 ul.pagination {
   .page-item {
     &.active > a {

src/.vuepress/theme/styles/_override.scss

@@ -1,7 +1,6 @@
 @import './themes';
 @import './markdown';
 @import './typography';
-@import './a11y';
 @import './components';
 @import './override';
 @import './custom-blocks';