Not working after install

[Adi Unnithan]

Hi there, sorry for the ambiguous title :) I'm not sure what I'm doing wrong here, but I'm trying to get this working with my CRA project with Prettier. I'm using Prettier 2.1.2

Setup
I added "prettier-plugin-tailwind": "2.2.0", to my package.json and installed. Verified in node_modules that I have the right package with the files (since I know this npm package name referred to something else before).

.prettierrc

{
  "semi": false
}

babel-plugin-macros.config.js

module.exports = {
  twin: {
    autoCssProp: true,
    config: "./src/tailwind.config.js",
    debug: false,
    debugPlugins: false,
    debugProp: true,
    preset: "styled-components",
  },
}

src/tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    content: ["./src/**/*.html", "./src/**/*.tsx"],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Usage
I tried running Prettier CLI over all of these with no luck:

I use Twin Macro, so I first tried:

const Logo = tw.div`font-bold text-3xl font-hairline`

Then I tried the twin macro inline in styled-components:

const styles = styled.div`h1 { ${tw`font-sans text-3xl font-hairline`}}`

Then I tried just using className in JSX itself:

<div className="font-sans text-6xl font-hairline text-teal-500">

Any idea if there's an issue or something I'm doing wrong? Thanks!

[Ari Seyhun]

Hey, sorry about your issue! I think it might be because your tailwind config is in your src directory.

I will add an prettier option to specify where your tailwind config is soon.

[Ari Seyhun]

Hi @adiun , I've added a new option in the prettier config: twConfig - this lets you specify the path to your tailwind.config.js file.

Try to update prettier-plugin-tailwind to the latest version and add to your .prettierrc file:

twConfig: "./src/tailwind.config.js"

[Adi Unnithan]

Thanks @acidic9! Unfortunately after updating (I'm using 2.2.6) I now get the error in #13.

[Info - 1:23:45 PM] Cannot find module 'svelte-prettier-plugin' Require stack: - /Users/adi/Documents/Projects/Terminal/app/node_modules/prettier-plugin-tailwind/lib/languages/svelte.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/prettier-plugin-tailwind/lib/languages/index.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/prettier-plugin-tailwind/lib/index.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/prettier/index.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/@eslint/eslintrc/lib/config-array-factory.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/@eslint/eslintrc/lib/index.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/eslint/lib/cli-engine/cli-engine.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/eslint/lib/cli-engine/index.js - /Users/adi/Documents/Projects/Terminal/app/node_modules/eslint/lib/api.js - /Users/adi/.vscode/extensions/dbaeumer.vscode-eslint-2.1.13/server/out/eslintServer.js Occurred while linting /Users/adi/Documents/Projects/Terminal/app/src/components/Shell.tsx:1

[Ari Seyhun]

@adiun Can I ask are you using NPM or Yarn? And what version of it are you using? Also what version of prettier?

[Ari Seyhun]

It seems related to #13 🤔