@ama-pt/agora-design-system 0.11.3 → 0.11.5

package/README.md

@@ -46,20 +46,34 @@ In order to reduce bundle size, we needed do strip some classes from the bundle.
 > 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:
+- Add the @tailwind directives for each of Tailwind’s layers to your main CSS file
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
 
-```js
-const { AgoraTailwindConfig } = require('@ama-pt/agora-design-system');
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['src/**/*.tsx'],
+- Open tailwind.config.ts, 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:
+
+```typescript
+import { AgoraTailwindConfig } from "@ama-pt/agora-design-system";
+import type { Config } from "tailwindcss";
+
+const TailwindConfig: Config = {
+  content: ["src/**/*.{ts,tsx}"],
   theme: AgoraTailwindConfig.theme,
-  plugins: AgoraTailwindConfig.plugins
+  plugins: AgoraTailwindConfig.plugins,
+  safelist: AgoraTailwindConfig.safelist,
+  corePlugins: {
+    preflight: false,
+  },
 };
+
+export default TailwindConfig;
 ```
 
-- import the css style file that exists in node_modules folder
+- import the css style file that exists in node_modules folder into your layout.tsx file (if working with NextJS) or index.tsx (if working with React only)
 
 ```typescript
 //  typescript import
@@ -71,12 +85,13 @@ import '@ama-pt/agora-design-system/dist/style.css';
 
 ## Overriding Tailwind configuration
 
-To override any tailwind config you need to update the config file as explained in the following example:
+To override any tailwind config you need to update the tailwind.config.ts file as explained in the following example:
 
-```js
-const { AgoraTailwindConfig } = require('@ama-pt/agora-design-system');
+```typescript
+import { AgoraTailwindConfig } from "@ama-pt/agora-design-system";
+import type { Config } from "tailwindcss";
 
-const TailwindConfig = {
+const TailwindConfig: Config = {
   content: ['src/**/*.tsx'],
   theme: {
     ...AgoraTailwindConfig.theme,
@@ -97,12 +112,10 @@ const TailwindConfig = {
     }
   },
   plugins: AgoraTailwindConfig.plugins,
-  corePlugins: {
-    preflight: false
-  }
+  safelist: AgoraTailwindConfig.safelist,
+  corePlugins: { preflight: false },
 };
 
-/** @type {import('tailwindcss').Config} */
 export default TailwindConfig;
 ```