@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'),
    ]),
  ],
};

License

MIT License © 2023 u3u