@ama-pt/agora-design-system 0.2.3 → 0.3.0

package/README.md

@@ -34,3 +34,29 @@ ADS presents a set of rules and guidelines that must be followed in the design a
 ```sh
 > npm install @ama-pt/agora-design-system
 ```
+
+## Tailwind configuration
+
+In order to reduce bundle size, we needed do strip some classes from the bundle. As result, some of the tailwind classes may not be available out of the box. To have access to all tailwind AgoraDS themed classes you have to do some additional steps.
+
+- Install and initialize tailwindcss
+
+```sh
+> npm install -D tailwindcss postcss autoprefixer
+> npx tailwindcss init -p
+```
+
+- Open tailwind.config.js, set AgoraDS configs, and set the content config with the desired glob to allow tailwind to generate all of the corresponding CSS needed for your project:
+
+```js
+const { AgoraTailwindConfig } = require('@ama-pt/agora-design-system');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['src/**/*.tsx'],
+  theme: AgoraTailwindConfig.theme,
+  plugins: AgoraTailwindConfig.plugins
+};
+```
+
+- Run and test the app...