Migration from V3 to V4 - still need tailwind.config.js

[CreateSean]

I updated to tailwind V4 and ran the upgrade utility. In my CSS I have this line:

@config '../../tailwind.config.js';

I expected that the upgrade utility would convert the config file to the css. Did I miss something? Is there a way to do this? did not find anything in the docs about it.

Also the upgrade utility changed my working CSS to somethign not working

original:

a.skip-main {
  @apply absolute top-[40px] w-[1px] h-[1px] overflow-hidden;
  left: -999px;
  z-index: -999;
  background: #2d2828;
}

a.skip-main:focus,
a.skip-main:active {
  @apply text-white bg-[#2d2828] left-[5px] top-[50px] min-w-[200px] text-center my-[10px] mx-[5px] p-[10px] text-base z-[999] no-underline border border-black;
}

what I ended up with:

@utility skip-main {
  &a {
    @apply absolute top-[40px] w-[1px] h-[1px] overflow-hidden;
    left: -999px;
    z-index: -999;
    background: #2d2828;
  }

  &a:focus {
    @apply text-white bg-[#2d2828] left-[5px] top-[50px] min-w-[200px] text-center my-[10px] mx-[5px] p-[10px] text-base z-999 no-underline border border-black;
  }

  & a:active {
    @apply text-white bg-[#2d2828] left-[5px] top-[50px] min-w-[200px] text-center my-[10px] mx-[5px] p-[10px] text-base z-999 no-underline border border-black;
  }
}
``

[wongjn]

I expected that the upgrade utility would convert the config file to the css. Did I miss something?

If the upgrade tool sees some configuration it can't port, it will keep your JS config file.

Is there a way to do this?

You can manually port things across or delete the portion of configuration that the upgrade tool couldn't port and then manually port it across afterwards.

Also the upgrade utility changed my working CSS to somethign not working

Try this:

@utility skip-main {
  &:is(a) {
    @apply absolute top-[40px] w-[1px] h-[1px] overflow-hidden;
    left: -999px;
    z-index: -999;
    background: #2d2828;

    &:focus,
    &:active {
      @apply text-white bg-[#2d2828] left-[5px] top-[50px] min-w-[200px] text-center my-[10px] mx-[5px] p-[10px] text-base z-999 no-underline border border-black;
    }
  }
}

[CreateSean]

I'm not sure what it didn't like about my config file. Is there a guide somewhere on how to manually port the config file?

Now that I'm on TW4 I suspect the upgrade utility won't let me re-run it.

In case it helps this is my config file:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    './templates/**/*.{html,twig,js}',
    './src/**/*.{vue,js,jsx}',
  ],
  darkMode:'class',
  theme: {
    container: {
      center: true,
      padding:'1rem',
    },
    colors: {
      grayBrand: {
        light: '#DADADA',
        DEFAULT: '#373F41',
      },
      'white': {
        DEFAULT: '#FFFFFF',
      },
      'black': {
        DEFAULT: '#000000',
      },
      transparent: 'transparent',
      current: 'currentColor',
      green: colors.green,
      pink: colors.pink,
      red: colors.red,
      gray: colors.gray,
    },
    extend: {
      fontFamily: {
        'default':['HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'],
      },
      fontSize: {
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.900'),
            a: {
              color: theme('colors.red.500'),
              '&:hover': {
                color: theme('colors.red.700'),
                textDecoration: 'none',
              },
            },
          },
        },
      }),
      //https://github.com/tailwindlabs/tailwindcss-container-queries
      // containers: {
      //   '2xs': '16rem',
      // },
    },
  },
  plugins: [
    require('@tailwindcss/container-queries'),
    require('@tailwindcss/typography'),
  ],
}

[wongjn]

At the very least, it is the theme.extend.typography key, since there is no equivalent for a function configuration value.

Is there a guide somewhere on how to manually port the config file?

Possibly, you could do an internet search for a guide. Otherwise, you can read the official documentation on theme customization, and the upgrade guide.

Also, as per the documentation:

We recommend running the upgrade tool in a new branch

So you should be able to revert and redo the upgrade again.

[ubaid-myalfred]

It happeded to me as well in my Nextjs project. Migration works successfully but my tailwind.config.js is gone. The issue is everything seems to be working fine I don't know how. Do I need to add tailwind config file again.

What framework I am using
Nextjs version 15

Nodejs version
20.12.2

Operating System
Windows 11

Command output
$ yarn nlx @tailwindcss/upgrade
yarn run v1.22.22

≈ tailwindcss v4.0.7

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

│ ↳ Linked .\tailwind.config.js to .\styles\globals.css

│ Migrating JavaScript configuration files…

│ ↳ Migrated configuration file: .\tailwind.config.js

│ Migrating templates…

│ ↳ Migrated templates for configuration file: .\tailwind.config.js

│ Migrating stylesheets…

│ ↳ Migrated stylesheet: .\styles\globals.css

│ Migrating PostCSS configuration…

│ ↳ Installed package: @tailwindcss/postcss

│ ↳ Installed package: @tailwindcss/postcss
│ ↳ Installed package: @tailwindcss/postcss

│ ↳ Removed package: autoprefixer
│ ↳ Removed package: autoprefixer

│ ↳ Migrated PostCSS configuration: .\postcss.config.js

│ ↳ Migrated PostCSS configuration: .\postcss.config.js

│ ↳ Migrated PostCSS configuration: .\postcss.config.js

│ Updating dependencies…

│ Updating dependencies…
│ Updating dependencies…

│ ↳ Updated package: tailwindcss

│ Verify the changes and commit them to your repository.

Done in 51.69s

[francoismassart]

Hi,
I've experienced the same issue and my approach is to simplify the JS config as much as possible, then enabling each config property one by one...

Based on my experiments on our main project we had 2 features from the JS config which were blocking the full CSS migration and causing the insertion of @config '../tailwind.config.js';:

• in the screens property, we were using xs: { max: '360px' };...
  This is an easy fix, remove the xs entry and use 2 classes instead of a single one
  e.g. go from xs:w-1/2 to w-1/2 sm:w-auto
• the sole presence of extend property (even if it is empty)
• the sole presence of plugins property (even if it is empty)
• the sole presence of variants property (even if it is empty)

I may find additional properties later, in this case, I'll edit this post.

[wongjn]

You could also do max-xs:w-1/2 with:

@theme {
  --breakpoint-xs: 22.5rem;
}

Or keep xs:w-1/2 with:

@custom-variant xs (@media (max-width: 360px));