如何设置 WebStorm 以使用 PostCSS/Tailwind

Posted 2023-03-06

【中文标题】如何设置 WebStorm 以使用 PostCSS/Tailwind

【英文标题】：How to setup WebStorm to use PostCSS/Tailwind

【发布时间】：2021-03-11 03:04:48

【问题描述】：

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

我不知道如何设置 WebStorm 以实际使用 PostCSS 和文件观察器来实际运行并执行任何有用的操作。我问过 JetBrains，他们没有实际有用的信息。

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

【问题讨论】：

您在设置文件观察器时遇到了哪些问题？你在终端运行什么命令来编译你的文件？

【参考方案1】：

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

WebStorm 2020.3 中的Tailwind CSS 插件添加了方便的功能，例如 Tailwind CSS 类完成和 CSS 预览。它不需要任何配置，只要你有 node_modules/tailwindcss/tailwind.css 和 node_modules/.bin/tailwind 本地文件，它就会工作。

如果您使用tailwndcss 2.x 版，请确保您在package.json 中也有对postcss 和autoprefixer 的依赖项，如https://tailwindcss.com/docs/upgrading-to-v2#install-tailwind-css-v2-0-and-post-css-8 中所述

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

【参考方案2】：

我正在寻找一个我忘记并偶然发现这篇文章的设置。

如果你想让 phpStorm 理解你的 CSS 文件中的 PostCSS，你需要做的就是去Preferences -> Languages & Frameworks -> Stylesheets -> Dialects。在那里，您将 Project CSS Dialect 设置为 PostCSS。