tailwindcss在使用cdn引入静态html的时候，使用vscode代码提示

原文：

Hey! The Intellisense extension does need a config file to work today. I would suggest creating one in your project root to enable the extension. An empty file will work just fine for this case if the defaults suit your needs.

If you want to customize the config and have those changes show up in Intellisense and work with the CDN you can import an ESM config file in the browser and tell the CDN to use it. Note that if you do this you don't get hot-reloading. The CDN is really only meant for super quick prototyping. We recommend installing from NPM and using something like Vite, Next, Astro, etc… for anything more substantial.

The following is an example config and HTML file where the config is shared between Intellisense and the CDN. In order for the config importing to work you still have to serve the files from a web server — opening them directly in the browser will not work.

 

vscode需要先安装Tailwind CSS IntelliSense插件

如果要在静态html中使用cdn调用的方式来加载tailwindcss，vscode是不会进行代码提示的，需要一个配置文件才能工作，所以需要在页面的根目录下新建一个文件：

tailwind.config.js：

export default {
  theme: {
    extend: {
      //
    },
  },
};

如果默认配置够用，那么哪怕配置项是空的也能正常工作，

然后是配置index.html：

<script src="https://cdn.tailwindcss.com/3.3.1"></script>
<script type="module">
  import cfg from "./tailwind.config.js";
  tailwind.config = cfg;
</script>

<!-- Your code here -->
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

注意要使用iis服务来启动网页，直接双击打开是没有效果的。