Tailwind does not understand changes to imported scss files.

[alisafariir]

Hi,
I came across a case in version 3 of Tailwind.
Tailwind does not understand the change when I use preprocessor and want to import a bunch of SCSS files together. The change takes effect when I save the style.scss file or the tailwind.config.js file. Please note the following example, I implemented this example in both Angular and Vue and did not get the result
Repository URL

https://github.com/asafari72/tailwind-vue-issue.git

Example
For example, I've this structure for styling my project:

├── projects
│   ├── styles
│   	├── styles.scss
├── src
│   ├── index.scss
├── tailwind.config.js

in styles.css I've to write class for a simple button like:

@layer components{
.btn {
	@apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600;
 }
}

and in the index.scss I've

@tailwind  base;
@tailwind  components;
@tailwind  utilities;

@import  "../projects/styles/styles.scss"

when I change the same property in the .btn class change not working but if I save tailwind.config.js or index.scss file its work.

Thanks.

packages.json :

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "sass": "^1.45.0",
    "tailwindcss": "^3.0.1",
    "typescript": "^4.4.4",
    "vite": "^2.7.1",
    "vue-tsc": "^0.29.8"
  }
}

Node.js version:
16.13.0

Browser:
Chrome version 96.0.4664.93

Operation system:
Window 11 version 21H2

IDE :
VSCode 1.63.0

[adamwathan]

Hey thanks for the detailed issue! This is a duplicate of this issue ultimately: #4838

Going to close and consolidate there.