Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

prettier-plugin-tailwindcss

Package Overview
Dependencies
Maintainers
4
Versions
178
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

prettier-plugin-tailwindcss - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

4

package.json
{
"name": "prettier-plugin-tailwindcss",
"version": "0.1.0",
"description": "",
"version": "0.1.1",
"description": "A Prettier plugin for sorting Tailwind CSS classes.",
"main": "dist/index.js",

@@ -6,0 +6,0 @@ "files": [

@@ -5,5 +5,7 @@ # prettier-plugin-tailwindcss

> Note, this plugin is only compatible with Tailwind CSS v3.
## Installation
> Note that `prettier-plugin-tailwindcss` is only compatible with Tailwind CSS v3
Install `prettier-plugin-tailwindcss` via npm as a dev-dependency.

@@ -14,4 +16,10 @@ ```sh

By default the plugin will look for a [Tailwind config file (`tailwind.config.js`)](https://tailwindcss.com/docs/configuration) in the same directory as your Prettier config file. If your Tailwind config file is somewhere else you can specify this using the `tailwindConfig` option (paths are resolved relative to the Prettier config file):
This plugin follows the Prettier autoloading convention, so once it's installed it should automatically start working.
## Resolving your Tailwind configuration
By default this plugin will look for a [Tailwind configuration file](https://tailwindcss.com/docs/configuration) (`tailwind.config.js`) in the same directory as your Prettier configuration file.
If your Tailwind configuration file is somewhere else, you can specify this using the `tailwindConfig` option in your Prettier configuration. Note that paths are resolved relative to the Prettier configuration file.
```js

@@ -24,2 +32,8 @@ // prettier.config.js

_If a Tailwind config file cannot be found then the default Tailwind configuration will be used._
If a Tailwind configuration file cannot be found then the default Tailwind configuration will be used.
## Compatibility with other Prettier plugins
To make this plugin work, we had to build it in a way that the Prettier plugin system was not designed for. We had to extend the core parsers in Prettier with our own custom parsers. And while this works, it makes this plugin incompatible with other Prettier plugins that are build the same way. This is a known limitation of Prettier.
One example of this incompatibility is with the [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) plugin. It's not possible to use the Svelte plugin at the same time as the Tailwind CSS plugin. However, as a workaround, we bundled the Svelte plugin into this plugin. Simply remove `prettier-plugin-svelte` from your Svelte project when installing the `prettier-plugin-tailwindcss` plugin, and everything should work fine.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc