meilisearch-admin/config/tailwind.config.js

const light = '#FAFAFA';
// const gray = '#EEEDEF';
// const dark = '#55585D';
// const text = '#33373B';

// const  light = '#E5E7EB';
// const secondary = '#374151';
const gray = '#e1dfe2';
const text = '#252526';
const dark = '#1E1E1E';
// const primary = '#2563EB';
const primary = '#ff5caa';

module.exports = {
  content: ['./app/**/*.html', './app/**/*.hbs'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        light,
        gray,
        dark,
        text,
        primary,
      },
    },
    // borderColor: gray,
    emberPowerSelect: (theme) => ({
      default: {
        trigger: {
          borderRadius: theme('borderRadius.default'),
          borderColor: theme('colors.gray'),
          fontSize: theme('fontSize.base'),
          padding: `${theme('spacing.2')} ${theme('spacing.10')} ${theme(
            'spacing.2'
          )} ${theme('spacing.3')}`,
          minHeight: '42px',
          lineHeight: theme('lineHeight.normal'),
          maxWidth: theme('maxWidth.md'),
          zIndex: 0,
          '&:focus': {
            boxShadow: 'none',
            borderColor: theme('colors.primary'),
          },
        },
        dropdown: {
          // color: config.textColor,
          // backgroundColor: config.dropdownBackgroundColor,
          borderColor: theme('colors.gray'),
          // borderWidth: defaultTheme.borderWidth.default,
          // borderRadius: config.dropdownBorderRadius,
          boxShadow: theme('boxShadow.sm'),
          // '&.ember-basic-dropdown-content--in-place': {
          //   width: defaultTheme.width.full
          // },
          // '&.ember-basic-dropdown-content--above': {
          //   transform:
          //     config.dropdownMargin && config.dropdownMargin !== '0'
          //       ? `translateY(calc(-1 * ${config.dropdownMargin}))`
          //       : null,
          //   borderBottomLeftRadius: config.openedBorderRadius,
          //   borderBottomRightRadius: config.openedBorderRadius
          // },
          // '&.ember-basic-dropdown-content--below, &.ember-basic-dropdown-content--in-place': {
          //   transform:
          //     config.dropdownMargin && config.dropdownMargin !== '0'
          //       ? `translateY(${config.dropdownMargin})`
          //       : null,
          //   borderTopLeftRadius: config.openedBorderRadius,
          //   borderTopRightRadius: config.openedBorderRadius
          // }
        },
        options: {
          // listStyle: 'none',
          marginTop: theme('spacing.1'),
          marginBottom: theme('spacing.1'),
          // marginLeft: '0',
          // marginRight: '0',
          // padding: '0',
          // userSelect: 'none',
          // '&[role="listbox"]': {
          //   overflowY: 'auto',
          //   '-webkit-overflow-scrolling': 'touch',
          //   maxHeight: defaultTheme.spacing[48]
          // }
        },
        option: {
          paddingLeft: theme('spacing.4'),
          paddingRight: theme('spacing.4'),
          paddingTop: theme('spacing.2'),
          paddingBottom: theme('spacing.2'),
          // fontSize: theme('fontSize.sm'),
          lineHeight: theme('lineHeight.5'),
          // color: theme('colors.gray.dark'),
          // '&[aria-disabled="true"]': {
          //   color: config.disabledTextColor,
          //   cursor: 'not-allowed'
          // },
          // '&[aria-selected="true"]': {
          //   backgroundColor: theme('colors.primary'),
          //   color: theme('colors.gray-700'),
          // },
          '&[aria-current="true"]': {
            backgroundColor: theme('colors.gray.light'),
            color: null,
          },
        },
        placeholder: {
          // display: 'block',
          // overflowX: 'hidden',
          // whiteSpace: 'nowrap',
          // textOverflow: 'ellipsis',
          // color: config.placeholderTextColor,
          lineHeight: theme('lineHeight.normal'),
        },
        search: {
          paddingBottom: theme('spacing.2'),
        },
        searchInput: {
          borderRadius: theme('borderRadius.default'),
          borderColor: theme('colors.gray'),
          fontSize: theme('fontSize.base'),
          padding: `${theme('spacing.2')} ${theme('spacing.3')}`,
          minHeight: '42px',
          lineHeight: theme('lineHeight.normal'),
          maxWidth: theme('maxWidth.md'),
          '&:focus': {
            boxShadow: 'none',
            borderColor: theme('colors.primary'),
          },
        },
        multipleOptions: {
          // display: 'flex',
          // flexWrap: 'wrap',
          // alignItems: 'center',
          // paddingRight: defaultTheme.spacing[6],
          // marginTop: `-${theme('spacing.1')}`, // Discount to make one line items not take more space
          // marginBottom: `-${theme('spacing.2')}` // Discount marginBottom from option
        },

        multipleOption: {
          // display: 'flex',
          // alignItems: 'center',
          backgroundColor: theme('colors.gray.dark'),
          // color: config.multipleOptionTextColor,
          // borderRadius: config.multipleOptionBorderRadius,
          // fontSize: defaultTheme.fontSize.sm,
          // lineHeight: defaultTheme.lineHeight.tight,
          // paddingTop: defaultTheme.spacing[1],
          // paddingRight: defaultTheme.spacing[2],
          // paddingBottom: defaultTheme.spacing[1],
          // paddingLeft: defaultTheme.spacing[1],
          // marginRight: defaultTheme.spacing[1],
          // marginBottom: 0,
          // '&:first-child': {
          //   marginLeft: 0
          // },
          // '&:last-child': {
          //   marginRight: 0
          // }
        },
        // multipleRemoveBtn: {
        //   lineHeight: defaultTheme.lineHeight.tight,
        //   display: 'inline-block',
        //   cursor: 'pointer',
        //   textIndent: '-9999rem',
        //   marginTop: '0.15em',
        //   transition: 'opacity .20s ease-in-out',
        //   height: '1em',
        //   width: '1em',
        //   iconColor: 'currentColor',
        //   icon: iconColor =>
        //     `<svg fill="${iconColor}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z" /></svg>`,
        //   '&:not(:hover)': {
        //     opacity: 0.5
        //   }
        // }
      },
    }),
  },
  variants: {
    extend: {},
  },
  safelist: [
    {
      pattern: /^ember-power-select-/,
    },
  ],
  plugins: [require('tailwindcss-ember-power-select').plugin()],
};