Installation

Get started with Tailwind Material

Tailwind Material works with all frameworks only being imported in the tailwind.config.ts

1

Install Tailwind CSS & Library

Install tailwindcss via npm, and create your tailwind.config.ts file.


      npm install -D tailwindcss
      npx tailwindcss init
      npm install tailwind-material
      
2

Import the library

Import the library in tailwind.config.ts file in the plugins array and pass the color pallet.

      import material from 'tailwind-material';

      module.exports = {
        content: ["./src/**/*.{html,js}"],
        theme: {
          extend: {},
        },
        plugins: [material({ primary: '#FF5722' })],
      }
  
3

Set the data-theme in the html body

Set the data-theme attribute in index.html file with code or by hand.

      <!doctype html>
        <html lang="en">
          <head>
            <meta charset="utf-8" />
            <link rel="icon" href="./favicon.png" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" /> <!-- Optional for google icons -->
          </head>
          <body></body>
          <script>
            // Check if the user prefers dark mode spaghetti code tho...
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
              document.documentElement.setAttribute('data-theme', 'dark');
            } else {
              document.documentElement.setAttribute('data-theme', 'light');
            }	
          </script>
        </html>
          

Or

      <!doctype html>
        <html lang="en" data-theme="light"> <!-- This is the important one  -->
          <head>
            <meta charset="utf-8" />
            <link rel="icon" href="./favicon.png" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" /> <!-- Optional for google icons -->
          </head>
          <body></body>
        </html>