vite安装Tailwind CSS, 查找不认识的属性

已于 2024-04-22 11:56:11 修改
阅读量330 收藏
点赞数
分类专栏： # css 文章标签： vue.js 前端 javascript
于 2023-11-02 18:18:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47999208/article/details/134187784
版权

安装 - Tailwind CSS 中文网 (nodejs.cn)

这是官网，平常我练习一般会用vite脚手架

我们选择这个vite模块

可选择React和Vue版本的，这里选择react的按照操作，没问题的话就要出问题了

1、在npm run dev的时候我是出现了这么个问题，解决办法在项目里重新

npm install vite或者

npm install后npm run dev

2、在浏览器输入localhost:5174后是出现了

原因是啥，react除了.js,.jsx,.ts,.tsx文件还有根文件.html文件在tailwind.config.js里添加html就好了

然后我们要写代码了，这里我们就要给Vscode装几个插件了

1、代码提示插件，让你写代码快的飞起，安装后，重启下Vscode，如下。

2、Tailwind Fold  用于闭合css代码的，还不如长长的，不太好改代码

然后根据程序员𝐋𝐞𝐫𝐭𝐞的主页 - 抖音 (douyin.com) 写了如下代码​​​​​​ 动态组件 (gitee.com)

当我们在官网或是官方所提供的案例看到不认识的tailwind CSS的时候可以通过这里去查找

Tailwind CSS 最大宽度_w3cschool

每天吃饭的羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
tailwind-vite:一个带有Tailwind CSS和Vite的简单HTML入门软件，用于开发和生产
05-03
带有Vite的Tailwind HTML Starter 描述 使用和创建页面和UI组件。 基于 使用前端构建工具的单页HTML开发工作流将为我们处理顺风顺水，并为我们提供了一个实时服务器，该服务器将在每次进行更改时刷新。 关于 使用前端构建工具的单页HTML开发工作流将为我们处理顺风顺水，并为我们提供了一个实时服务器，该服务器将在每次进行更改时刷新。 然后，构建脚本将清除CSS并将其最小化以进行生产。 你会需要 要开始使用，您需要： 开始使用 下载仓库 在VS Code中打开文件夹 打开VS代码“终端” 通过运行安装依赖npm install -D tailwindcss postcss autoprefixer vite 运行'dev'脚本 转到本地主机以查看开发服务器 根据需要编辑文件 运行“ build”脚本以使用生产文件创建“ dist”文件夹。 清除并缩小了CSS文件。 附
electron-vite-tailwind-starter:这个 Starter 结合使用 Electron、Vite 和 Tailwindcss。 它试图坚持最佳实践
07-23
Electron 12 + Vite 2 + Tailwind 2 - 启动器 这个 Starter 结合使用 、 和 。 它试图遵循在提到的最佳实践 它也使用 。 安装 yarn 发展 yarn dev 建造 yarn build
使用Vite安装TailwindCSS
敲厉害的燕宝的博客
03-30 1413
Tailwind CSS 是一个基于原子类的 CSS 框架，它提供了一种不同于传统 CSS 框架的方式来构建用户界面。
vite-wind:基于Vite和Tailwindcss 2的Vue 3样板启动器
05-28
随风 在制品 :construction: :construction: :construction: 这是一个基于 + + + 的样板，您可以克隆该存储库并使用到目前为止可用的组件，该模板还支持深色模式。 如果您喜欢它，请留下星星以表示支持 演示版 用法 通过运行克隆此项目 git clone https://github.com/boussadjra/vite-wind.git 项目设置 npm install 编译和热重装以进行开发 npm run dev 编译并最小化生产 npm run build 屏幕截图
learn-agenda:学习Vue 3 + Vite + TailwindCSS的概念和实现
04-14
学习：议程 使用 + + + 发展 npm run dev 生产 npm run build 文件将在dist文件夹中 演示版 看
TailwindCSS在vite项目中的安装与使用
最新发布
前端菜菜DayDayUp的博客
05-14 445
TailwindCSS在vite项目中的安装与使用
使用 Vite 安装 Tailwindscss
myarche的博客
05-24 1066
使用 Vite 安装 Tailwindscss
使用Vite，Vue 3，Tailwind CSS和TypeScript构建的仪表板入门模板。-Vue.js开发
05-27
使用Vite，Vue 3，Tailwind CSS和TypeScript构建的仪表板入门模板。 V-Dashboard使用Vite，Vue 3，Tailwind CSS和TypeScript构建的Dashboard入门模板。 从https://github.com/tailwindcomponents/dashboard复制并转换为Vue。 演示https://v-dashboard.vercel.app/项目设置纱线编译和热重装以进行开发纱线开发编译并最小化生产纱线的构建许可证和版权:copyright:Robert C Soriano，已获得MIT许可证。
vite-tailwind-template
02-21
Vite + Tailwind CSS入门 入门模板 Tailwind UI用户 如果您有权访问 ，请按照以下步骤添加它： 安装第一方插件： yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio 将插件添加到tailwind.config.js ： // tailwind.config.js module . exports = { // ... plugins : [ require ( '@tailwindcss/forms' ) , require ( '@tailwindcss/typography' ) , require ( '@tailwindcss/aspect-ratio' ) , ] } 安装 yarn 发展 yarn dev
在 Vue 3 和 Vite 安装 Tailwind CSS
NolanKy 的 技术博客
01-12 1062
安装 npm install -D tailwindcss@latest postcss@latest autoprefixer@lates 创建您的配置文件 接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件： npx tailwindcss init -p 这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件： // tailwind.config.js module.exports = { purge: [],
vite-tailwind-starter:初学者使用Vite + Tailwind进行超快速原型制作
03-19
Vite + Tailwind CSS入门 入门模板 Tailwind UI用户 如果您有权访问 ，请按照以下步骤添加它： 安装第一方插件： yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio 将插件添加到tailwind.config.js ： // tailwind.config.js module . exports = { // ... plugins : [ require ( '@tailwindcss/forms' ) , require ( '@tailwindcss/typography' ) , require ( '@tailwindcss/aspect-ratio' ) , ] } 安装 yarn 发展 yarn dev
vite-react-tailwind-starter:初学者使用Vite + React + Tailwind CSS 2
04-29
Vite + React + Tailwind CSS入门 受到 启发 请注意，如果您有权访问 ，则可以按照以下步骤添加它： 安装@tailwindcss/ui ： yarn add @tailwindcss/ui 将插件添加到tailwind.config.js无需进行其他任何更改： /...
tailwindcss+vue3+vite+preline
04-09
3. Tailwind CSS: 一种实用优先的CSS框架，它不包含预设样式，而是提供了一系列可配置的原子类，使得开发者能够通过组合这些类快速构建出一致、自定义的用户界面，减少编写重复CSS代码的工作量。
nuxt-vite-tailwindcss
03-25
nuxt-vite-tailwindcss构建设置# install dependencies$ yarn install# serve with hot reload at localhost:3000$ yarn dev# build for production and launch server$ yarn build$ yarn start# generate static ...
tailwindcss+vue3+vite+preline项目搭建
xo19882011的专栏
04-09 454
tailwindcss+vue3+vite+preline项目搭建
tailwindcss在vite esm模式下的配置修改
qq_33982898的博客
03-16 444
如果是在vite.config.ts中配置的postcss，require() 是 nodejs的方法，自然无法使用了。vite6将弃用cjs（CommonJS ）采用ESM（ESModule），所有的js文件将编译为ESM语法
TailWindCSS+Vite+Vue3打造个性化在线简历项目
程序员成长指北
03-04 173
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群前言为了找到新工作，自己制定了如下小目标：✅ 1. 重启技术博客 https://blog.fridolph.top，坚持输出✅ 2. 做几个实战项目（于是这篇文就诞生了）⏰ 3. 整理前端知识大纲，形成思维导图⏰ 4. 逛掘金，刷面经 + 整理（有些想法，于是开了新坑，再过几天就 OK）???? 5...
vite+vue+tailwindcss项目配置
vx_1097122362的博客
03-04 257
最近接了个外包项目，要求用tailwindcss+vue3+vite来做，配置项目的时候遇到了一些问题，这里记录一下。
vite配置tailwind
06-02
为了在Vite中使用Tailwind CSS，您需要按照以下步骤进行配置： 1. 安装Tailwind CSS和相关依赖： ```bash npm install -D tailwindcss@latest postcss@latest autoprefixer@latest ``` 2. 在项目根目录下创建一个tailwind.config.js文件： ```js // tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } ``` 3. 在项目根目录下创建一个postcss.config.js文件： ```js // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` 4. 在Vite的配置文件中引入Tailwind CSS和PostCSS： ```js // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], css: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }) ``` 5. 在应用程序中使用Tailwind CSS，例如在App.vue文件中： ```html <template> <div class="bg-gray-100"> <h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1> </div> </template> <style> /* 通过 @tailwind 前缀来使用 Tailwind CSS */ @tailwind base; @tailwind components; @tailwind utilities; </style> ``` 现在，您已经成功地将Tailwind CSS集成到Vite中，可以开始使用它来构建漂亮的UI界面了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值