uniapp 中使用tailwind 遇到的问题 Error: PostCSS plugin tailwindcss requires PostCSS 8.

已于 2022-01-30 16:54:37 修改
阅读量3.3k 收藏 1
点赞数
分类专栏： 其他 文章标签： vue.js uni-app
于 2022-01-30 16:52:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010589442/article/details/122753896
版权

今天在uniapp中安装tailwind 2.2.16 时，按照官网的安装完成

使用tailwind cli 构建css文件时 报错：

 于是按照官网指引：在这种情况下，您应该安装 PostCSS 7 兼容性版本。

我又按照指引卸载重装

再次使用Tailwind CLI 还是报错，一样的错误

Error: PostCSS plugin tailwindcss requires PostCSS 8.

 再试，还是一样

我发现下载的tailwindcss兼容版本号为2.2.17，官网文档写的2.2.16

于是我又全部卸载

npm uninstall tailwindcss postcss autoprefixer

再重新安装指定版本的tailwindcss 2.2.16

npm install -D tailwindcss@^2.2.16

然后又直接执行npm install postcss-cli autoprefixer  没有指定版本号

 默认下载了最新的postcss-cli 9.1.0

然后再次执行：

就构建成功了，不知道为啥，记录下 

之前也试过tailwindcss 3.0+ ，执行也很·顺利，但是创建的tailwind.css文件只有8K，基本没有什么样式，完全不能用，有时间再研究研究3.0+吧 

百息
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tailwindcss-typography:Tailwind CSS插件生成排版工具和文本样式组件
05-02
黑人的命也是命 意识到。 生气。 做得更好。 需求变化。 尽一切可能显示您的支持。 单击上面的链接以查找抗议，请愿书和其他帮助方法。 不要让它变得安静。 Tailwind CSS的版式插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-typography@2.x ）。 安装 npm install tailwindcss-typography 用法 // tailwind.config.js module . exports = { theme : { textIndent : { // defaults to {} '1' : '0.25rem' , '2' : '0.5rem' , } ,
webpack-tailwindcss:在 Webpack 中使用 TailwindCSS
07-23
webpack-tailwindcss 此模板旨在帮助您基于 Webpack + TailwindCSS 启动您的项目，同时保持最佳性能实践设置，因此您不必担心基础知识。 它为您设置了一些设置，因此您不必在文档、代码拆分和 ESBuild 构建中查找它们，这应该非常快。 还设置了带有 livereload 的本地开发。 用法 要使用此模板，请单击右上角的“使用此模板”绿色按钮。 将存储库克隆到您的计算机 安装依赖项 - npm ci 配置视图在。 npm 任务 npm start - 在http://localhost:8080上运行live-server并在更改时重新加载浏览器 npm run build - 在生产模式下构建资产 webpack 设置包括 由 ESBuild (FAST) 完成的 JS 和 CSS 转换和缩小 使用mini-css-extract-plugin
命令行搭建uniApp项目运行报错 PostCSS plugin autoprefixer requires PostCSS 8
最新发布
weixin_39666797的博客
04-15 127
大致意思是：PostCSS插件自动修复器需要PostCSS 8。更新PostCSS或降级此插件。今天创建项目无法运行报错，记录一下问题。创建完成后，进入目录并启动。再次运行项目就完美解决。
tailwindcss-scrollbar:Tailwindcss插件来自定义浏览器滚动条
05-13
tailwindcss-滚动条 Tailwindcss插件可自定义浏览器滚动条。 安装 # Using npm npm install -D @gradin/tailwindcss-scrollbar # Using Yarn yarn add -D @gradin/tailwindcss-scrollbar 然后将插件添加到tailwind.config.js文件。 module . exports = { theme : { // ... } , plugins : [ require ( '@gradin/tailwindcss-scrollbar' ) , ] , } 配置 您可以自定义滚动条的大小和颜色。 module . exports = { theme : { // ... } , plugins : [
uniapp-tailwind-uview-starter:利用uniapp + tailwindcss + uview构建的一套基础模板，可以使用Webstorm或者vscode开发
04-03
uniapp-tailwind-uview-starter 利用uniapp + tailwindcss + uview构建的一套基础模板 背景：之前用uniapp + uview开发了一大一小两个小程序， css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwindcss ，研究之后发现用Hbuilder创建的自由度比较低，于是选择了用Vue-cli4了Vue-cli4 。 要求： Node.js> 12 项目地址 项目初始化 我选择了预设模板。 我的Webstorm默认使用pnpm包管理，这是第一个坑，启动项目时报错，于是rm -rf node_modules ，重新使用yarn安装依赖，然后npm serve正常启动。 第二个坑是要求Webstorm设置Nodejs v12以上，否则tailwind不会智能提示。 如果是想要启动微信小程序的话，选择dev:mp-w
postcss-multiple-tailwind:轻松处理项目中的多个 tailwindcss 配置
07-24
PostCSS-Multiple-Tailwind 插件可轻松处理多个配置。 +-- admin | +-- index.css | +-- tailwind.config.js +-- front-end | +-- index.css | +-- tailwind.config.js +-- postcss.config.js +-- package.json 这允许您为两个 css 文件设置不同的主题，或者为两者设置不同的清除设置。 （非常方便，可以让您的所有配置共享同一个基础。） 基本用法 添加@multiple-tailwind; 到您的输入文件。 @multiple-tailwind ; @tailwind base; @tailwind components; @tailwind utilities; Postcss-多顺风将插入tailwindc
Vue3中遇到问题：PostCSS plugin tailwindcss requires PostCSS 8 解决方案
阿正的梦工坊
02-16 3282
踩坑
Error: PostCSS plugin tailwindcss requires PostCSS 8
ll1027521的博客
07-21 998
解决方法是： • npm uninstall tailwindcss postcss autoprefixer • npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Syntax Error: Error: PostCSS plugin tailwindcss/autoprefixer requires PostCSS 8.
qubes的专栏
01-03 1634
vue中引入tailwindcss 启动时，命令行报错 2 种错误。先删除已安装的npm包 yarn npm 按需选择。再重新安装 yarn npm 按需选择。
Day 117/200 PostCSS plugin tailwindcss requires PostCSS 8
xinghuowuzhao的博客
04-06 805
1、启动项目报错 Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users 2、安装包版本问题 卸载现有版本 npm uninstall tailwindcss postcss autoprefixer 安装正确版本
解决安装 tailwindcss requires PostCSS 8问题
甄_的博客
03-01 699
收到的错误信息表明 "tailwindcss" 插件需要使用 PostCSS 8，而当前的设置使用的是较旧版本的 PostCSS。将Tailwind 每个层的指令添加到您的主 CSS 文件中。到您的文件中，或项目中配置 PostCSS 的任何位置。但是试了好多把postcss升级都还是有问题，然后。2.将 Tailwind 添加到 PostCSS 配置中。4.将 Tailwind 指令添加到您的 CSS 中。使用文件中配置的任何命令运行构建过程。在文件中添加所有模板文件的路径。3.配置您的模板路径。
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
qq_45288220的博客
03-05 363
vue中引入tailwindcss 启动时 报此种错误我的 node 版本 是 v16.15.0我vue2 使用的是yarn。
Error: PostCSS plugin tailwindcss requires PostCSS 8.
LACERBA
04-27 1061
解决方法： # 删除原安装包 npm uninstall tailwindcss postcss autoprefixer # 安装低版本包 npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
uniapp微信小程序安装tailwindcss编译失败的解决思路
ChauncyWu的博客
07-24 2382
uniapp微信小程序安装tailwindcss编译失败的解决思路
webpack postcss Error: PostCSS plugin autoprefixer requires PostCSS 8.
ZhiAng99的博客
10-07 1001
出现这种情况是你下载autoprefixer版本不兼容 控制下版本就可以了
tailwindcss 如何在 uniapp 中使用
imoo的笔记
09-25 1200
另外，如果需要兼容小程序，可以再加入 https://www.npmjs.com/package/@uni-helper/vite-plugin-uni-tailwind 这个插件，否则部分样式会出现问题。直接使用https://tailwindcss.com/docs/guides/vite这篇官方教程的写法是跑不通的，摸索以后整理了一下，最关键的是第五步。
报错：Loading PostCSS Plugin failed: Cannot find module ‘postcss-url‘
qq_33911541的博客
12-23 1145
报错：Loading PostCSS Plugin failed: Cannot find module 'postcss-url'
在postcss文件中配置TailWind Css
07-14
要在PostCSS文件中配置Tailwind CSS，你需要执行以下步骤： 1. 首先，确保你的项目中已经安装了PostCSS和Tailwind CSS。你可以使用以下命令进行安装： ``` npm install postcss tailwindcss ``` 2. 接下来，在你的项目根目录下创建一个名为postcss.config.js的文件。在该文件中，添加以下配置： ```javascript module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] } ``` 3. 接下来，在你的项目根目录下创建一个名为tailwind.config.js的文件。在该文件中，可以配置你的Tailwind CSS选项。这里是一个示例配置： ```javascript module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: {}, plugins: [], } ``` 你可以根据你的需求进行自定义配置，具体的配置选项可以参考Tailwind CSS官方文档。 4. 最后，在你的CSS文件中导入Tailwind CSS。你可以创建一个名为styles.css的文件，并在其中导入Tailwind CSS： ```css @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; /* 这里可以添加你自己的样式 */ ``` 5. 现在，当你运行PostCSS时，它将使用配置好的插件和选项来处理你的CSS文件，其中包括Tailwind CSS。 希望这些步骤能帮助到你配置Tailwind CSS在PostCSS中。如果你有任何进一步的问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值