How to use Minclass

1. Install necessary libraries to process sass and tailwind.

   # ===========================
   # 1. INSTALL SASS SUPPORT
   # ===========================
   pnpm --save-dev add sass
   
   
   # ===========================
   # 2. INSTALL TAILWIND SUPPORT
   # ===========================
   # 2a. OPTION A (for Astro)
   # OR, in Astro, install Tailwind this way
   pnpm astro add tailwind
   # RUN INSTALL COMMAND:     yes
   # CREATE GLOBAL css FILE:  yes
   # UPDATE CONFIG FILE:      yes
   
   # And make sure the `astro.config.mjs` file has the following.
   export default defineConfig({
     ...
   
     vite: {
       plugins: [
         tailwindcss(),
         ...
       ]
   
   ...
   })
   
   # 2b. OPTION B (for other framework)
   pnpm --save-dev add @tailwindcss/vite
   pnpm --save-dev add tailwindcss

2. Copy the global.scss code from here (/src/styles/global.scss)
3. Copy the scripts.js code from here (/public/scripts.js)
4. Create a tailwind.css file that only imports a subset of tailwind. (/src/styles/tailwind.css)

   /* DONT import tailwindcss in its entirety directly */
   /* @import "tailwindcss"; */
   
   /* Import specific Tailwind 4 modules, and assign them to CSS layers. */
   /* WARNING: can only be imported in a CSS file (NOT a sass/scss file) */
   @import "tailwindcss/theme" layer(tailwind-theme);
   @import "tailwindcss/utilities" layer(tailwind-utilities);
   /* WARNING: the preflight wipes out ALL HTML's default styling */
   /* @import "tailwindcss/preflight" layer(tailwind-base); */

5. Import the tailwind.css and global.scss files in your main html file.

   // EXAMPLE: In Astro
   ---
   import '../styles/global.scss';
   import '../styles/tailwind.css';
   ---

6. Import the scripts.js file in your main html file.

   {/** scripts that should run at runtime on client side  */}
   <!-- <script src="/scripts.js" type="module" is:inline /> -->
   <script is:inline type="module">
     import { handleAutoResizeTextAreaElements } from '/scripts.js';
     document.addEventListener('DOMContentLoaded', () => {
       handleAutoResizeTextAreaElements();
     });
   </script> 

7. Make necessary adjustments to global.sass file, OR, create a new sass/css file that overrides theme variables.

   /* Example: edit the theme variables */
   @layer base {
     :root {
   
       // Purpose colors
       --color-text: #{$themeTextColor};
       --color-primary: #{$themeColorPrimary};
       --color-secondary: #{$themeColorSecondary};
       --color-warning: #{$themeColorWarning};
       --color-error: #{$themeColorError};
       --color-danger: #{$themeColorDanger};
   
       
       // Defualt fallbacks
       --default-border-radius: #{$inputBorderRadius};
       --default-padding-x: 1rem;
       --default-padding-y: 1rem;
       --default-padding: var(--default-padding-y) var(--default-padding-x);
       --default-line-height: 1.5em;
     }
   }

8. Start creating elements using patterns in elements and elementsDynamic