nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt

Home Page:https://tailwindcss.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Configuring theme>colors>primary causes the color value to be the only primary color.

yi-boide opened this issue · comments

Configuring theme>colors>primary causes the color value to be the only primary color.
This is the configuration of tailwind.config.ts that I changed once

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    colors: {
      primary: '#d81e06'
    }
  },
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(['mdi', 'heroicons'])
    })
  ]
};

image

I added the original property, or I removed the primary and removed all the dependencies, reintroduced, and then restarted with only one primary color value and no other colors.

/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme';
import type { Config } from 'tailwindcss';
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    colors: {
      primary: '#d81e06',
      ...defaultTheme.colors
    }
  },
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(['mdi', 'heroicons'])
    })
  ]
};

This is a minimal implementation that runs directly after the dependency is installed.
Then unwrap the comment section and run it again. The effect is the same.

Duplicate address code

Yes, this is desired behaviour. Please refer the docs - https://tailwindcss.com/docs/customizing-colors#using-custom-colors

Updating colors: {} means replacing the default color palette.

If you want continue using default colors, please make use of tailwindcss/colors; read https://tailwindcss.com/docs/customizing-colors#using-the-default-colors.

Your file contents will rather be:

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';
import * as colors from 'tailwindcss/colors';

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    colors: {
      primary: '#d81e06',
      ...colors,
    },
  },
};