Do not package style.css instead just send tailwind config

README.MD

@@ -56,11 +56,6 @@ To start using the components, please follow the below steps:
     import { Search, X } from 'react-feather';
 
     import { DSRContextProvider } from 'chaya-ui';
-
-    // import styles in your _app.tsx file
-    // make sure that this is the first css file that you importing 
-    // that will allow your styles to overide the package styling
-    import 'chaya-ui/dist/style.css'; 
 
     const AppView = ({ children }: { children: ReactNode }) => (
       <DSRContextProvider
@@ -89,7 +84,26 @@ To start using the components, please follow the below steps:
     - `iconWrapper` lets you wrap icons with a custom component, for example, `react-feather` or `react-icons` so that the icons
     are rendered by the icon library of your choice.
 
-2. Import the components from `chaya-ui` and use them in your application.
+2. Update your `tailwind.config.js` to process styles for components from `chaya-ui`
+
+    ```js
+    const theme = require('chaya-ui/tailwind-theme');
+    
+    /** @type {import('tailwindcss').Config} */
+    module.exports = {
+     content: [
+         'node_modules/chaya-ui/**/*.js',
+         // ...
+     ],
+     // ...
+     theme: {
+         extend: theme,
+     },
+     // ...
+    };
+    ```
+
+3. Import the components from `chaya-ui` and use them in your application.
 
     ```tsx
     import { Button } from 'chaya-ui';

package.json

@@ -6,7 +6,7 @@
     "tailwind": "tailwindcss -i ./src/style.scss -o ./dist/style.css -c ./tailwind.config.cjs",
     "build-components": "rm -rf dist && rollup -c",
     "build-tailwind": "npm run tailwind -- --minify",
-    "build": "npm run build-components && npm run build-tailwind",
+    "build": "npm run build-components",
     "lint": "eslint src/ --ext .ts,.tsx",
     "lint-fix": "eslint --fix src/ --ext .ts,.tsx",
     "watch-tailwind": "npm run tailwind -- --watch",

rollup.config.mjs

@@ -43,4 +43,13 @@ export default [
     output: [{ dir: 'dist', format: 'esm' }],
     plugins: [dts()],
   },
+  {
+    input: 'tailwind-theme.js',
+    output: [
+      {
+        file: 'dist/tailwind-theme.js',
+        format: 'esm',
+      },
+    ],
+  }
 ];

stories/introduction/index.stories.mdx

@@ -61,10 +61,24 @@ This is required for the components to work properly.
 To do this, wrap your application with the `DSRContextProvider` component provided by `chaya-ui`, and pass the relevant
 props to it.
 
-Along with it, you can also import the `chaya-ui` CSS file in your app, to get the styling for the components.
-```tsx
-import 'chaya-ui/dist/style.css';
-```
+Update your `tailwind.config.js` to include the components from `chaya-ui` in the `content` array for TailwindCSS to process.
+
+ ```js
+ const theme = require('chaya-ui/tailwind-theme');
+
+ /** @type {import('tailwindcss').Config} */
+ module.exports = {
+  content: [
+      'node_modules/chaya-ui/**/*.js',
+      // ...
+  ],
+  // ...
+  theme: {
+      extend: theme,
+  },
+  // ...
+ };
+    ```
 
 Here is an example on a AppView wrapper component for a Next.js app, that configures `chaya-ui` for use in the app -
 

tailwind-theme.js

@@ -0,0 +1,42 @@
+export default {
+  colors: {
+    primary: 'var(--primary)',
+    'primary/50': 'var(--primary50)',
+    'primary/10': 'var(--primary10)',
+    'primary-minimal': 'var(--primary-minimal)',
+    'primary-bright': 'var(--primary-bright)',
+    primaryTextColor: 'var(--primaryTextColor)',
+
+    secondary: 'var(--secondary)',
+    'secondary/50': 'var(--secondary50)',
+    'secondary/10': 'var(--secondary10)',
+    'secondary-minimal': 'var(--secondary-minimal)',
+    'secondary-bright': 'var(--secondary-bright)',
+    secondaryTextColor: 'var(--secondaryTextColor)',
+
+    background: 'var(--background)',
+    'background-darken-1': 'var(--background-darken-1)',
+    'background-darken-2': 'var(--background-darken-2)',
+    'background-darken-3': 'var(--background-darken-3)',
+    'background-lighten-1': 'var(--background-lighten-1)',
+    'background-lighten-2': 'var(--background-lighten-2)',
+    'background-lighten-3': 'var(--background-lighten-3)',
+
+    contrast: 'var(--contrast)',
+    'contrast/50': 'var(--contrast50)',
+    color: 'var(--color)',
+  },
+  animation: {
+    'stripes': 'stripes 60s linear infinite',
+  },
+  keyframes: {
+    'stripes': {
+      '0%': { 'background-position': '-200% 0' },
+      '100%': { 'background-position': '200% 0' },
+    },
+  },
+  gridTemplateColumns: {
+    'flexible-fit': 'repeat(auto-fit, minmax(var(--flexible-cols-min-width), 1fr))',
+    'flexible-fill': 'repeat(auto-fill, minmax(var(--flexible-cols-min-width), 1fr))',
+  },
+};

tailwind.config.cjs

@@ -1,52 +1,13 @@
+const theme = require('./tailwind-theme');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
       './src/**/*.{tsx,jsx,ts}',
   ],
   darkMode: 'class',
   theme: {
-    extend: {
-      colors: {
-        primary: 'var(--primary)',
-        'primary/50': 'var(--primary50)',
-        'primary/10': 'var(--primary10)',
-        'primary-minimal': 'var(--primary-minimal)',
-        'primary-bright': 'var(--primary-bright)',
-        primaryTextColor: 'var(--primaryTextColor)',
-
-        secondary: 'var(--secondary)',
-        'secondary/50': 'var(--secondary50)',
-        'secondary/10': 'var(--secondary10)',
-        'secondary-minimal': 'var(--secondary-minimal)',
-        'secondary-bright': 'var(--secondary-bright)',
-        secondaryTextColor: 'var(--secondaryTextColor)',
-
-        background: 'var(--background)',
-        'background-darken-1': 'var(--background-darken-1)',
-        'background-darken-2': 'var(--background-darken-2)',
-        'background-darken-3': 'var(--background-darken-3)',
-        'background-lighten-1': 'var(--background-lighten-1)',
-        'background-lighten-2': 'var(--background-lighten-2)',
-        'background-lighten-3': 'var(--background-lighten-3)',
-
-        contrast: 'var(--contrast)',
-        'contrast/50': 'var(--contrast50)',
-        color: 'var(--color)',
-      },
-      animation: {
-        'stripes': 'stripes 60s linear infinite',
-      },
-      keyframes: {
-        'stripes': {
-          '0%': { 'background-position': '-200% 0' },
-          '100%': { 'background-position': '200% 0' },
-        },
-      },
-      gridTemplateColumns: {
-        'flexible-fit': 'repeat(auto-fit, minmax(var(--flexible-cols-min-width), 1fr))',
-        'flexible-fill': 'repeat(auto-fill, minmax(var(--flexible-cols-min-width), 1fr))'
-      }
-    },
+    extend: theme,
   },
   plugins: [],
 }