npmpackage.info

Gathering detailed insights and metrics for tailwind-material-3

Gathering detailed insights and metrics for tailwind-material-3

tailwind-material-3 - 2.0.1 | npmpackage.info

tailwind-material-3

Tailwind Material 3 is a library that provides ready-to-use UI components for Tailwind CSS users. It includes a range of customizable components such as buttons, cards, and forms, as well as useful utilities and helpers. Installing Tailwind Material 3 is as easy as running the fo

2.0.1

7

MIT

JavaScript

271.16 kB

Installations

npm install tailwind-material-3

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.16.0

NPM Version

8.11.0

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

3

JavaScript

HTML

CSS

JavaScript (63.63%)

HTML (35.75%)

CSS (0.62%)

Developer

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

7 Stars

25 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Jun 03, 2025

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

2.0.1

Package Id

tailwind-material-3@2.0.1

Unpacked Size

271.16 kB

Size

165.72 kB

File Count

17

NPM Version

8.11.0

Node Version

16.16.0

Published on

Jun 18, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

@tailwindcss/cli deepmerge lodash

Dev Dependencies

2

tailwind-material-colors tailwindcss

Tailwind material 3

Tailwind Material 3 is a library that provides ready-to-use UI components for Tailwind CSS users. It includes a range of customizable components such as buttons, cards, and forms, as well as useful utilities and helpers. Installing Tailwind Material 3 is as easy as running the following

command in your terminal:

npm i tailwind-materilal-3

The library is actively maintained and updated, ensuring that you always have access to the latest and greatest UI components. Give it a try and see how it can help streamline your UI development process!

How to use

To use Tailwind Material 3, first make sure that you have Tailwind CSS installed in your project. Then, simply import the desired components from the library and use them in your HTML code.

Please follow the instructions

Step 1

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

1npm install -D tailwindcss
2npx tailwindcss init

Step 2

Install tailwind-material-3 via npm.

1npm i tailwind-material-3 tailwind-material-colors

Step 3

Add the paths to all of your template files , colors and other config in your tailwind.config.js file.

1const { default: useMD3 } = require('tailwind-material-3');
2
3module.exports = useMD3({
4  content: ["./src/**/*.{html,js}"],
5  theme: {
6    colors: {
7         primary: "#9cd67d",
8         blue: "#8116f3",
9      },
10    extend: {},
11  },
12  plugins: [],
13})

Step 4

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Step 5

Start using the components in your HTML code!

1
2<body>
3  <div class="p-4">
4        <button class="filled-btn">filled-btn</button>      
5        <button class="filled-btn" disabled>disabled filled-btn</button>
6        <button class="filled-tonal-btn">filled-tonal-btn</button>
7        <button class="outlined-btn">outlined-btn</button>
8  </div>
9</body>
10

That's it! Now you know how to use Tailwind Material 3 to streamline your UI development process. Give it a try and see how it can help you save time and effort in building beautiful and functional interfaces. If you have any questions or feedback, feel free to reach out to us. Happy coding!

Empty State

No vulnerabilities found.

Empty State

No security vulnerabilities found.