Reputation: 355

Astro to Tailwind v4 migration - The configuration file at ./tailwind.config.ts could not be automatically migrated

npx @tailwindcss/upgrade@next wont work for ./tailwind.config.ts which makes this tool not much useful, migrates just a few trivial classes.

Here is my config:

https://github.com/nemanjam/nemanjam.github.io/blob/main/tailwind.config.ts

import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';

import type { Config } from 'tailwindcss';
import type { PluginUtils } from 'tailwindcss/types/config';

const config: Config = {
  content: ['src/**/*.{astro,md,mdx,tsx,ts}', 'astro.config.mjs'],
  // activates only dark: modifier, not color theme
  darkMode: ['selector'],
  plugins: [
    require('@tailwindcss/typography'),
    plugin(({ addVariant }) => {
      addVariant('not-first', '&:not(:first-child)');
      addVariant('not-last', '&:not(:last-child)');
    }),
  ],
  theme: {
    tabSize: {
      1: '1',
      2: '2',
      4: '4',
      8: '8',
    },
    // must not use extend, will add xs to the end
    screens: {
      xs: '475px',
      ...defaultTheme.screens,
    },
    extend: {
      fontFamily: {
        sans: ['Inter Variable', 'Inter', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        // background
        'base-100': 'var(--th-base-100)',
        'base-200': 'var(--th-base-200)',
        'base-300': 'var(--th-base-300)',
        'base-code': 'var(--th-base-code)',
        // text
        content: 'var(--th-content)',
        headings: 'var(--th-headings)',
        captions: 'var(--th-captions)',
        links: {
          DEFAULT: 'var(--th-links)',
          hover: 'var(--th-links-hover)',
          visited: 'var(--th-links-visited)',
        },
        // brand
        primary: {
          DEFAULT: 'var(--th-primary)',
          hover: 'var(--th-primary-hover)',
          content: 'var(--th-primary-content)',
          'base-200': 'var(--th-primary-base-200)',
          'base-300': 'var(--th-primary-base-300)',
        },
        secondary: {
          DEFAULT: 'var(--th-secondary)',
          hover: 'var(--th-secondary-hover)',
          content: 'var(--th-secondary-content)',
        },
        accent: {
          DEFAULT: 'var(--th-accent)',
          hover: 'var(--th-accent-hover)',
          content: 'var(--th-accent-content)',
        },
      },
      borderRadius: {
        box: 'var(--th-rounded-box)',
        button: 'var(--th-rounded-button)',
        tag: 'var(--th-rounded-tag)',
      },
      typography: ({ theme }: PluginUtils) => ({
        DEFAULT: {
          css: {
            'code::before': { content: '""' },
            'code::after': { content: '""' },
          },
        },
        // nonsense
        'a-img': {
          css: {
            'a:hover img': {
              outline: `4px solid ${theme('colors.blue.500')}`,
            },
          },
        },
      }),
    },
  },
};

export default config;

I have tried commenting out plugins but it didnt help.

  plugins: [
    require('@tailwindcss/typography'),
    plugin(({ addVariant }) => {
      addVariant('not-first', '&:not(:first-child)');
      addVariant('not-last', '&:not(:last-child)');
    }),
  ],

And here is the entire repository:

https://github.com/nemanjam/nemanjam.github.io/

Here is the migration log:

username@computer9:~/Desktop/nemanjam.github.io$ npx @tailwindcss/upgrade@next
≈ tailwindcss v4.0.6

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./tailwind.config.ts` to `./src/styles/main.css` 

│ Migrating JavaScript configuration files… 

│ ↳ The configuration file at `./tailwind.config.ts` could not be automatically migrated to the new CSS configuration format, so your CSS has been updated 
│   to load your existing configuration file. 

│ Migrating templates… 

│ ↳ Migrated templates for configuration file: `./tailwind.config.ts` 

│ Migrating stylesheets… 

│ ↳ Migrated stylesheet: `./src/styles/main.css` 

│ Migrating PostCSS configuration… 

│ ↳ Installed package: `@tailwindcss/postcss` 

│ ↳ Migrated PostCSS configuration: `./postcss.config.mjs` 

│ Updating dependencies… 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository.

How can I get migration tool to work and avoid migrating config file manually?

Upvotes: 0

Answers (2)

rozsazoltan

Reputation: 9073

In PR #16, you did everything correctly. However, the work isn't finished just by updating the packages. Many breaking changes need to be reviewed and fixed. Fortunately, many of these changes have improved TailwindCSS.

Starting from TailwindCSS v4, a Vite-supported plugin is provided, so there is no need for an Astro addon. Instead, you should use the @tailwindcss/vite package, which can be integrated directly into Vite.

Astro with TailwindCSS - Astro Docs
Install TailwindCSS with Astro - TailwindCSS v4 Docs

There is no need for the legacy JavaScript-based tailwind.config.js configuration, although it can still be used with the @config directive. However, the new CSS-first configuration is preferred.

The tailwind-merge package v3 is compatible with TailwindCSS v4.

dcastil/tailwind-merge issue #513 - GitHub
dcastil/tailwind-merge release v3.0.0 - GitHub

Additionally, you should manually review several breaking changes. I recommend following these guides:

To be honest, I would avoid using the upgrade tool. In v4.0.0, it was still buggy; maybe they have fixed it since then, but it's always a good idea to review all breaking changes at least once yourself to avoid any surprises.

Upvotes: 0

Kamil Justyński

Reputation: 1

I had the same problem that you but when i comment all variants and plugins in tailwind.config.js the problem has resolved. Try again

Upvotes: -1

Astro to Tailwind v4 migration - The configuration file at ./tailwind.config.ts could not be automatically migrated

Answers (2)

Related Questions