@u3u/tailwind-config

Features

Common utilities
Common variants
Common animation
Common theme colors
Multiple preset combinations
Tailwind Animated out of the box
Iconify icon sets out of the box
DaisyUI out of the box
NextUI out of the box
Generate theme colors
Generate custom iconify icon sets
Merge presets

Install

pnpm add @u3u/tailwind-config -D

Usage

In your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config')],
};

With DaisyUI

pnpm add daisyui -D

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config/daisyui')],
};

With NextUI

pnpm add @nextui-org/react framer-motion

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config/nextui')],
};

With DaisyUI and NextUI

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config/ui')],
};

With Iconify

This plugin comes from tailwindcss-icons, thanks to the great work of the author!

const { getIconCollections, iconsPlugin, withIcons } = require('@u3u/tailwind-config/icons');
const customIcons = require('./custom-icons.json'); // See Generate Custom Icons

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    // common icon sets
    ...withIcons(),

    // custom icon sets
    iconsPlugin({
      collections: {
        // custom additional icon sets
        custom: customIcons,

        // custom common icon sets
        // https://icon-sets.iconify.design/
        ...getIconCollections(['radix-icons']),
      },
    }),
  ],

  presets: [require('@u3u/tailwind-config')],
};

Generate Custom Icons

Add generate-icons.mjs file

import { generateIconifyIconset, importDirectory } from '@u3u/tailwind-config/generate-iconify-iconset';

const iconSets = [
  // Your `*.svg` directory path
  await importDirectory('./custom-svgs', {
    includeSubDirs: true,
    prefix: 'custom',
  }),
];

await generateIconifyIconset(iconSets);

Then run node generate-icons.mjs to generate custom iconset json files.

Generate Theme colors

Note

Set process.env.THEME env variable to change primary color
you can also set it in files like .env, .env.local.
Example: THEME="#1890ff" astro dev

const { generateColors } = require('@u3u/tailwind-config/generate-colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config')],

  theme: {
    extend: {
      colors: {
        custom: generateColors('#1890ff'),
      },
    },
  },
};

With Base Config (no plugins)

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@u3u/tailwind-config/base')],
};

Merge Presets

const { mergePresets } = require('@u3u/tailwind-config/merge-preset');

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    mergePresets([
      //
      require('@u3u/tailwind-config'),
      require('@u3u/tailwind-config/daisyui'),
    ]),
  ],
};

u3u/tailwind-config