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

materail-design material3 tailwindcss tailwindcss-plugin

Last synced: about 2 months 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 (about 1 year ago)
• Last Synced: 2024-07-09T15:24:28.063Z (3 months ago)
• Topics: materail-design, material3, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwind-material-3
• Size: 396 KB
• Stars: 4
• 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!**