Intro

Usage

Add preset of colors to your tailwind config:

module.exports = {
  content: [],
  theme: {
    extend: {
      colors: {
        // dark theme
        'dark-primary': '#b687fb', // primary color
        'dark-secondary': '#d5bafd', // close to ↑
        'dark-bg-primary': '#121212', // main background
        'dark-bg-secondary': '#1e1e1e', // complementary background
        'dark-bg-alternative': '#2b2b2b', // complementary background
        'dark-text-primary': '#fff', // primary text
        'dark-text-secondary': '#858585', // lower contrast text
        'dark-success': '#42ff8b', // green
        'dark-warning': '#ffef42', // yellow
        'dark-failure': '#ff9b9b', // red
        // light theme
        'light-primary': '#7303f0', // primary color
        'light-secondary': '#5102a7', // close to ↑
        'light-bg-primary': '#fefefe', // main background
        'light-bg-secondary': '#f9f7fd', // complementary background
        'light-bg-alternative': '#ede7f9', // complementary background
        'light-text-primary': '#000', // primary text
        'light-text-secondary': '#727272', // lower contrast text
        'light-success': '#009b3b', // green
        'light-warning': '#ff9500', // orange
        'light-failure': '#d60000', // red
      },
    },
  },
  plugins: [],
}

Apply these classes to your body tag:

<body className="bg-light-bg-primary text-light-text-primary dark:bg-dark-bg-primary dark:text-dark-text-primary">
  <!-- DOM -->
</body>

In order to enjoy icons that are used in components, install unplugin-icons. The icon set that is being used here is @iconify-json/material-symbols.

Details

Every component is designed for 320 px minimum width, with support for dark and light mode. By default tailwind applies theme that is currently being used in OS/Browser. You can opt out by changing your tailwind config.

Credits

PPUI uses Material Icons by Google, SVG Logos by Gil Barbara and unplugin-icons to manage them with ease.