Vue3配置tailwindcss并在vscode中智能提示

男娘i 2023-10-10 21:48 78阅读 0赞

![48b839f675b640ca9d86b35f05b43cf9.png][]有能力的可以看官网教程：[Install Tailwind CSS with Vite - TailwindCSS中文文档 | TailwindCSS中文网][Install Tailwind CSS with Vite - TailwindCSS_ _ TailwindCSS]

在已有项目总安装依赖：并创建配置文件

npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

然后修改tailwind.config.js配置文件内容：

/** @type {import('tailwindcss').Config} */
    export default {
      content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

在项目中添加tailwind.css样式文件：![f4f910026c7245359c2a576d7036ab82.png][]

并在main.ts中引入：![c24825dd11a0403e8463a2f52b88e65b.png][]

然后在vscode中安装Tailwind CSS IntelliSense插件支持智能提示： ![9128dd40e4ac4a879d48739c16ba3c5c.png][]

然后开始添加class类，就会有智能提示了，如果没有的话，前面添加一个空格，应该就会有了：![398bc232239145fa801f78d966b6331d.png][]

[48b839f675b640ca9d86b35f05b43cf9.png]: https://img-blog.csdnimg.cn/48b839f675b640ca9d86b35f05b43cf9.png
[Install Tailwind CSS with Vite - TailwindCSS_ _ TailwindCSS]: https://www.tailwindcss.cn/docs/guides/vite#vue
[f4f910026c7245359c2a576d7036ab82.png]: https://img-blog.csdnimg.cn/f4f910026c7245359c2a576d7036ab82.png
[c24825dd11a0403e8463a2f52b88e65b.png]: https://img-blog.csdnimg.cn/c24825dd11a0403e8463a2f52b88e65b.png
[9128dd40e4ac4a879d48739c16ba3c5c.png]: https://img-blog.csdnimg.cn/9128dd40e4ac4a879d48739c16ba3c5c.png
[398bc232239145fa801f78d966b6331d.png]: https://img-blog.csdnimg.cn/398bc232239145fa801f78d966b6331d.png