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>