biome icon indicating copy to clipboard operation
biome copied to clipboard

πŸ’… @tailwind directive warns in Biome 2.3 even with `css.parser.tailwindDirectives` enabled

Open delucis opened this issue 2 months ago β€’ 5 comments

Environment information

CLI:
  Version:                      2.3.1
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  BIOME_THREADS:                unset
  NO_COLOR:                     unset
  TERM:                         xterm-256color
  JS_RUNTIME_VERSION:           v22.21.0
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         pnpm/10.19.0

Biome Configuration:
  Status:                       Loaded successfully
  Path:                         biome.json
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  true

Linter:
  JavaScript enabled:           unset
  JSON enabled:                 unset
  CSS enabled:                  unset
  GraphQL enabled:              unset
  Recommended:                  true
  Enabled rules:
    a11y/noAccessKey
    a11y/noAriaHiddenOnFocusable
    a11y/noAriaUnsupportedElements
    a11y/noAutofocus
    a11y/noDistractingElements
    a11y/noHeaderScope
    a11y/noInteractiveElementToNoninteractiveRole
    a11y/noLabelWithoutControl
    a11y/noNoninteractiveElementToInteractiveRole
    a11y/noNoninteractiveTabindex
    a11y/noPositiveTabindex
    a11y/noRedundantAlt
    a11y/noRedundantRoles
    a11y/noStaticElementInteractions
    a11y/useAltText
    a11y/useAnchorContent
    a11y/useAriaActivedescendantWithTabindex
    a11y/useAriaPropsForRole
    a11y/useAriaPropsSupportedByRole
    a11y/useButtonType
    a11y/useFocusableInteractive
    a11y/useGenericFontNames
    a11y/useHeadingContent
    a11y/useHtmlLang
    a11y/useIframeTitle
    a11y/useKeyWithClickEvents
    a11y/useKeyWithMouseEvents
    a11y/useMediaCaption
    a11y/useSemanticElements
    a11y/useValidAnchor
    a11y/useValidAriaProps
    a11y/useValidAriaRole
    a11y/useValidAriaValues
    a11y/useValidAutocomplete
    a11y/useValidLang
    complexity/noAdjacentSpacesInRegex
    complexity/noArguments
    complexity/noBannedTypes
    complexity/noCommaOperator
    complexity/noEmptyTypeParameters
    complexity/noExtraBooleanCast
    complexity/noFlatMapIdentity
    complexity/noImportantStyles
    complexity/noStaticOnlyClass
    complexity/noThisInStatic
    complexity/noUselessCatch
    complexity/noUselessConstructor
    complexity/noUselessContinue
    complexity/noUselessEmptyExport
    complexity/noUselessEscapeInRegex
    complexity/noUselessFragments
    complexity/noUselessLabel
    complexity/noUselessLoneBlockStatements
    complexity/noUselessRename
    complexity/noUselessStringRaw
    complexity/noUselessSwitchCase
    complexity/noUselessTernary
    complexity/noUselessThisAlias
    complexity/noUselessTypeConstraint
    complexity/noUselessUndefinedInitialization
    complexity/useArrowFunction
    complexity/useDateNow
    complexity/useFlatMap
    complexity/useIndexOf
    complexity/useLiteralKeys
    complexity/useNumericLiterals
    complexity/useOptionalChain
    complexity/useRegexLiterals
    complexity/useSimpleNumberKeys
    correctness/noConstAssign
    correctness/noConstantCondition
    correctness/noConstantMathMinMaxClamp
    correctness/noConstructorReturn
    correctness/noEmptyCharacterClassInRegex
    correctness/noEmptyPattern
    correctness/noGlobalObjectCalls
    correctness/noInnerDeclarations
    correctness/noInvalidBuiltinInstantiation
    correctness/noInvalidConstructorSuper
    correctness/noInvalidDirectionInLinearGradient
    correctness/noInvalidGridAreas
    correctness/noInvalidPositionAtImportRule
    correctness/noInvalidUseBeforeDeclaration
    correctness/noMissingVarFunction
    correctness/noNonoctalDecimalEscape
    correctness/noPrecisionLoss
    correctness/noSelfAssign
    correctness/noSetterReturn
    correctness/noStringCaseMismatch
    correctness/noSwitchDeclarations
    correctness/noUnknownFunction
    correctness/noUnknownMediaFeatureName
    correctness/noUnknownProperty
    correctness/noUnknownPseudoClass
    correctness/noUnknownPseudoElement
    correctness/noUnknownTypeSelector
    correctness/noUnknownUnit
    correctness/noUnmatchableAnbSelector
    correctness/noUnreachable
    correctness/noUnreachableSuper
    correctness/noUnsafeFinally
    correctness/noUnsafeOptionalChaining
    correctness/noUnusedFunctionParameters
    correctness/noUnusedImports
    correctness/noUnusedLabels
    correctness/noUnusedPrivateClassMembers
    correctness/noUnusedVariables
    correctness/noVoidElementsWithChildren
    correctness/noVoidTypeReturn
    correctness/useGraphqlNamedOperations
    correctness/useIsNan
    correctness/useParseIntRadix
    correctness/useValidForDirection
    correctness/useValidTypeof
    correctness/useYield
    performance/noAccumulatingSpread
    performance/noDynamicNamespaceImportAccess
    security/noBlankTarget
    security/noGlobalEval
    style/noDescendingSpecificity
    style/noInferrableTypes
    style/noNonNullAssertion
    style/noParameterAssign
    style/noUnusedTemplateLiteral
    style/noUselessElse
    style/useArrayLiterals
    style/useAsConstAssertion
    style/useConst
    style/useDefaultParameterLast
    style/useDeprecatedReason
    style/useEnumInitializers
    style/useExponentiationOperator
    style/useExportType
    style/useImportType
    style/useLiteralEnumMembers
    style/useNodejsImportProtocol
    style/useNumberNamespace
    style/useSelfClosingElements
    style/useShorthandFunctionType
    style/useSingleVarDeclarator
    style/useTemplate
    suspicious/noApproximativeNumericConstant
    suspicious/noAssignInExpressions
    suspicious/noAsyncPromiseExecutor
    suspicious/noBiomeFirstException
    suspicious/noCatchAssign
    suspicious/noClassAssign
    suspicious/noCommentText
    suspicious/noCompareNegZero
    suspicious/noConfusingLabels
    suspicious/noConfusingVoidType
    suspicious/noConstEnum
    suspicious/noControlCharactersInRegex
    suspicious/noDebugger
    suspicious/noDocumentCookie
    suspicious/noDoubleEquals
    suspicious/noDuplicateAtImportRules
    suspicious/noDuplicateCase
    suspicious/noDuplicateClassMembers
    suspicious/noDuplicateCustomProperties
    suspicious/noDuplicateElseIf
    suspicious/noDuplicateFields
    suspicious/noDuplicateFontNames
    suspicious/noDuplicateJsxProps
    suspicious/noDuplicateObjectKeys
    suspicious/noDuplicateParameters
    suspicious/noDuplicateProperties
    suspicious/noDuplicateSelectorsKeyframeBlock
    suspicious/noEmptyBlock
    suspicious/noEmptyInterface
    suspicious/noExplicitAny
    suspicious/noExtraNonNullAssertion
    suspicious/noFallthroughSwitchClause
    suspicious/noFunctionAssign
    suspicious/noGlobalAssign
    suspicious/noGlobalIsFinite
    suspicious/noGlobalIsNan
    suspicious/noImplicitAnyLet
    suspicious/noImportAssign
    suspicious/noImportantInKeyframe
    suspicious/noIrregularWhitespace
    suspicious/noLabelVar
    suspicious/noMisleadingCharacterClass
    suspicious/noMisleadingInstantiator
    suspicious/noMisrefactoredShorthandAssign
    suspicious/noNonNullAssertedOptionalChain
    suspicious/noOctalEscape
    suspicious/noPrototypeBuiltins
    suspicious/noQuickfixBiome
    suspicious/noRedeclare
    suspicious/noRedundantUseStrict
    suspicious/noSelfCompare
    suspicious/noShadowRestrictedNames
    suspicious/noShorthandPropertyOverrides
    suspicious/noSparseArray
    suspicious/noSuspiciousSemicolonInJsx
    suspicious/noTemplateCurlyInString
    suspicious/noThenProperty
    suspicious/noTsIgnore
    suspicious/noUnknownAtRules
    suspicious/noUnsafeDeclarationMerging
    suspicious/noUnsafeNegation
    suspicious/noUselessEscapeInString
    suspicious/noUselessRegexBackrefs
    suspicious/noWith
    suspicious/useAdjacentOverloadSignatures
    suspicious/useBiomeIgnoreFolder
    suspicious/useDefaultSwitchClauseLast
    suspicious/useGetterReturn
    suspicious/useGoogleFontDisplay
    suspicious/useIsArray
    suspicious/useIterableCallbackReturn
    suspicious/useNamespaceKeyword

Workspace:
  Open Documents:               0

Rule name

lint/suspicious/noUnknownAtRules

Playground link

https://biomejs.dev/playground/?code=QAB0AGEAaQBsAHcAaQBuAGQAIABjAG8AbQBwAG8AbgBlAG4AdABzADsA&language=css

Expected result

(Not sure how to configure the tailwindDirectives config in the playground, but it includes code that triggers the issue.)

When linting using Biome 2.3.1, we see @tailwind directives being flagged as warnings, even when the css.parser.tailwindDirectives is enabled.

Example run in a real-world project: https://github.com/withastro/astro.build/actions/runs/18841206974/job/53753681604?pr=1924#step:4:23

Code of Conduct

  • [x] I agree to follow Biome's Code of Conduct

delucis avatar Oct 27 '25 12:10 delucis

@tailwind is a tailwind v3 thing AFAIK, is it still used in tailwind v4?

2.3.0 introduced an ignore option to noUnknownAtRules. As a workaround, you can add tailwind to that list.

dyc3 avatar Oct 27 '25 13:10 dyc3

@tailwind is a tailwind v3 thing AFAIK, is it still used in tailwind v4?

Ah, not sure, perhaps not β€” can confirm we are using Tailwind v3 in this case though.

2.3.0 introduced an ignore option to noUnknownAtRules. As a workaround, you can add tailwind to that list.

Thanks for the workaround!

delucis avatar Oct 27 '25 19:10 delucis

I’m experiencing the same issue using Biome 2.3.1 with a Next.js 16 project.

Even with the following configuration enabled:

{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}

the @tailwindlabs directives (@tailwind base;, @tailwind components;, @tailwind utilities;) still trigger warnings in my .css files.

Environment:

  • Biome 2.3.1
  • Next.js 16
  • Tailwind v4

It seems the css.parser.tailwindDirectives flag isn’t being respected in this setup.

nxtvoid avatar Oct 28 '25 00:10 nxtvoid

The option is being respected, simply the @tailwind directive was (is?) a V3 thing, and we explicitly worked on v4. But it seems it's supported in v4 too.

@nxtvoid could you share the docs of this directive?

ematipico avatar Oct 28 '25 06:10 ematipico

The Tailwind v4 upgrade guide suggests you're correct and @tailwind was removed:

In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3

https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives

But maybe @nxtvoid can share their code.

delucis avatar Oct 28 '25 07:10 delucis