@bigpicturemedical/medkit-config-tailwind v0.6.0

Tailwind Config

Installation:

yarn add @bigpicturemedical/medkit-config-tailwind

Usage:

1. Install required deps (tailwind + postcss) :

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

yarn add @bigpicturemedical/medkit-tokens

2. Add config in the tailwind.config.js:

module.exports = require("@bigpicturemedical/medkit-config-tailwind");

3. Create a postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

4. Inject tokens in the vue.config.js file:

 ...
   css: {
    loaderOptions: {
      sass: {
        additionalData:
          '@import "@bigpicturemedical/medkit-tokens/src/stylesheets/tokens.scss";'
      }
    }
  }

5. Add style in the Vue entry file :

import '@bigpicturemedical/medkit-config-tailwind/build/style.css';