doc: fixing headings, mention in README.md, adding TailwindCSS steps (Kocal#589)

Author: spekulatius

README.md

@@ -25,6 +25,10 @@ This template allows you to quickly start a web extension containing:
 - [git](https://git-scm.com)
 - [vue-cli 2](https://github.com/vuejs/vue-cli/tree/v2)
 
+## Documentation
+
+The documentation can be found on [vue-web-extension.netlify.app](https://vue-web-extension.netlify.app/). Please check the documentation website and the [open and closed issues](https://github.com/Kocal/vue-web-extension/issues?q=), before raising a new issue.
+
 ## Usage
 
 ```bash

docs/.vuepress/config.js

@@ -38,6 +38,7 @@ module.exports = {
         collapsable: false,
         children: [
           'development/Vue-Devtools',
+          'development/TailwindCSS',
         ],
       },
       {

docs/development/TailwindCSS.md

@@ -0,0 +1,77 @@
+# Adding TailwindCSS Support
+
+Using [TailwindCSS](https://tailwindcss.com/) is optional and needs to be configured, if desired. To style your extension popup or options page using Tailwind, you will need to install the required dependencies and configure the webpack build steps.
+
+Below you find the required steps to configure Vue-Web-Extension for TailwindCSS.
+
+1. Install dependencies `postcss-loader @fullhuman/postcss-purgecss`:
+
+    ``` bash
+    # with npm:
+    npm install postcss-loader @fullhuman/postcss-purgecss tailwindcss --only=dev
+
+    # using yarn:
+    yarn add postcss-loader @fullhuman/postcss-purgecss tailwindcss --dev
+    ```
+
+2. Update your `webpack.config.js` to use `postcss-loader`:
+
+    ``` diff
+        {
+            test: /\.css$/,
+    +        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+    -        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+    ```
+
+3.  Create a file called `postcss.config.js` next to your `webpack.config.js` with the following contents:
+
+    ``` js
+    /* eslint-disable import/no-extraneous-dependencies */
+    const tailwindcss = require('tailwindcss');
+
+    const purgecss = require('@fullhuman/postcss-purgecss')({
+        // Specify the paths to all of the template files in your project
+        content: ['./src/**/*.vue'],
+
+        // Include any special characters you're using in this regular expression
+        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+
+        extractors: [
+            // https://purgecss.com/guides/vue.html
+            {
+                extensions: ['vue'],
+                extractor(content) {
+                    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '');
+                    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
+                },
+            },
+        ],
+
+        whitelist: [],
+        whitelistPatterns: [
+            /-(leave|enter|appear)(|-(to|from|active))$/, // transitions
+            /data-v-.*/, // scoped css
+        ],
+    });
+
+    module.exports = {
+        plugins: [tailwindcss(), ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])],
+    };
+    ```
+
+4. Add Tailwind Directives:
+
+    To make the Tailwind classes available you need to add the following lines to your `src/popup/App.vue`-file:
+
+    ``` vue
+    <style>
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+    </style>
+   ```
+
+   In a similar way you can add it to the options page of course.
+
+Now you should be able to use the commonly used Tailwind classes in your web-extension.

docs/development/Vue-Devtools.md

@@ -1,14 +1,14 @@
-# Using Vue Devtools on your popup
+# Using Vue Devtools in Your Popup
 
 By default, you can't use [Vue Devtools](https://github.com/vuejs/vue-devtools) on your popup page. The issue has already been [discussed](https://github.com/vuejs/vue-devtools/issues/120) in Vue Devtools repository.
 
 The GitHub user [@wujunchuan](https://github.com/wujunchuan) found a solution to make it works anyway.
 
-## Install and run Vue Devtools
+## Install and Run Vue Devtools
 
 Install Vue Devtools (e.g.: `npm i -g @vue/devtools`) and then run `vue-devtools`.
 
-## Configuring your extension
+## Configuring Your Extension
 
 A new window opens, copy the first `<script>` (it should be something like `<script src="http://localhost:8098"></script>`).
 
@@ -58,12 +58,12 @@ You also need to update Content Security Policy of your extension. For this, upd
 },
 ```
 
-::: tip
+::: tip Tips
 1. If running webpack in watch mode, you need to stop and restart webpack to apply configuration changes.
 2. You should disable and re-enable your extension in Chrome, to take care of `manifest.json` changes.
 :::
 
-### Opening your popup
+### Opening Your Popup
 
 After that, you can open your popup and normally you will see a message like `Connected to Vue.js devtools`.
 

docs/intro/production-workflow.md

@@ -1,4 +1,4 @@
-# Production workflow
+# Production Workflow
 
 The following steps describe the intended release process and optional services to use (e.g. Travis).
 

docs/intro/setup.md

@@ -1,4 +1,4 @@
-# Getting started
+# Getting Started
 
 Starting a new extension project using the boilerplate is done using [Vue CLI 2](https://github.com/vuejs/vue-cli/tree/v2#vue-cli--). Installation steps for Vue CLI are provided on the website.