Upgrading from v3 to v4: prefix woes

[thisismeonmounteverest]

I want to upgrade my project from v3 to v4. The repo has a rather extensive tailwind.config.js including a prefix setting: prefix: "u-". That prefix is working fine in v3, so my html and css files make use of u- a lot.

Migrating to v4 doesn't work, though.

I tried the following tailwind.css file to start the migration:

@config "../../tailwind.config.js";

@import "tailwindcss";

That leads to an error message saying (wrongly): "The prefix 'u' is invalid. Prefixes must be lowercase ASCII letters (a-z) only and is written as a variant before all utilities. We have fixed up the prefix for you. Remove the trailing - to silence this warning." (the 'u' should be the original 'u-'. After I figured that, I removed the minus sign.

Running the migration tool again I get this error instead:

Migrating stylesheets…

│ ↳ Cannot apply unknown utility class `u-rounded-8` in `.\tailwindcss\tailwind.css`

I can change all the u-rounded-8 into u:rounded-8 in the css files, but doing the same in all the html files is not really possible. Especially as the prefix now has to be applied before any modifier while in v3 it was after! E.g. md:u-rounded-8 in v3 would now be u_md_rounded-8.

Any idea how to get this done? I'm using postcss.

[wongjn]

TLDR: I'm having trouble replicating your issue and get different issues altogether. Try running the @tailwindcss/upgrade tool first, without making any manual changes.

After cloning and trying to yarn install, I get:

 YN0058: │ tempusdominus-bootstrap@https://github.com/tonix-tuft/tempusdominus-bootstrap.git#commit=21b87b866c0f4785bd801750d9115dfb7c2655fc: Packing the package failed (exit code 1, logs can be found here: /tmp/xfs-27b01d36/pack.log)

Removing the tempusdominus-bootstrap from package.json, I get yarn to install properly.

Then, running npx @tailwindcss/upgrade after, I get:

$ npx @tailwindcss/upgrade --force
≈ tailwindcss v4.1.8

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

│ ↳ /path/to/public/styles/css/minimal/screen/content_minimal.css:527:8: Unknown word 

│ ↳ /path/to/public/styles/css/minimal/screen/custom/groups.css:1:1: Unclosed block 

│ ↳ /path/to/public/styles/css/minimal/screen/custom/places.css:6:1: Unclosed block 

│ ↳ Linked `./tailwind.config.js` to `./assets/tailwindcss/tailwind.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Could not load the configuration file: Cannot destructure property 'negative' of 'undefined' as it is undefined.

Breaking each of these errors down:

• │ ↳ /path/to/public/styles/css/minimal/screen/content_minimal.css:527:8: Unknown word
  

  This is caused by this invalid CSS syntax:

      // border: none;

• │ ↳ /path/to/public/styles/css/minimal/screen/custom/groups.css:1:1: Unclosed block
  
  │ ↳ /path/to/public/styles/css/minimal/screen/custom/places.css:6:1: Unclosed block 
  

  This is caused by this invalid CSS syntax:

  @media all
  {

• │ ↳ Could not load the configuration file: Cannot destructure property 'negative' of 'undefined' as it is undefined.
  

  This is caused by this code relying on seemingly legacy configuration format:

  margin: (theme, { negative }) => ({
    auto: 'auto',
    ...theme('spacing'),
    ...negative(theme('spacing')),
  }),

[thisismeonmounteverest]

@wongjn Thanks for having a look and sorry for not giving more details.

I just created a new clone, and in there

yarn install --frozen-lock

works without failing on tempusdominus. The three invalid css files are outside of the assets directory and not used for tailwindcss. I fixed them so that they do not show up as problems anymore and commit them locally so that I can use the upgrade tool without forcing.

Which ran through this time with out the prefix error message. But it also said it can't migrate my js-config file and therefore adds an @config entry. Is there any documentation, what is what now if I would try migrating that manually?

But as that didn't fix the prefix issue, I drop the plan to migrate for now.

[wongjn]

Is there any documentation, what is what now if I would try migrating that manually?

Most of the values are already Tailwind defaults and could be dropped. For other keys, consider checking the Tailwind documentation per class name group to see what namespaces they use. However, some properties have no namespaces or their specific namespaces are undocumented. In this case, check the source code directly.