اگر از Tailwind CSS V4 استفاده می کنید و متوجه شده اید که افزونه IntelliSense در VS Code همانطور که انتظار می رود رفتار نمی کند ، قطعاً شما تنها نیستید. خوشبختانه ، رفع مشکل بسیار ساده است – تنظیم سریع در تنظیمات کد VS شما نمی تواند مسئله را در هیچ زمان برطرف کند.
رفع ساده
در نسخه های قبلی مانند Tailwind v3 ، افزونه IntelliSense به طور خودکار پیکربندی شما را بدون هیچ گونه تلاش اضافی تشخیص می دهد. با این حال ، با V4 ، Tailwind دیگر فقط به a بستگی ندارد tailwind.config.js پرونده درعوض ، شما باید به افزونه Intellisense دقیقاً در کجا نگاه کنید – به ویژه ، در پرونده اصلی CSS خود که در آن با استفاده از Tailwind وارد می کنید:
@import "tailwindcss";
تنظیمات کد VS خود را به روز کنید
برای به دست آوردن همه چیز به ترتیب ، تنظیمات VS Code خود را باز کرده و مسیر را به پرونده اصلی CSS خود اضافه کنید. به عنوان مثال ، اگر برگه اصلی شما در آن قرار دارد src/styles/main.css، خود را به روز کنید .vscode/settings.json پرونده شامل:
{
"tailwindCSS.experimental.configFile": "src/styles/main.css"
}
این ترفند کوچک تضمین می کند که افزونه IntelliSense می داند که پیکربندی Tailwind شما را در کجا پیدا کنید ، که به نوبه خود تمام پیشنهادات کلاس را که به آن اعتماد دارید بازیابی می کند.
نگاهی به ساختار پروژه
در اینجا یک طرح نمونه از یک پروژه با استفاده از این تنظیمات آورده شده است:
my-tailwind-project/
├── .vscode/
│ └── settings.json // Contains the Tailwind CSS config path for VS Code
├── node_modules/
├── public/
│ └── index.html // Main HTML file linking to your generated CSS
├── src/
│ ├── styles/
│ │ ├── main.css // Primary CSS file with Tailwind import
│ │ └── components.css // Additional styles for individual components
│ ├── components/
│ │ └── Button.js // Sample component file
│ └── pages/
│ └── index.js // Application entry point
├── package.json // Project dependencies and scripts
└── postcss.config.js // PostCSS configuration file
پیچیدن
با به روزرسانی تنظیمات کد VS خود برای اشاره مستقیم به پرونده اصلی CSS خود ، می توانید آن سکسکه های Intellisense را از بین ببرید. این تغییر ساده باعث می شود روند توسعه شما به راحتی در حال اجرا باشد و تضمین می کند که همیشه پیشنهادات صحیح کلاس Tailwind را در نوک انگشتان خود داشته باشید.
اگر به موضوعات دیگری رسیدگی کرده اید یا سؤال دارید ، لطفاً در زیر نظر خود را رها کنید. برنامه نویسی مبارک!
شما می توانید مستندات رسمی را در مورد این موضوع در https://github.com/tailwindlabs/tailwindcss-intellisense؟tab=readme-ov-file#experimental-extension-settings بررسی کنید.
