circletone/tailwind.preset.js

var colors = require('tailwindcss/colors');
var plugin = require('tailwindcss/plugin');
var customThemePlugin = plugin.withOptions(
  function (options) {
    return function ({ addUtilities, theme }) {
      const newColors = options.colors || theme('colors');
      const newFontFamily = options.fontFamily || theme('fontFamily');

      addUtilities({
        '.custom-color': { color: newColors.primary.DEFAULT },
        '.custom-font': { fontFamily: newFontFamily.primary },
      });
    };
  },
  function (options) {
    return {
      theme: {
        colors: options.colors,
        fontFamily: options.fontFamily,
      },
    };
  }
);

/** @type {import('tailwindcss').Config} */

module.exports = {
  plugins: [
    require('tailwindcss/colors'),
    customThemePlugin({
      colors: {
        ...colors,
        primary: {
          DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
          dark: 'rgb(var(--primary-dark) / <alpha-value>)',
          variation: 'rgb(var(--primary-variation) / <alpha-value>)',
          'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
        },
        secondary: {
          DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
          dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
        },
        background: {
          DEFAULT: 'rgb(var(--background) / <alpha-value>)',
          dark: 'rgb(var(--background-dark) / <alpha-value>)',
        },
        surface: {
          DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
          variation: 'rgb(var(--surface-variation) / <alpha-value>)',
          dark: 'rgb(var(--surface-dark) / <alpha-value>)',
          'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
        },
        accent: {
          DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
          dark: 'rgb(var(--accent-dark) / <alpha-value>)',
        },
        on: {
          primary: 'rgb(var(--on-primary) / <alpha-value>)',
          'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
          secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
          'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
          accent: 'rgb(var(--on-accent) / <alpha-value>)',
          background: 'rgb(var(--on-background) / <alpha-value>)',
          'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
          surface: 'rgb(var(--on-surface) / <alpha-value>)',
          'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
          'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
          'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
          'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
          'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
          'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
          'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
          'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
          'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
          'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
        },
      },
      fontFamily: {
        primary: 'var(--font-primary)',
        title: 'var(--font-title)',
        logo: 'var(--font-logo)',
      },
    }),
  ],
};