Skip to content

Files

design-system-tailwind-preset

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 21, 2024
Jan 15, 2025
Oct 16, 2024
Oct 16, 2024
Oct 17, 2024
Oct 18, 2024
Feb 3, 2025
Oct 29, 2024
Oct 24, 2024

@metamask/design-system-tailwind-preset

Design System Tailwind CSS preset for MetaMask projects

Installation

yarn add @metamask/design-system-tailwind-preset

or

npm install @metamask/design-system-tailwind-preset

Usage

To use the MetaMask Design System Tailwind CSS preset in your project, follow these steps:

  1. Install the package as described in the Installation section above.

  2. In your tailwind.config.js file, import and use the preset:

module.exports = {
  presets: [require('@metamask/design-system-tailwind-preset')],
  // ...
};
<div class="bg-background-default text-text-default">
  <h1 class="font-s-heading-lg sm:font-l-heading-lg">Welcome to MetaMask</h1>
  <p class="font-s-body-md sm:font-l-body">
    Enjoy our consistent design across projects!
  </p>
</div>

Customization

You can override or extend the preset's configurations in your tailwind.config.js file:

module.exports = {
  presets: [require('@metamask/design-system-tailwind-preset')],
  theme: {
    extend: {
      // Your custom extensions...
    },
  },
  // Other Tailwind configurations...
};

Documentation

For more information on how to use Tailwind CSS and configure your project, refer to the official Tailwind CSS documentation:

Contributing

This package is part of a monorepo. Instructions for contributing can be found in the monorepo README.