tqwewe / prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.

Home Page:https://www.npmjs.com/package/prettier-plugin-tailwind

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting error after installation

vvo opened this issue · comments

Hi there, after installing prettier-plugin-tailwind and running prettier I get:

> yarn lint
yarn run v1.22.5
$ prettier --check '**/*.*' && eslint . --ext js
no tailwind.config.js file found TypeError: pluginModule.default is not a function
    at /Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:147:39
    at Array.forEach (<anonymous>)
    at TWClassesSorter.getAllSelectors (/Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:136:34)
    at new TWClassesSorter (/Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:35:37)
    at Object.<anonymous> (/Users/vvo/Dev/turnshift/node_modules/prettier-plugin-tailwind/lib/index.js:12:23)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
Checking formatting...
All matched files use Prettier code style!
✨  Done in 10.89s.
> cat tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
      spacing: {
        18: "4.5rem",
      },
    },
  },
  variants: {
    // useful for disabled input when not dirty
    opacity: ["responsive", "disabled"],
    cursor: ["responsive", "disabled", "focus"],
    pointerEvents: ["responsive", "disabled"],
    visibility: ["responsive", "group-hover"],
    borderStyle: ["responsive", "hover"],
    position: ["responsive", "group-hover"],
    zIndex: ["responsive", "group-hover"],
    textDecoration: ["responsive", "hover", "focus", "group-hover"],
  },
  plugins: [
    require("@tailwindcss/ui")({
      layout: "sidebar",
    }),
    require("@tailwindcss/typography"),
  ],
  purge: ["components/**/*.js", "pages/**/*.js"],
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

Any idea on what's wrong?

Hm strange, let me look into this now - will get back to you in a minute

Looks like tailwindcss 1.9 was just released and has some changes which break the prettier plugin. I'll work on a fix now and ping you when it's done.

Fixed in v2.1.9 - you'll need to upgrade your package version.

It works now yep, thanks!