Skip to content

Tailwind server hangs when config includes border radius default #1463

@alvinleung1996

Description

@alvinleung1996

What version of VS Code are you using?

v1.104.1

What version of Tailwind CSS IntelliSense are you using?

v0.14.26

What version of Tailwind CSS are you using?

v4.1.13

What package manager are you using?

npm

What operating system are you using?

macOS 15.6.1 (24G90)

Tailwind CSS Stylesheet (v4) or config file (v3)

@import 'tailwindcss';
@config './tailwind.config.cjs';

tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            borderRadius: {
                DEFAULT: 'calc(var(--radius))',
            },
        },
    },
};

VS Code settings

{
}

I test with a new empty VSCode profile.

Reproduction URL

https://github.com/alvinleung1996/tailwind-server-hang-example

Describe your issue

When theme.extend.borderRadius.DEFAULT is set to calc(var(--radius)), hovering rounded will hang the server forever. The hover popup shows "Loading..." and VSCode process explorer shows tailwindServer.js running 100% of the CPU.

It seems the server hangs whenever var(--radius) is inside an calc() expression, e.g. calc(var(--radius) * 2), calc(var(--radius) + 20px).

The server works fine when setting theme.extend.borderRadius.DEFAULT to var(--radius), calc(var(--foo)) and calc(20px).

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions