theron-wang / VS2022-Editor-Support-for-Tailwind-CSS

Unofficial VS2022 Tailwind CSS extension for IntelliSense, linting, sorting, and more to enhance the development experience in Visual Studio 2022.
https://marketplace.visualstudio.com/items?itemName=TheronWang.TailwindCSSIntellisense
MIT License
86 stars 5 forks source link

[Bug] Tailwind ignores settings in tailwind.extension.json inside a multi project solution #32

Closed ynnob closed 7 months ago

ynnob commented 7 months ago

Hey i am not really shure what exactly iks happening but i try my best to describe the setup:

TLDR: Reopening the Project Solution leads the tailwind build process to overwrite the input.css file while ignoring the settings in tailwind.extension.json

Steps:

  1. Solution that contains multiple different .NET Projects
  2. I added a new ASP.NET Core MVC Project
  3. I activated tailwind css through your setup button in the context menu
  4. It installed all node modules and added the tailwind.config.js
  5. It did NOT add the tailwind.extension.json that i am used to
  6. I copied the tailwind.extension.json from a working project and when adding/removing a file as input/output it gets correctly replaced in the tailwind.extension.json file.
  7. Running the tailwind build succeeds and works as expected

Now to the Bug:

  1. Close Visual Studio
  2. Reopen the Solution
  3. Tailwind build process will start and overwrites the input file in complete disregard of the tailwind.extension.json
  4. To confirm this -> Revert the input.css and save -> Tailwind build will again overwrite the input.css
  5. Check the tailwind.extension.json -> still OK input and output are correct but the build does ignore it.
  6. Only after using the context menu again to set the input file the build will use the correct output.

Extension Version: 1.2.0

Visual Studio Microsoft Visual Studio Enterprise 2022 (64-Bit) - Current Version 17.8.4

Files: tailwind.extension.json {"ConfigurationFile":"tailwind.config.js","InputCssFile":"input.css","OutputCssFile":"wwwroot\\css\\app.css"}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
    content: ['./**/*.{razor,html,cshtml}'],
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                'sans': ['Inter', ...defaultTheme.fontFamily.sans],
                'serif': ['Inter', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                'text': 'rgb(var(--color-text) / <alpha-value>)',
                'background': 'rgb(var(--color-background) / <alpha-value>)',
                'primary': 'rgb(var(--color-primary) / <alpha-value>)',
                'secondary': 'rgb(var(--color-secondary) / <alpha-value>)',
                'accent': 'rgb(var(--color-accent) / <alpha-value>)',
                'link': 'rgb(var(--color-link) / <alpha-value>)',
            },
        },
    },
    plugins: [],
}

package.json

{
  "devDependencies": {
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "minify": "npx tailwindcss -i input.css -o wwwroot\\css\\app.min.css --minify"
  }
}

Tailwind Extension Options: image

theron-wang commented 7 months ago

The issue should be resolved in 1.2.1. If you still encounter issues, I'd recommend deleting and re-installing the extension, since I found that the previous extension version used an incorrect version of System.Text.Json (hence causing the tailwind.extension.json issues).

Thank you for the bug report!

ynnob commented 7 months ago

Thanks. Is there a way for you to enable the watch on rebuild only in the scope of the tailwind project. Atm the tailwind build process starts even in c sharp files of undependend projects in the same solution.

Or does this depend on the declared file paths in the config?

theron-wang commented 7 months ago

If I’m understanding you correctly, you can just click the Build menu at the top and click Start Tailwind CSS Build Process. This should only build the tailwind file and nothing else.

ynnob commented 7 months ago

I mean this starts something similar to npx tailwindcss -i ./src/input.css -o ./src/output.css --watch When i save a file then the build process is triggerd. But this also happens outside of the ASP.NET Project for example in a Class Library Project when saving a c# file or while debugging and saving a class in a api project.

But i guess the rebuild is somehow "bound" to hot reload or is the "build tailwind css" just running the normal build command with watch in the background?

Then it is my config file that maybe tells tailwind to scan more files then i want. Have to check that on monday. Thanks anyway!