如何设置 WebStorm 以使用 PostCSS/Tailwind

How to setup WebStorm to use PostCSS/Tailwind

我有最新的 WebStorm 2020.3。它支持 Tailwind CSS,我安装了 PostCSS 插件并使用 NPM 安装了 Tailwind CSS 和各种插件。

我不知道的是如何设置 WebStorm 以实际使用 PostCSS 和文件观察器来实际 运行 并做任何有用的事情。我问了 JetBrains,他们没有实际有用的信息。

我只需要一些简单的例子来说明如何让 WebStorm 使用 Tailwind。

初始项目设置不依赖于 IDE。对于快速入门,Tailwind CSS 站点上的文档应该会有所帮助。

WebStorm 2020.3 中的

Tailwind CSS 插件添加了方便的功能,例如 Tailwind CSS 类 完成和 CSS 预览。它不需要任何配置,只要您拥有 node_modules/tailwindcss/tailwind.cssnode_modules/.bin/tailwind 本地文件,它就会立即运行。

如果您使用的是 tailwndcss 版本 2.x,那么请确保您的 package.json 中还依赖于 postcssautoprefixer,如 https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8 中所写

基本设置不需要配置任何文件观察器。

我正在搜索我忘记的设置并偶然发现了这个 post。

如果您希望 PHPStorm 理解 CSS 文件中的 PostCSS,您需要做的就是转到 Preferences -> Languages & Frameworks -> Stylesheets -> Dialects。在那里,您将 Project CSS Dialect 设置为 PostCSS .