Merge branch 'release/1.0.0-alpha.7'

.github/workflows/eslint.yml

@@ -0,0 +1,21 @@
+name: Code Quality
+on:
+  pull_request:
+    paths:
+      - '**/**.js'
+      - .github/workflows/eslint.yml
+
+jobs:
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set Node.js 10.x
+      uses: actions/setup-node@v1
+      with:
+        node-version: 10.x
+    - name: npm ci
+      run: npm ci
+    - name: ESLint
+      run: npm run lint

.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+  ],
+};

docs/.vuepress/components/Preview.vue

@@ -87,7 +87,7 @@ import { log } from 'util';
        * @return {String} The CSS to be inserted in the iframe
        */
       async getStyles() {
-        const styles = await import('!to-string-loader!css-loader!postcss-loader!sass-loader!../assets/scss/tailwind.config.scss');
+        const styles = await import('!to-string-loader!css-loader!postcss-loader!../assets/scss/tailwind.config.css');
 
         return styles.default;
       },

docs/.vuepress/config.js

@@ -15,6 +15,7 @@ module.exports = {
         link: '/plugins/',
         items: [
           { text: 'Debug outline', link: '/plugins/debug-outline/' },
+          { text: 'Display', link: '/plugins/display/' },
           { text: 'Grid', link: '/plugins/grid/' },
           { text: 'Typography', link: '/plugins/typography/' },
         ],

docs/configuration/readme.md

@@ -1,3 +1,180 @@
+---
+sidebar: auto
+prev: /guide/
+next: /plugins/
+---
+
 # Configuration
 
-@todo
+This project provides some custom `screens`, `colors` and `z-index` configuration which are described below.
+
+The purpose of this custom configuration is to provide some useful additions to Tailwind CSS while staying as close to its original setup to take advantage of its well written documentation.
+
+## Theme
+
+### Container
+
+The core container plugin is centered by default.
+
+```js{3-5}
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+    },
+  },
+};
+```
+
+[Documentation](https://tailwindcss.com/docs/container#centering-by-default)
+
+### Screens
+
+```js{3-10}
+module.exports = {
+  theme: {
+    screens: {
+      xs: '480px',
+      s: '768px',
+      m: '1024px',
+      l: '1280px',
+      xl: '1440px',
+      xxl: '1920px',
+    },
+  },
+};
+```
+
+[Documentation](https://tailwindcss.com/docs/theme/#screens)
+
+### Colors
+
+```js{3-14}
+module.exports = {
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      white: '#fff',
+      black: '#000',
+      current: 'currentColor',
+    },
+    textColor: theme => theme('colors'),
+    backgroundColor: theme => theme('colors'),
+    fill: theme => theme('colors'),
+    borderColor: theme => theme('colors'),
+    placeholderColor: theme => theme('colors'),
+    stroke: theme => theme('colors'),
+  },
+};
+```
+
+[Documentation](https://tailwindcss.com/docs/theme/#colors)
+
+::: tip
+You should add colors to your project via the `theme.extend` property to not override these defaults.
+:::
+
+### Layers
+
+```js{3-9}
+module.exports = {
+  theme: {
+    zIndex: {
+      goku: '9000',
+      above: '2',
+      default: '1',
+      under: '-1',
+      limbo: '-999',
+    },
+  },
+};
+```
+
+[Documentation](https://tailwindcss.com/docs/z-index/)
+
+::: tip
+You should add new layers to your project via the `theme.extend` property to not override these defaults.
+:::
+
+### Debug outline
+
+The [debug outline plugin](#debug-outline-2) is disabled by default.
+
+```js{3}
+module.exports = {
+  theme: {
+    debugOutline: false,
+  },
+};
+```
+
+### Grid
+
+The [grid plugin](#grid-2) has the following defaults:
+
+```js{3-10}
+module.exports = {
+  theme: {
+    gridPlugin: {
+      gutterWidth: {
+        default: 1,
+        s: 2,
+        l: 3,
+        xxl: 4,
+      },
+    },
+  },
+};
+```
+
+## Variants
+
+We only disable the `hover` and `focus` variants for the `font-weight` utility classes, as it is not recommended to transition between font weights.
+
+```js{3}
+module.exports = {
+  variants: {
+    fontWeight: ['responsive'],
+  },
+};
+```
+
+## Plugins
+
+### Debug outline
+
+Our custom debug outline plugin is used without specific configuration, read its [documentation](/plugins/debug-outline.html) for more informations.
+
+### Grid
+
+Our custom grid plugin is used without specific configuration, read its [documentation](/plugins/grid.html) for more informations.
+
+### Typography
+
+The typography plugin is used with the following configuration:
+
+```js{3-11}
+module.exports = {
+  plugins: [
+    require('tailwindcss-typography')({
+      ellipsis: true,
+      hyphens: true,
+      textUnset: true,
+      caps: true,
+      nums: true,
+      ligatures: true,
+      componentPrefix: 'type-',
+    }),
+  ],
+};
+```
+
+Read our [own documentation](/plugins/typography.html) on its usage and the [plugin's official documentation](https://github.com/benface/tailwindcss-typography#readme) for more informations.
+
+---
+
+## Configuration reference
+
+Discover below the full configuration file of this project, or directly check the [source on Github](https://github.com/studiometa/tailwind-config/blob/develop/src/index.js).
+
+<<< src/index.js

docs/guide/readme.md

@@ -1,5 +1,7 @@
 ---
 sidebar: auto
+prev: false
+next: /configuration/
 ---
 
 # Guide
@@ -30,6 +32,27 @@ module.exports = merge(config, {
   },
 });
 ```
+
+Then, add the Tailwind directives in your global `app.scss` file:
+
+```scss
+// Import Tailwind's base the your project's base
+@tailwind base;
+// @import 'base/...';
+
+// Import Tailwind's components then your project's components
+@tailwind components;
+// @import 'components/...';
+
+// Import Tailwind's utilities then your project's utilities
+@tailwind utilities;
+// @import 'utilities/...';
+```
+
+::: warning
+Do not forget to configure [Purge CSS](https://purgecss.com/) in your project to remove all unused classes from the generated CSS files.
+:::
+
 ## How to and best practices
 
 ### Responsive
@@ -56,7 +79,7 @@ To manage the import of custom utility classes on Tailwind using a preprocessor
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import "./custom-utilities";
+@import 'utilities/custom-utility';
 ```
 
 To create custom utility classes that can be used with the breakpoints defined in our configuration you should declare these utility classes in a `@responsive` directive.
@@ -100,7 +123,7 @@ We can add custom utilities with plugin. The following example generates the sam
 // tailwind.config.js
 module.exports = {
   plugins: [
-    function({ addUtilities }) {
+    ({ addUtilities }) => {
       const newUtilities = {
         '.rotate-0': {
           transform: 'rotate(0deg)',
@@ -114,12 +137,12 @@ module.exports = {
         '.rotate-270': {
           transform: 'rotate(270deg)',
         },
-      }
+      };
 
-      addUtilities(newUtilities, ['responsive', 'hover'])
-    }
-  ]
-}
+      addUtilities(newUtilities, ['responsive', 'hover']);
+    },
+  ],
+};
 ```
 
 Read the [documentation](https://tailwindcss.com/docs/plugins/#adding-utilities) for more informations on plugins.
@@ -234,7 +257,7 @@ This will generate the following CSS:
   /* ... */
 }
 
-@media  (min-width: 1024px) {
+@media (min-width: 1024px) {
   .m\:bg-gradient-brand {
     background-image: linear-gradient(blue, green);
   }

docs/plugins/debug-outline.md

@@ -1,7 +1,7 @@
 ---
 sidebar: auto
 prev: false
-next: ./grid.html
+next: ./display.html
 ---
 
 # Debug Outline
@@ -27,6 +27,23 @@ module.exports = {
 
 Whether the plugin is active or not.
 
+### `debugOutline.prefix`
+
+- Type: `String`
+- Default: `''`
+
+The prefix used by the plugin to prevent conflicts with other classes. It defaults to an empty string. Example usage:
+
+```js{3-5}
+module.exports = {
+  theme: {
+    debugOutline: {
+      prefix: 'custom-',
+    },
+  },
+};
+```
+
 ## Examples
 
 <Preview>

docs/plugins/display.md

@@ -0,0 +1,9 @@
+---
+sidebar: auto
+prev: ./debug-outline.html
+next: ./grid.html
+---
+
+# Display
+
+This plugin is a copy of the [core display plugin](https://github.com/tailwindcss/tailwindcss/blob/master/src/plugins/display.js) but without the `.grid` class which is conflicting with our own [grid plugin](./grid.html).