Tail-material-design NPM

Tail Material Design

What you wanted, now you have it

Tail Material Design is a comprehensive library that brings the power of Material Design to Tailwind CSS. With Tail Material Design, you can easily add modern and visually appealing Material Design styles to your web projects. The library provides pre-defined styles for various components, allowing you to accelerate development and create aesthetically pleasing web apps.

Logo

Website

Key Features:

Seamless integration with Tailwind CSS.
Pre-defined Material Design styles to expedite development.
Modern and visually appealing interface for your web app.
Flexible customization options to meet your project's specific needs.

Installing:

To get started with Tail Material Design, follow these steps:

Install Tailwind CSS in your project (if not already installed)
Install Tail Material Design using your preferred package manager:

pnpm add -D tail-material-design

Import and configure Tail Material Design in your Tailwind CSS configuration file (typically named tailwind.config.js):

import tmd from 'tail-material-design';
import type { Config } from 'tailwindcss';

export default {
    plugins: [tmd]
    
    // rest of your config...
} satisfies Config;

Optional if you don't want to use tailwindcss, you can still use the components from a CDN:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tail-material-design/dist/components/<COMPONENT_NAME>.min.css">
 <!-- or you can use the link with all components -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tail-material-design/dist/components.min.css">

/* As an alternative, you can install the package and import on your css file */
@import url("https://cdn.jsdelivr.net/npm/tail-material-design/dist/components.min.css")

We sugest you use the tailwind-material-colors package

Tailwind-Material-Colors repo Optionally, consider using the tailwind-material-colors package for a better color experience. It will give you a better experience with colors.:

Install it using the package manager of your choice:

pnpm add -D tailwind-material-colors

Import and configure tailwind-material-colors along with Tail Material Design:

import { withMaterialColors } from 'tailwind-material-colors'
import tmd from 'tail-material-design';
export default withMaterialColors({
  // Here, your tailwind config.
  // (Do not specify theme.colors or theme.extend.colors as they will be overwritten).
  plugins: [tmd]
}, {
  // Here, your base colors as HEX values
  // primary is required
  primary: '#ff0000',
  // secondary and/or tertiary are optional, if not set they will be derived from the primary color
  secondary: '#ffff00',
  tertiary: '#0000ff',
  // extra named colors may also be included
  green: '#00ff00'
  blue: '#0000ff'
});

How to Use:

Here's a simple example of how you can leverage the Material Design styles in your web app:

<div class="flex items-center justify-center">
  <button class="btn btn-outlined">Click Here</button>
</div>

What we have already done

Tail Material Design provides a growing collection of Material Design components. Here's an overview of what has already been implemented:

Action
- 👍 Common Buttons
- ❌ Extended FABs
- 👍 Fabs
- ❌ Icon Buttons
- ❌ Segmented Button
Communication
- ❌ Badges
- ❌ Progress Indicator
- ❌ Snackbar
Containment
- 👍 Bottom Sheet
- 👍 Cards
- ❌ Carousel
- ❌ Dialogs
- 👍 Dividers
- 👍 Lists
- ❌ Side Sheets
- ❌ Tooltips
Navigation
- ❌ Bottom App Bar
- ❌ Navigation Bar
- ❌ Navigation Drawer
- ❌ Navigation Rail
- ❌ Search
- ❌ Tabs
- ❌ Top App Bar
Selection
- 👍 Checkbox
- 👍 Chips
- ❌ Date Pickers
- ❌ Menus
- 👍 Radio Buttons
- 👍 Sliders
- 👍 Switch
Text Inputs
- ❌ Text Fields