Comments (73)
Hey folks! π
So just an update on the Prettier plugin compatibility situation. We've just released a new beta version of prettier-plugin-tailwindcss
which improves (or at least we hope it does π
) compatibility with specific other Prettier plugins, including:
prettier-plugin-svelte
prettier-plugin-astro
@trivago/prettier-plugin-sort-imports
prettier-plugin-organize-imports
We've taken a new approach with our Prettier plugin where we no longer bundle any third-party Prettier plugins (including the Svelte plugin β more on that below). And, through a safe list, we've explicitly added support for the above plugins which currently have known incompatibilities.
We've done this by automatically detecting if one of these plugins is installed and enabled in your project, and if it is, we do some magic behind the scenes in our plugin to make sure these plugins still work.
The one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you'll need to explicitly disable the pluginSearchDirs
option, and define each of your Prettier plugins in the plugins
array:
// .prettierrc
{
// ..
"plugins": [
"prettier-plugin-astro",
"prettier-plugin-organize-imports",
"prettier-plugin-tailwindcss" // MUST come last
],
"pluginSearchDirs": false
}
For Svelte users, we no longer bundle the prettier-plugin-svelte
plugin within our plugin, so you'll need install and enable it using the instructions above.
For Astro users, this new release supports prettier-plugin-astro
, which you can install in the same way.
We've released this updated plugin as a beta version since we're not 100% sure on this approach quite yet, and would really appreciate your help testing it out. You can install it using the beta
tag:
npm install prettier-plugin-tailwindcss@beta
Let me know how it goes! πͺ
from prettier-plugin-tailwindcss.
@rwwagner90 It's not that this plugin is incompatible with
prettier-plugin-astro
, but this plugin only works with a few extensions (such asvue
,html
, etc).
Would it be possible to add astro support?
from prettier-plugin-tailwindcss.
I found a new workaround to make @trivago/prettier-plugin-sort-imports
and prettier-plugin-tailwindcss
work at the same time in React+TypeScript(work in vscodeπ).
- if you do not have
prettier.config.js
, create a file and move your config to `prettier.config.js - copy to
prettier.config.js
.
const pluginSortImports = require("@trivago/prettier-plugin-sort-imports")
const pluginTailwindcss = require("prettier-plugin-tailwindcss")
/** @type {import("prettier").Parser} */
const myParser = {
...pluginSortImports.parsers.typescript,
parse: pluginTailwindcss.parsers.typescript.parse,
}
/** @type {import("prettier").Plugin} */
const myPlugin = {
parsers: {
typescript: myParser,
},
}
module.exports = {
plugins: [myPlugin],
// your settings
}
- it will look like this
Sample Code
import { fuga } from "./hoge"
import { Alert } from "~/components/atoms/Alert"
type Props = {}
export function Component(props: Props) {
return (
<div className="flex items-center justify-center w-[200px] h-64">
<Alert />
</div>
)
}
// after
/*
config = {
plugins: [hackedPlugin],
tabWidth: 2,
semi: false,
printWidth: 120,
arrowParens: "always",
importOrder: ["^[~/]", "^[../]", "^[./]"],
importOrderSeparation: true,
}
*/
import { Alert } from "~/components/atoms/Alert"
import { fuga } from "./hoge"
type Props = {}
export function Component(props: Props) {
return (
<div className="flex h-64 w-[200px] items-center justify-center">
<Alert />
</div>
)
}
References.
Underlying problem
Underlying problem
After some investigation, I suspect that there is a problem with prettier core getParsers()
.
For example
// prettier.config.js
const APlugin = {
parsers: {
typescript: ... ,
},
}
const BPlugin = {
parsers: {
typescript: ... ,
},
}
module.exports = {
plugins: [APlugin, BPlugin],
// ...
}
APlugin does not work when formatted with a ts file, and only BPlugin works.
I assume this is because the parsers
in getParsers()
are overwritten for each plugin.
I am currently investigating.
from prettier-plugin-tailwindcss.
Seems this one might be incompatible as well https://github.com/withastro/prettier-plugin-astro
from prettier-plugin-tailwindcss.
Hello everyone, another update, we've just released v0.2.0, which includes all these plugin compatibility fixes.
You can install it using npm:
npm install prettier-plugin-tailwindcss@latest
We've also updated the readme to list all the Prettier plugins that we've added explicit support for:
With all this complete, I am going to close this issue as resolved. Thanks to everyone here for sharing information about incompatible plugins with us! π
from prettier-plugin-tailwindcss.
I originally opened issue #26 about prettier-plugin-organize-imports
- in that specific case, I'm able to work around the incompatibility for now by monkey-patching prettier-plugin-tailwindcss
so that each overlapping parser uses the preprocess
function from prettier-plugin-organize-imports
, like so:
// merged-prettier-plugin.js
const tailwind = require('prettier-plugin-tailwindcss')
const organizeImports = require('prettier-plugin-organize-imports')
const combinedFormatter = {
...tailwind,
parsers: {
...tailwind.parsers,
...Object.keys(organizeImports.parsers).reduce((acc, key) => {
acc[key] = {
...tailwind.parsers[key],
preprocess(code, options) {
return organizeImports.parsers[key].preprocess(code, options)
},
}
return acc
}, {}),
},
}
module.exports = combinedFormatter
// .prettierrc.js
module.exports = {
plugins: [require('./merged-prettier-plugin.js')],
...
}
This works for now because, from what I can tell, prettier-plugin-tailwindcss
doesn't set a preprocessor, and prettier-plugin-organize-imports
does all of its work in the preprocessor.
Looking forward to whatever eventual fix removes the need for the patch!
from prettier-plugin-tailwindcss.
Subscribing to this. Working with Craft CMS, it's disappointing to see this is incompatible with prettier-plugin-twig-melody.
from prettier-plugin-tailwindcss.
Hello, Erika from the Astro team here. Any idea when the current main
will be released?
We contributed Astro support 2 months ago now and our users understandably keep asking us to support this. I know there was some needed changes after our PR, but it seems like those changes were merged in a month ago.
If there's anything we can do to help get this released - please let us know and we'll gladly contribute!
from prettier-plugin-tailwindcss.
Are all these incompatibilities meant to be fixed at some point, or is this issues point to inform us that we can't use a combination of said plugins without odd workarounds?
I think the premise of your question is a bit misplaced. My experience with open-source software, unless funded by big sponsors, is that contributors submit patches mostly to solve their own problems. So either you have to get your hands dirty and submit a PR to solve this, or cross your fingers and hope that someone else has enough motivation to sacrifice their free time one day and do the work for you.
from prettier-plugin-tailwindcss.
Sup everyone! π
Just another update on the Tailwind CSS Prettier plugin. We've now added support for a bunch of other Prettier plugins and have released a new beta version for your testing pleasure.
Here's a complete list of all the plugins we added support for in this release:
@prettier/plugin-php
@prettier/plugin-pug
prettier-plugin-css-order
prettier-plugin-import-sort
prettier-plugin-jsdoc
prettier-plugin-organize-attributes
prettier-plugin-style-order
prettier-plugin-twig-melody
Installing the beta
As previously mentioned, we need to do some shenanigans to get these plugins all working (I'm looking at you @prettier/plugin-php
), so we'd really appreciate your help kicking the tires on this new version for us.
To install this latest beta, add it using npm:
npm install prettier-plugin-tailwindcss@beta
As mentioned in my previous comment, the one gotcha with this approach is that Prettier plugin autoloading is unreliable, because our plugin must come last in the list of plugins. For this reason, you'll need to explicitly disable the pluginSearchDirs
option, and define each of your Prettier plugins in the plugins
array:
// .prettierrc
{
// ..
"plugins": [
"@prettier/plugin-pug",
"prettier-plugin-organize-attributes",
"prettier-plugin-tailwindcss" // MUST come last
],
"pluginSearchDirs": false
}
Other plugins
I think this covers all the Prettier plugins mentioned in this issue other than @shufo/prettier-plugin-blade
, which unfortunately is more complicated since that plugin forks out to a different process and doesn't provide an AST βΒ just a string. So we'd have to parse the whole Blade file ourselves to be able to sort classes within it, which is a much bigger undertaking.
from prettier-plugin-tailwindcss.
how about this issue
from prettier-plugin-tailwindcss.
Reading the discussion here, according to Prettier's team, re-ordering classes should not be done through Prettier but through ESLint, which is why they do not plan to solve it π
Should the effort be redirected to an ESLint plugin? (official support for the existing ones?)
from prettier-plugin-tailwindcss.
Thank you @reinink π
For anyone struggling, this works with pnpm
:
plugins: [
require.resolve('@trivago/prettier-plugin-sort-imports'),
require('prettier-plugin-tailwindcss'),
],
from prettier-plugin-tailwindcss.
For those that are using eslint
(with autofix) in conjunction with prettier
, eslint-plugin-tailwindcss might be a viable alternative.
from prettier-plugin-tailwindcss.
Might be a bit of an edge case. But I am using Laravel and subsequently Blade template files.
So that prettier runs on these files I am using @shufo/prettier-plugin-blade. But as this issue suggests, Tailwind classes are not sorted when run with this plugin.
from prettier-plugin-tailwindcss.
@Princesseuh I think it's still blocked by what @thecrypticace outlined here: #87 (comment)
We're really busy trying to get Tailwind CSS v3.2 out the door this week and then out for a team retreat the following week, but we can look at this again the first week of November. One idea we might need to explore is multiple plugins, like a prettier-plugin-tailwindcss-astro
plugin and a separate pretter-plugin-tailwindcss-svelte
plugin or similar since it seems to be proving challenging to build something that works everywhere π
from prettier-plugin-tailwindcss.
Thanks for updating this. Sad it's still incompatible with Twig :(
from prettier-plugin-tailwindcss.
Are all these incompatibilities meant to be fixed at some point, or is this issues point to inform us that we can't use a combination of said plugins without odd workarounds?
from prettier-plugin-tailwindcss.
Hey @blooddrunk, this workaround worked for me:
const tailwindPlugin = require('prettier-plugin-tailwindcss');
const sortImportsPlugin = require('@ianvs/prettier-plugin-sort-imports');
module.exports = {
parsers: {
typescript: {
...tailwindPlugin.parsers.typescript,
preprocess: sortImportsPlugin.parsers.typescript.preprocess,
},
},
options: {
...sortImportsPlugin.options,
},
};
Related to this answer.
from prettier-plugin-tailwindcss.
It's not a pretty solution, ...
I see what you did there.
from prettier-plugin-tailwindcss.
Seems this one might be incompatible as well https://github.com/withastro/prettier-plugin-astro
Agreed, having this issue as well.
from prettier-plugin-tailwindcss.
Looking forward for this to be compatible with @ianvs/prettier-plugin-sort-imports
from prettier-plugin-tailwindcss.
It seems to be incompatible with https://github.com/trivago/prettier-plugin-sort-imports
from prettier-plugin-tailwindcss.
@kagurazaka-0 Thanks for sharing. This looks like a promising solution, but I was personally not able to get it working. Continuously got this error in the Prettier output after making the change to the prettier.config.js
:
Error formatting document. TypeError: Cannot read properties of undefined (reading 'map') at Object.getExperimentalParserPlugins
When only using plugins: [require('prettier-plugin-tailwindcss')]
or plugins: [require('@trivago/prettier-plugin-sort-imports')],
individually, Prettier works as expected.
from prettier-plugin-tailwindcss.
@TrevorLeeman are you using pnpm? I think I noticed the same thing when I moved to pnpm from yarn (v1). I'll try and get back to this thread with a result.
EDIT: confirmed. Reverting to Yarn solved the issue :)
from prettier-plugin-tailwindcss.
Thank you @reinink π
For anyone struggling, this works with
pnpm
:plugins: [ require.resolve('@trivago/prettier-plugin-sort-imports'), require('prettier-plugin-tailwindcss'), ],
Beautiful thanks! This worked for me (Next 13, pnpm)
from prettier-plugin-tailwindcss.
@rwwagner90 It's not that this plugin is incompatible with prettier-plugin-astro
, but this plugin only works with a few extensions (such as vue
, html
, etc).
from prettier-plugin-tailwindcss.
what's progress of this issue, i run into this issue, it will break pluginprettier-plugin-organize-imports
,
from prettier-plugin-tailwindcss.
If you want a workaround, you could use the prettier --config
flag and have two different configs (using the sharing configurations patter for consistent formatting).
This solution won't work with your IDE on saving, but it could work with a lint-stage solution.
prettier --config ./.prettierrc.tailwind.js --write .
prettier --config ./.prettierrc.other.js --write .
It's not a pretty solution, but I think it's possible for those that strongly want multiple plugin support.
I, personally, have decided to use the tailwind prettier plugin on its own for now to avoid adding this much complexity to my projects.
from prettier-plugin-tailwindcss.
Also incompatible with prettier-plugin-organize-attributes
from prettier-plugin-tailwindcss.
I for one can say that I can install and integrate: @tailwindcss/forms
and it has 0 affect on this Prettier plugin.
I don't particular care for the defaults put forth in the forms extension, so I don't usually use it. Just tried it out when I saw these issues.
As to all of the other plugins, I don't personally use all of those, but other ones such as standard prettier, or prettier for Jest I do use and never had any issue.
from prettier-plugin-tailwindcss.
I figured out what I was doing wrong and the reason I couldn't get it to work for SvelteKit before was because I was trying to include the plugin inside .prettierrc
which for some reason breaks it, so don't include it and it should pick it up.
ποΈ .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"]
}
Here are the steps for SvelteKit users:
pnpm i -D prettier-plugin-tailwindcss
pnpm remove prettier-plugin-svelte
You can keep using the svelte.svelte-vscode
formatter.
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
You can look at the updated repo if you need an example.
from prettier-plugin-tailwindcss.
Hiya, did anyone found a workaround when using pnpm ?
from prettier-plugin-tailwindcss.
@mreduar Hey, yes, you still to disable the pluginSearchDirs
and list all your plugins in the plugins
array, putting Tailwind CSS last (as per the readme).
If it's not working there is probably something else wrong. Feel free to create a minimal reproduction and we can have a closer look π
from prettier-plugin-tailwindcss.
@blooddrunk @bryanbarrios Just a heads up that we've also added support for @ianvs/prettier-plugin-sort-imports
: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.2.3
from prettier-plugin-tailwindcss.
@nunocasteleira this issue is related to prettier plugins conflicting with each other.
If your system can't find @tailwindcss/forms
try reinstalling it with npm install @tailwindcss/forms
.
If you continue to have problems open an issue on the forms repo.
from prettier-plugin-tailwindcss.
If you want a workaround, you could use the prettier
--config
flag and have two different configs (using the sharing configurations patter for consistent formatting).This solution won't work with your IDE on saving, but it could work with a lint-stage solution.
prettier --config ./.prettierrc.tailwind.js --write . prettier --config ./.prettierrc.other.js --write .It's not a pretty solution, but I think it's possible for those that strongly want multiple plugin support.
I, personally, have decided to use the tailwind prettier plugin on its own for now to avoid adding this much complexity to my projects.
Thanks for the idea, I made a lintstaged script to run eslint (with prettier tailwindcss) + prettier (with prettier sort imports), here is an example
from prettier-plugin-tailwindcss.
Any workarounds @guilhermetod ?
from prettier-plugin-tailwindcss.
@manavm1990 This issue is specifically in regards to those other plugins, not for the standard prettier plugin which this tailwind plugin was built for and can be used in tandem with forms π
from prettier-plugin-tailwindcss.
#31 (comment)
@kagurazaka-0 Thank you! I try it and it works well!
Now I wait until I would be able to remove this workaround.
from prettier-plugin-tailwindcss.
I don't know if it is also related to this, but I can't have
prettier-plugin-tailwindcss
working alongside@tailwindcss/forms
. It says it doesn't find it.
I found a workaround on this one
Create a tailwind.shared.config.js
contains all the things without @tailwindcss/forms
/** @type {import("tailwindcss").Config} */
module.exports = {
darkMode: 'class',
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
theme: {},
}
Then in normal tailwind.config.js
add the plugins back.
const config = require('./tailwind.shared.config.js')
/** @type {import("tailwindcss").Config} */
module.exports = {
...config,
plugins: [
require('@tailwindcss/forms'),
],
}
in .prettierrc.js
use the config file without @tailwindcss/forms
module.exports = {
// other configs
tailwindConfig: './tailwind.shared.config.js',
}
from prettier-plugin-tailwindcss.
Would be very nice, if we had support for this one: https://github.com/prettier/plugin-pug
The markup used in pug
can look like this: h1(class="text-center font-serif")
, which is in terms of classes is the same as HTML
. If anyone has a possible solution, I'd be very grateful. Thanks!
from prettier-plugin-tailwindcss.
@mattcroat I really appreciate this, and I did try but IDE kept showing Saving '+page.svelte': Running 'Svelte for VS Code' Formatter
toast message while I was trying to save. If I try to navigate to a different file the toast message disappears and saves the file.
The formatting was successful by the end of the wait and consequent save did not have this problem. Just throwing this here to see if others faced this issue. I faced this issue both with my personal repo and also the repo shared by @mattcroat
cc. @reinink
from prettier-plugin-tailwindcss.
@reinink Can you add support for @shopify/prettier-plugin-liquid
? This is for Shopify themes. #98
from prettier-plugin-tailwindcss.
@sameeranand1 Done: #102 π€
This has been released as 0.2.0-beta.3
.
from prettier-plugin-tailwindcss.
@ramblehead Hey! So we actually already have support for prettier-plugin-jsdoc
, see here: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
from prettier-plugin-tailwindcss.
It is still not working for me:
.prettierrc.cjs
module.exports = {
trailingComma: "all",
tabWidth: 2,
semi: true,
singleQuote: false,
plugins: [
"prettier-plugin-packagejson",
"prettier-plugin-jsdoc",
"@trivago/prettier-plugin-sort-imports",
// Must be loaded last
"prettier-plugin-tailwindcss",
],
// prettier-plugin-tailwindcss
tailwindAttributes: ["classProp"],
// @trivago/prettier-plugin-sort-imports
// https://github.com/trivago/prettier-plugin-sort-imports#usage
importOrder: ["^#styles(.*)$", "<THIRD_PARTY_MODULES>", "^#(.*)$", "^[./]"],
importOrderSeparation: true,
importOrderSortSpecifiers: true,
importOrderGroupNamespaceSpecifiers: true,
};
package.json
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
"prettier": "3.1.0",
"prettier-plugin-jsdoc": "^1.1.1",
"prettier-plugin-packagejson": "^2.4.6",
"prettier-plugin-tailwindcss": "^0.5.7",
"tailwindcss": "^3.3.5",
"typescript": "5.2.2",
"vite": "^5.0.0",
},
π€
from prettier-plugin-tailwindcss.
Seems like it's not working when used with "prettier-plugin-organize-attributes"
from prettier-plugin-tailwindcss.
@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.
This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
The issue was a problem with my VSCode, all worked after restart
from prettier-plugin-tailwindcss.
I'm in a vue 3 project where we use pug and the plugin is not really working with my current setup. I'm also using vetur as a vscode extension that is set to format everything with prettier (html, pug, etc).
Something strange is happening because if I add new lines or extra tabs, the formatter will kick in on save and do its job. However it does not format the order of tailwind classes, even in regular html template tags.
The only time I got the tailwind order to work was by doing the npx prettier --write ./some/file.vue
. This only worked in a regular html template tag, not pug.
I tried removing the dependency for the prettier pug plugin and testing it out and it still does not order classes. Is it conflicting with something else?
"dependencies": {
"core-js": "^3.8.3",
"ionicons": "^6.0.1",
"vue": "^3.2.13",
"vue-i18n": "^9.2.0-beta.30",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@prettier/plugin-pug": "^1.19.2",
"@vue/cli-plugin-babel": "~5.0.0-rc.2",
"@vue/cli-plugin-eslint": "~5.0.0-rc.2",
"@vue/cli-plugin-router": "~5.0.0-rc.2",
"@vue/cli-plugin-vuex": "~5.0.0-rc.2",
"@vue/cli-service": "~5.0.0-rc.2",
"@vue/eslint-config-airbnb": "^6.0.0",
"autoprefixer": "^10.4.2",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.0.3",
"eslint-plugin-vuejs-accessibility": "^1.1.0",
"postcss": "^8.4.5",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.7",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"tailwindcss": "^3.0.18"
}
from prettier-plugin-tailwindcss.
plugin not work when i use @apply on .scss file ? :(
from prettier-plugin-tailwindcss.
Seem to be having problems when parsing Angular HTML files too
from prettier-plugin-tailwindcss.
I don't know if it is also related to this, but I can't have prettier-plugin-tailwindcss
working alongside @tailwindcss/forms
. It says it doesn't find it.
from prettier-plugin-tailwindcss.
If your system can't find
@tailwindcss/forms
try reinstalling it withnpm install @tailwindcss/forms
.
Yes, but the problem arises when prettier-plugin-tailwindcss
is installed. If I uninstall it, I'm able to run prettier (with @tailwind/forms also installed), whereas it fails with prettier plugin tailwindcss added to my package.json.
from prettier-plugin-tailwindcss.
@nunocasteleira Can you share your prettier config file with us?
from prettier-plugin-tailwindcss.
Might be a bit of an edge case. But I am using Laravel and subsequently Blade template files.
So that prettier runs on these files I am using @shufo/prettier-plugin-blade. But as this issue suggests, Tailwind classes are not sorted when run with this plugin.
Did you find a way to get this working?
from prettier-plugin-tailwindcss.
@joshmedeski I have a very minimal prettierrc, it's a Vue project:
{
"endOfLine": "lf",
"singleQuote": true,
"printWidth": 120
}
from prettier-plugin-tailwindcss.
@nunocasteleira I'm stumped. I don't know why @tailwindcss/forms
has any relationship with prettier-plugin-tailwindcss
.
from prettier-plugin-tailwindcss.
from prettier-plugin-tailwindcss.
Also appears to be incompatible with prettier-plugin-jsdoc.
My prettier config:
{
"$schema": "http://json.schemastore.org/prettierrc",
"endOfLine": "lf",
"jsxSingleQuote": true,
"printWidth": 100,
"quoteProps": "consistent",
"singleQuote": true,
"trailingComma": "none",
"useTabs": false,
"overrides": [
{
"files": ["**/*.html"],
"options": {
"singleQuote": false,
"tabWidth": 2
}
}
]
}
from prettier-plugin-tailwindcss.
No one has taken ownership to fix this issue.
For now, I suggest everyone expect prettier-plugin-tailwindcss
can only be used on its own right now, your other prettier plugins aren't compatible.
After reviewing prettier/prettier#10261 it seems like this plugin is highjacking the typescript parser and so any other plugin that also wants to interact with the same parser they are ignored. If someone understands this please feel free to experiment with rewriting this plugin so other plugins continue to work as expected.
from prettier-plugin-tailwindcss.
Both prettier-plugin-style-order
and prettier-plugin-css-order
do not work with prettier-plugin-tailwindcss.
from prettier-plugin-tailwindcss.
Also appears to be incompatible with https://github.com/prettier/plugin-php
from prettier-plugin-tailwindcss.
@kagurazaka-0 This works like a charm, thanks a lot! βοΈπ₯°
from prettier-plugin-tailwindcss.
Seems this one might be incompatible as well https://github.com/withastro/prettier-plugin-astro
Agreed, having this issue as well.
same.
from prettier-plugin-tailwindcss.
Seems this one might be incompatible as well https://github.com/withastro/prettier-plugin-astro
Agreed, having this issue as well.
same.
same.
from prettier-plugin-tailwindcss.
It seems to be incompatible with https://github.com/ggascoigne/prettier-plugin-import-sort
from prettier-plugin-tailwindcss.
I'm using SvelteKit and used the instructions but it doesn't work.
Reproduction:
Settings:
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
}
Thank you! π
from prettier-plugin-tailwindcss.
@TrevorLeeman are you using pnpm? I think I noticed the same thing when I moved to pnpm from yarn (v1). I'll try and get back to this thread with a result.
EDIT: confirmed. Reverting to Yarn solved the issue :)
Wow spot on, that was my problem as well. Thank you!
from prettier-plugin-tailwindcss.
So with this release already available is it still necessary to edit the .prettierrc
file? I tried without editing but it doesn't work.
// .prettierrc
{
// ..
"plugins": [
"@prettier/plugin-pug",
"prettier-plugin-organize-attributes",
"prettier-plugin-tailwindcss" // It does not work if I put it here
],
"pluginSearchDirs": false
}
and if I put prettier-plugin-tailwindcss
last it doesn't work either.
from prettier-plugin-tailwindcss.
Another breaking plugin is prettier-plugin-jsdoc
from prettier-plugin-tailwindcss.
prettier-plugin-svelte
We've bundled the
prettier-plugin-svelte
directly intoprettier-plugin-tailwindcss
, so if you'd like to use this plugin with Svelte, just uninstallprettier-plugin-svelte
and everything should work as expected.
Isn't working with Prettier v3
'Prettier for VSCode' extension just completely stops formatting .svelte
files
Adding prettier-plugin-svelte
back and reloading VSCode formats both .svelte
files and Tailwind class names
.prettierrc
{
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}
from prettier-plugin-tailwindcss.
@itz4rv This issue is 20 months old. The instructions have changed such that we no longer have to bundle Svelte and you include it in your plugins list like you'd do that with any other.
This is documented in the readme: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins
from prettier-plugin-tailwindcss.
Related Issues (20)
- tailwindFunction not working HOT 1
- VS Code format on save fights with prettier format (while linting) HOT 9
- Problem with eslint and prettier-plugin-tailwindcss [Prettier Plugin] HOT 7
- Inconsistent sorting between formatting all files and a single file HOT 2
- Bad sorting for 'dark:' pseudoselector HOT 2
- Styling an existing component doesn't seem to work in twin.macro/react-twc HOT 1
- `3xl:` ends up in front of `xl` and `2xl` HOT 2
- Breaks with import assertions (`assert { type: 'json' }`) HOT 4
- [v4] Order discrepancy between prettier-plugin-tailwindcss and intellisense HOT 1
- Please add support for `zackad/prettier-plugin-twig-melody` HOT 9
- If `node_modules` folder does not contain prettier-plugin-astro, it does not work HOT 1
- Modifier order does not change HOT 2
- Doesn't work with Shopify Liquid extension HOT 2
- reordering doesn't respect backets when there is a space HOT 2
- Sorting of extended values does not work properly HOT 6
- [Prettier Plugin] v4 Different `prettier/prettier` eslint rule sorting behavior and results on Windows and Linux emitting warnings on the other OS HOT 3
- Plugin integration with the third-party imports plugin is not working HOT 3
- Support placeholder (generic class attribute) for tailwindAttributes
- The plugin does not work for classes declared in <script setup> as variables. HOT 1
- Inconsistent sorting of classes HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prettier-plugin-tailwindcss.