Open DaniGuardiola opened 8 months ago
@DaniGuardiola other few things to consider on why the tailwind config is needed and possible problems:
{"red":{"blood":"#F00"}}
, you can have use the class fill-red-blood
..css
files, and those are valid.Hope this helps.
Running autofix with unsafe replaces all className=
with class=
inside react components.
@Goldziher please provide a minimal reproduction.
Seems like nobody mentioned this before. Biome formats this:
<section className="[grid-area:'body'] text-center">1</section>
To this:
<section className='text-center [grid-area:'body']'>1</section>
Here, double quotes were replaced with single ones. This leads to a syntax error.
@BorisZubchenko please open a bug report, this issue isn't for bug reports.
add support for rules for un-supported or invalid class of tailwind, inspired by eslint-plugin-tailwind
Is there any way to apply the unsafe fix on save?
@warrenbhw this question was already asked and answered in this very issue. Please search here or on the website: https://github.com/biomejs/biome/issues/1274#issuecomment-2203887336
Hi, I'm migrating my Astro project to Biome 1.8.3, and I love the simple setup, the only thing remaining for me is Tailwind class sorting.
This is my biome.json
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"css": {
"formatter": {
"enabled": true
},
"linter": {
"enabled": true
},
"parser": {
"cssModules": true
}
},
"files": {
"ignore": [".astro", "dist", "node_modules"]
},
"formatter": {
"formatWithErrors": true,
"indentStyle": "space",
"lineWidth": 100
},
"javascript": {
"formatter": {
"arrowParentheses": "asNeeded"
}
},
"linter": {
"rules": {
"nursery": {
"useSortedClasses": "error"
}
}
}
}
This is my settings.json for VSCode
{
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
}
However, when I run
npx @biomejs/biome check --unsafe
I don't see any error in my .astro file that has the invalid example of the documentation
<div class="px-2 foo p-4 bar" />
Can someone please help me to fix the issue? Also, ideally I would love to sort the classes when saving.
Hi, I'm migrating my Astro project to Biome 1.8.3, and I love the simple setup, the only thing remaining for me is Tailwind class sorting.
This is my biome.json
{ "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", "css": { "formatter": { "enabled": true }, "linter": { "enabled": true }, "parser": { "cssModules": true } }, "files": { "ignore": [".astro", "dist", "node_modules"] }, "formatter": { "formatWithErrors": true, "indentStyle": "space", "lineWidth": 100 }, "javascript": { "formatter": { "arrowParentheses": "asNeeded" } }, "linter": { "rules": { "nursery": { "useSortedClasses": "error" } } } }
This is my settings.json for VSCode
{ "editor.codeActionsOnSave": { "quickfix.biome": "explicit", "source.organizeImports.biome": "explicit" }, "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true }
However, when I run
npx @biomejs/biome check --unsafe
I don't see any error in my .astro file that has the invalid example of the documentation
<div class="px-2 foo p-4 bar" />
Can someone please help me to fix the issue? Also, ideally I would love to sort the classes when saving.
Biome can't yet parse the html template section of Astro files, so nothing gets formatted/linted in there, including class names. THis will only work once biome has full support for Astro files
Update: I'm working on this! Follow the updates in this Twitter thread: https://twitter.com/daniguardio_la/status/1739715412131238122
PRs
Description
Port the TailwindCSS Prettier plugin that sorts Tailwind CSS utility classes. In Biome, it is being implemented as a lint rule that formats classes in JavaScript files though auto-fixes (ref).
Feature support / tasks checklist
clsx
, etc).class
andclassName
)clsx
)md:
,max-md:
(simple config, px-only)!class
)tailwind.config.js
->biome.json
useSortedUtilityClasses
?)Upvote & Fund