~/css/tailwind-material-design

6 Tailwind Material Design

5 Tailwind1 with JSPublished 2026-10-05Free · no sign-up

Six components in the Material 3 style written with Tailwind utilities: the button family with state layers, an outlined text field, an elevated card, the Material switch, a list with avatars and a basic dialog.

Filter demos

01. Tailwind Material 3 Buttons

TailwindMaterialButtons

Filled, tonal, outlined and text buttons in the Material 3 style. The hover and press state layer is a before: pseudo-element filled with currentColor at 8% and 12% opacity, so it works on any button colour.

View code

<div class="flex flex-wrap gap-2 font-['Roboto','Inter',system-ui,sans-serif] text-sm font-medium tracking-[.01em]">
  <button type="button" class="relative h-10 overflow-hidden rounded-full bg-[#6750a4] px-6 text-white before:absolute before:inset-0 before:bg-current before:opacity-0 hover:before:opacity-[.08] active:before:opacity-[.12] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-[#6750a4]">Save</button>
  <button type="button" class="relative h-10 overflow-hidden rounded-full bg-[#e8def8] px-6 text-[#1d192b] before:absolute before:inset-0 before:bg-current before:opacity-0 hover:before:opacity-[.08] active:before:opacity-[.12] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-[#6750a4]">Duplicate</button>
  <button type="button" class="relative h-10 overflow-hidden rounded-full border border-[#79747e] px-6 text-[#6750a4] before:absolute before:inset-0 before:bg-current before:opacity-0 hover:before:opacity-[.08] active:before:opacity-[.12] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-[#6750a4]">Export</button>
  <button type="button" class="relative h-10 overflow-hidden rounded-full px-3 text-[#6750a4] before:absolute before:inset-0 before:bg-current before:opacity-0 hover:before:opacity-[.08] active:before:opacity-[.12] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-[#6750a4]">Cancel</button>
</div>

02. Tailwind Material Outlined Text Field

TailwindMaterialInput

The Material outlined text field: the label floats into a notch in the border when focused or filled, built with the peer modifier, and helper text sits underneath linked by aria-describedby.

View code

<div class="w-full max-w-xs font-['Roboto','Inter',system-ui,sans-serif]">
  <div class="relative">
    <input id="twmd2" placeholder=" " aria-describedby="twmd2h" class="peer block w-full rounded border border-[#79747e] bg-transparent px-4 py-4 text-base text-[#1d1b20] focus:border-2 focus:border-[#6750a4] focus:px-[15px] focus:py-[15px] focus:outline-none">
    <label for="twmd2" class="pointer-events-none absolute left-3 top-0 -translate-y-1/2 bg-[#f3f5f9] px-1 text-xs text-[#49454f] transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-xs peer-focus:text-[#6750a4] motion-reduce:transition-none">Display name</label>
  </div>
  <p id="twmd2h" class="mx-4 mt-1 text-xs text-[#49454f]">Shown on your public profile</p>
</div>

03. Tailwind Material Elevated Card

TailwindMaterialCard

An elevated Material card with media, a headline, supporting text and two text buttons aligned to the end. The two-layer elevation shadow is a single arbitrary shadow utility.

View code

<article class="w-64 max-w-full overflow-hidden rounded-xl bg-[#fffbfe] font-['Roboto','Inter',system-ui,sans-serif] shadow-[0_1px_2px_rgba(0,0,0,.3),0_1px_3px_1px_rgba(0,0,0,.15)]">
  <div aria-hidden="true" class="h-32 bg-[linear-gradient(#bfdbfe_50%,#15803d_50%)]"></div>
  <div class="px-4 pt-4"><h3 class="text-xl text-[#1d1b20]">Mountain cabin</h3><p class="mt-1 text-sm text-[#49454f]">Two nights in the Tatras, breakfast included.</p></div>
  <div class="flex justify-end gap-2 p-2"><button type="button" class="h-10 rounded-full px-3 text-sm font-medium text-[#6750a4] hover:bg-[#6750a4]/[.08] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[#6750a4]">Details</button><button type="button" class="h-10 rounded-full px-3 text-sm font-medium text-[#6750a4] hover:bg-[#6750a4]/[.08] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[#6750a4]">Book</button></div>
</article>

04. Tailwind Material 3 Switch

TailwindMaterialSwitch

The Material 3 switch: an outlined track with a small handle that grows, moves and fills when switched on. It is a hidden checkbox with role="switch", styled entirely with peer-checked: utilities.

View code

<label class="inline-flex cursor-pointer items-center gap-4 font-['Roboto','Inter',system-ui,sans-serif] text-sm text-[#1d1b20]">
  Wi-Fi
  <input type="checkbox" role="switch" class="peer sr-only" checked>
  <span aria-hidden="true" class="relative h-8 w-[52px] rounded-full border-2 border-[#79747e] bg-[#e7e0ec] transition-colors peer-checked:border-[#6750a4] peer-checked:bg-[#6750a4] peer-focus-visible:outline peer-focus-visible:outline-[3px] peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#6750a4] after:absolute after:left-[6px] after:top-1/2 after:size-4 after:-translate-y-1/2 after:rounded-full after:bg-[#79747e] after:transition-all peer-checked:after:left-[22px] peer-checked:after:size-6 peer-checked:after:bg-white motion-reduce:after:transition-none"></span>
</label>

05. Tailwind Material List with Avatars

TailwindMaterialList

A Material three-line style list: a leading avatar, a headline and supporting text, and trailing metadata. Rows show a state layer on hover, and long supporting text is clamped to one line with truncate.

View code

<ul class="w-full max-w-xs rounded-xl bg-[#fffbfe] py-2 font-['Roboto','Inter',system-ui,sans-serif] shadow-[0_1px_2px_rgba(0,0,0,.3),0_1px_3px_1px_rgba(0,0,0,.15)]">
  <li><a href="#ali" class="flex items-center gap-4 px-4 py-2 hover:bg-[#1d1b20]/[.08] focus-visible:bg-[#1d1b20]/[.12] focus-visible:outline-none"><span aria-hidden="true" class="grid size-10 shrink-0 place-items-center rounded-full bg-[#eaddff] text-sm font-medium text-[#21005d]">A</span><span class="min-w-0 flex-1"><span class="block text-base text-[#1d1b20]">Ali Rahman</span><span class="block truncate text-sm text-[#49454f]">Are we still on for Friday's shoot?</span></span><span class="text-xs text-[#49454f]">10:42</span></a></li>
  <li><a href="#bea" class="flex items-center gap-4 px-4 py-2 hover:bg-[#1d1b20]/[.08] focus-visible:bg-[#1d1b20]/[.12] focus-visible:outline-none"><span aria-hidden="true" class="grid size-10 shrink-0 place-items-center rounded-full bg-[#ffd8e4] text-sm font-medium text-[#31111d]">B</span><span class="min-w-0 flex-1"><span class="block text-base text-[#1d1b20]">Bea Lund</span><span class="block truncate text-sm text-[#49454f]">The new samples arrived this morning</span></span><span class="text-xs text-[#49454f]">Mon</span></a></li>
</ul>

06. Tailwind Material Basic Dialog

TailwindMaterialDialog

A Material 3 basic dialog with a headline, supporting text and two text actions, on a native modal dialog. The surface uses a large 28px radius and a soft tint, and the scrim comes from backdrop: utilities.

View code

<button id="twmd6o" type="button" class="h-10 rounded-full bg-[#6750a4] px-6 font-['Roboto','Inter',system-ui,sans-serif] text-sm font-medium text-white focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 focus-visible:outline-[#6750a4]">Discard draft</button>
<dialog id="twmd6" aria-labelledby="twmd6t" class="w-[min(312px,90vw)] rounded-[28px] bg-[#ece6f0] p-6 font-['Roboto','Inter',system-ui,sans-serif] backdrop:bg-black/30">
  <h3 id="twmd6t" class="text-2xl text-[#1d1b20]">Discard draft?</h3>
  <p class="mt-4 text-sm text-[#49454f]">Your changes to this message will be lost.</p>
  <div class="mt-6 flex justify-end gap-2"><button type="button" data-close class="h-10 rounded-full px-3 text-sm font-medium text-[#6750a4] hover:bg-[#6750a4]/[.08] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[#6750a4]">Cancel</button><button type="button" data-close class="h-10 rounded-full px-3 text-sm font-medium text-[#6750a4] hover:bg-[#6750a4]/[.08] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[#6750a4]">Discard</button></div>
</dialog>

var d = document.getElementById('twmd6');
document.getElementById('twmd6o').onclick = function () { d.showModal(); };
d.querySelectorAll('[data-close]').forEach(function (b) { b.onclick = function () { d.close(); }; });

About these Tailwind Material Design

State layers with before:

A before: layer filled with bg-current at 8% on hover and 12% on press reproduces Material's state layer for any colour.

Colour roles as arbitrary values

The demos use Material's baseline colours such as bg-[#6750a4]; in a project, add them to your theme as primary, surface and outline.

Shapes

Material 3 uses full pills for buttons, 12px for cards and 28px for dialogs; rounded-[28px] covers the last.

Native under the hood

The switch is a checkbox with role="switch", the dialog is a native dialog and the list rows are links, so behaviour is built in.

Frequently asked questions

Is this Google's Material library?

No. These are original Tailwind components inspired by Material 3.

Which font should I use?

Roboto is Material's default; the demos fall back to Inter or the system font.

Is there a CSS version?

Yes, see the CSS Material Design collection.