Feature/upgrade tailwindcss

.babelrc

@@ -8,7 +8,7 @@
     "test": {
       "presets": [
         [
-          "babel-preset-env",
+          "@babel/preset-env",
           {
             "targets": {
               "node": "current"

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.storybook/main.js

@@ -1,13 +1,16 @@
-const path = require('path');
-
 module.exports = {
   stories: ['../src/**/*.stories.@(js|mdx)'],
   addons: [
-    '@storybook/addon-docs',
     '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-    '@storybook/addon-knobs',
-    '@storybook/addon-actions',
-    '@storybook/addon-essentials'
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
   ]
 }

.storybook/preview.js

@@ -3,12 +3,10 @@ import { addDecorator, addParameters } from '@storybook/vue'
 import 'focus-visible'
 import 'svgxuse'
 
-import { withKnobs } from '@storybook/addon-knobs'
-
+import '../assets/styles/tailwind.css'
 // Wrap every story in Alpaca App component
 import AApp from '../src/atoms/app/App.vue'
 
-addDecorator(withKnobs)
 addDecorator(() => ({
   components: { AApp },
   template: `

.storybook/webpack.config.js

@@ -2,39 +2,16 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
 const path = require('path')
 
 module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.scss$/,
-    use: [
-      'vue-style-loader',
-      'css-loader',
-      'sass-loader'
-    ]
-  })
-
-  config.module.rules.push({
-    test: /\.scss$/,
-    use: [
-      {
-        loader: 'postcss-loader',
-        options: {
-          ident: 'postcss',
-          syntax: 'postcss-scss',
-          plugins: [
-            require('tailwindcss'),
-            require('autoprefixer')
-          ]
-        }
-      }
-    ]
-  })
 
   config.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
     exclude: /node_modules/,
-    loader: 'eslint-loader'
+    loader: 'eslint-loader',
+    options: {
+      emitWarning: true
+    }
   })
-
   config.plugins.push(new StyleLintPlugin({
     files: [
       'src/**/*.vue',

.stylelintrc

@@ -4,7 +4,19 @@
     "stylelint-config-rational-order"
   ],
   "rules": {
-    "at-rule-no-unknown": null,
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+        ]
+      }
+    ],
+    "declaration-block-trailing-semicolon": null,
     "no-descending-specificity": null,
     "block-no-empty": null,
     "color-no-invalid-hex": true,