Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rinturaj/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
https://github.com/rinturaj/tailwind-material-3
contributions-welcome good-first-issue materail-design material3 need-help tailwindcss tailwindcss-plugin
Last synced: 9 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/rinturaj/tailwind-material-3
- Owner: rinturaj
- License: mit
- Created: 2023-04-08T17:15:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-22T11:50:48.000Z (over 1 year ago)
- Last Synced: 2024-10-30T10:06:07.937Z (15 days ago)
- Topics: contributions-welcome, good-first-issue, materail-design, material3, need-help, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/tailwind-material-3
- Size: 396 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```bash
npm install -D tailwindcss
npx tailwindcss init
```
### Step 2
Install **`tailwind-material-3`** via npm.
```bash
npm 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.
```jsx
const { default: useMD3 } = require('tailwind-material-3');
module.exports = useMD3({
content: ["./src/**/*.{html,js}"],
theme: {
colors: {
primary: "#9cd67d",
blue: "#8116f3",
},
extend: {},
},
plugins: [],
})
```
### Step 4
Add the **`@tailwind`** directives for each of Tailwind’s layers to your main CSS file.
```sass
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### Step 5
Start using the components in your HTML code!
```html
filled-btn
disabled filled-btn
filled-tonal-btn
outlined-btn
```
**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!**