tailwindcss ui: Add tailwindcss prettier rules

[Morishiri]

Closes #5795

Standard scenarios:

Before:

module.exports = {
  "trailingComma": "es5",
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": "Routes.*",
      "options": {
        "printWidth": 999
      }
    }
  ],
}

After:

module.exports = {
  "trailingComma": "es5",
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": "Routes.*",
      "options": {
        "printWidth": 999
      }
    }
  ],
  "tailwindConfig": "./web/config/tailwind.config.js",
  "plugins": [
    require('prettier-plugin-tailwindcss'),
  ],
}

After with --force (no changes):

module.exports = {
  "trailingComma": "es5",
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": "Routes.*",
      "options": {
        "printWidth": 999
      }
    }
  ],
  "tailwindConfig": "./web/config/tailwind.config.js",
  "plugins": [
    require('prettier-plugin-tailwindcss'),
  ],
}

Scenario when user has something in plugins already:

Before:

module.exports = {
  "trailingComma": "es5",
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": "Routes.*",
      "options": {
        "printWidth": 999
      }
    }
  ],
  "plugins": [
    require('some-other-plugin'),
  ],
}

After:

module.exports = {
  "trailingComma": "es5",
  "bracketSpacing": true,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "overrides": [
    {
      "files": "Routes.*",
      "options": {
        "printWidth": 999
      }
    }
  ],
  "plugins": [
    require('prettier-plugin-tailwindcss'),
    require('some-other-plugin'),
  ],
  "tailwindConfig": "./web/config/tailwind.config.js",
}

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	61f0ab4
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62daca34e70b6500093a6752

[simoncrypta]

@Morishiri Thanks again for doing this, this plugin is a big productivity boost while working with TailwindCSS. 😄

When I tested it, I got 2 problems.
First, in the export object, the key don't have quote and value have single quote like this :

 module.exports = {
  trailingComma: 'es5',
  bracketSpacing: true,
  ...
  }

You can check the default file https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/template/prettier.config.js

Secondly, like in the example you wrote, tailwindConfig and plugins should be in the bottom of the file, but I get it inside the overrides option. You probably need to test your regex from a new project.

Tell me what you think :)

[Morishiri]

I will check that out.

[Morishiri]

@simoncrypta please take a look again

[simoncrypta]

@Morishiri It's looking good ! Last thing, I think prettier-plugin-tailwindcss should be in the package.json on the root, otherwise that will cause error on the output console for Prettier on VS Code.

[simoncrypta]

That's probably mean 2 different installation process.

[simoncrypta]

Hey @Morishiri
Just check-in, see if everything is all right or if you need help :)
No pressure !

[Morishiri]

Hey @Morishiri Just check-in, see if everything is all right or if you need help :) No pressure !

Yes,
planning to take on all the unfinished PRs I have opened here over the weekend. Didn't have much time recently.

[Morishiri]

@simoncrypta done I think ;)

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 61f0ab4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 14 targets

• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build

---

Sent with 💌 from NxCloud.

[simoncrypta]

Everything look perfect !
Sorry for the delay, and thank you very much for this ! 😄

[vincentri]

Hi, looks like this one fail. I cannot install tailwind.

[vincentri]

[Morishiri]

Strange, but it succeeds for me without issues, maybe differences in yarn version?

Command failed with exit code 1: yarn add -W -D prettier-plugin-tailwindcss
Unknown Syntax Error: Unsupported option name ("-W").

[Morishiri]

@simoncrypta I think we're using yarn v3, is it some new fact? Was it on yarn v1 before?

https://github.com/redwoodjs/redwood/blob/main/.yarnrc.yml#L19

[simoncrypta]

@Morishiri Yes we use yarn v3 since the V1, it was V1 before and is still possible to have yarn v1 inside the project.
It weirds that I didn't see this issue, is it happen with Yarn V1 or V3 ?

[simoncrypta]

I guessed we will need to check the yarn version and add the -W flag on the V1 (or V3) only ?

[Morishiri]

is it happen with Yarn V1 or V3 ?

happens on v1

@simoncrypta #6119