Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 - broken 1/2 completions #1178

Closed
alexchexes opened this issue Feb 7, 2025 · 2 comments · Fixed by tailwindlabs/tailwindcss#16353 or #1182
Closed

v4 - broken 1/2 completions #1178

alexchexes opened this issue Feb 7, 2025 · 2 comments · Fixed by tailwindlabs/tailwindcss#16353 or #1182

Comments

@alexchexes
Copy link

What version of VS Code are you using?

1.96.4

What version of Tailwind CSS IntelliSense are you using?

0.14.3

What version of Tailwind CSS are you using?

4.0.4

What package manager are you using?

pnpm

What operating system are you using?

Windows 11

Tailwind config

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

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    plugin(function ({ addBase }) {
      addBase({
        'html': { fontSize: '15px' },
      })
    }),
  ],
}

VS Code settings

{
  "tailwindCSS.rootFontSize": 15,
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "mainWrapClass"]
}

and

  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.experimental.classRegex": [
    [
      "[\\w-]+Class\\s*?=\\s*\"([\\s\\S]+?\")", // Container pattern
      "['`]*(.+?)['\"`]" // Class pattern
    ]
  ],

Reproduction URL

Just try typing translate1/2 in the current https://play.tailwindcss.com/

Describe your issue

After updating to v4, completions for things like translate-1/2 no longer appear. See screenshots:

Before (with v3):

Image

Image

After (with v4):

Image

Image

thecrypticace added a commit that referenced this issue Feb 10, 2025
All utilities implicitly have at least `modifiers: []` in the class list
when no modifiers are present. We should only change the completion list
when there are actually modifiers to show in case an existing utility
with a slash in it (e.g. `w-1/2`) is “close” to what the user has typed.

This is the other half to fix #1178 b/c while the completions show up
but as soon as you type `/` they disappear which is an awful experience.
@thecrypticace thecrypticace reopened this Feb 10, 2025
@thecrypticace
Copy link
Contributor

Sorry, didn't mean for the PR to close this one when merging.

I fixed a related issue in IntelliSense itself but this will require a fix in Tailwind CSS itself to actually produce the completions. I've got a PR open for that here: tailwindlabs/tailwindcss#16353

@thecrypticace
Copy link
Contributor

This will be fixed in the next patch release of Tailwind CSS 👍

Gonna try to get the IntelliSense update itself out today or tomorrow too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants