Skip to content

Conversation

@philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Oct 15, 2024

With the changes in #14672, it now becomes trivial to actually resolve the config (while still retaining the reset behavior). This means that we can now convert JS configs that use functions, e.g.:

import { type Config } from 'tailwindcss'

export default {
  theme: {
    extend: {
      colors: ({ colors }) => ({
        gray: colors.neutral,
      }),
    },
  },
} satisfies Config

This becomes:

@import 'tailwindcss';

@theme {
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;
}

@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch from d12009e to bd66cec Compare October 15, 2024 15:38
@philipp-spiess philipp-spiess force-pushed the fix/reset-default-theme-values-for-non-extends-js-theme-config branch from 34847f3 to 3456edd Compare October 16, 2024 13:54
Base automatically changed from fix/reset-default-theme-values-for-non-extends-js-theme-config to next October 16, 2024 14:06
@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch 2 times, most recently from 56e01bd to 6c482c7 Compare October 16, 2024 16:05
@philipp-spiess philipp-spiess force-pushed the feat/resolve-theme-keys-for-codemods branch from 6c482c7 to cb93881 Compare October 17, 2024 13:45
@philipp-spiess philipp-spiess requested a review from a team as a code owner October 17, 2024 13:45
Copy link
Contributor

@thecrypticace thecrypticace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good except for the test failures (color palette related). Fix those up and should be good to go.

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved but some small changes

@config '../tailwind.config.ts';
@theme {
--color-gray-50: oklch(0.985 0 none);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this PR didn't introduce it, but I wonder if the "legacy" colors (v3) should still use the v3 values (hex) instead of oklch(…) 🤔

@adamwathan adamwathan merged commit 0971ead into next Oct 17, 2024
1 check passed
@adamwathan adamwathan deleted the feat/resolve-theme-keys-for-codemods branch October 17, 2024 20:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants