upgrade to 4.0.0 - not able to automatically port tailwind.config.js

[romankoho]

I tried to upgrade to v 4.0.0 with @tailwindcss/upgrade@next

It wasn't able to automatically port the tailwind.config.js (instead it included it). This is the current config:

* eslint-env node */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
    'node_modules/@myregistry/pricing/dist/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui']
    },
    fontWeight: {
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '900'
    },
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '255ch'
          }
        }
      },
      height: {
        dvh: '100dvh'
      },
      screens: {
        '3xl': '2000px'
      },
      cursor: {
        'magic-wand': 'url(/cursors/magic-wand-default.svg), pointer'
      },
      colors: {
        primary: {
          DEFAULT: '#E71354',
          50: '#FFc5D6',
          400: '#EB4C7E',
          600: '#C1154B',
          700: '#8E1037'
        },
        misc: {
          warning: {
            DEFAULT: '#ff6d33',
            light: '#FF7C47'
          },
          yellow: '#f8d74a',
          green: {
            DEFAULT: '#11cf99',
            light: '#52F1C0'
          },
          gray: {
            DEFAULT: '#757575',
            dark: '#1F1F1F',
            light: '#E0E0E0'
          }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('flowbite/plugin'),
    require('@tailwindcss/typography')
  ]
}

Could the plugins be a potential cause? The documentation says that @plugin can be used to load legacy plugins. Does that mean that all these plugins are legacy and could be replaced by something else (or Tailwind can do all of this itself)?

Moreover, do I have to use the @import directive for every entry in my content array?

[wongjn]

Could the plugins be a potential cause?

Could be. Also could be the typography key, since there's no equivalent in v4.

Does that mean that all these plugins are legacy and could be replaced by something else (or Tailwind can do all of this itself)?

It means that JavaScript-based plugins are legacy. At least @tailwindcss/aspect-ratio has a built-in alternative using the aspect-ratio CSS-native property.

Moreover, do I have to use the @import directive for every entry in my content array?

No. @import is for including other CSS files. Like what import is in JS/TS files.

[romankoho]

Thanks for your quick response! Do you know how I can define the content array in v4? I have this component called Pricing in another package where I also use Tailwind and in v3 I had to add to the content array.

[wongjn]

You'd use @source.

[romankoho]

thanks!