使用Vite安装Tailwind CSS
Tailwind 不是一个组件库，而是一个样式集合 Tailwind 的使用，就是写出对应的类名，这样样式就会被渲染上去 Tailwind 就有点类似 将css代码写成 盒子的类名【网上称这个为 CSS 原子化】 Tailwind 工作原理就是 扫描文件中的 类名，生成对应的样式，写入CSS文件中
网上说Tailwind是postcss的一个插件
用vscode编辑器的时候，可以下载一个插件，这样会有提示
比如我希望我的字体大小为20px，颜色为绿色； 当我鼠标覆盖上去之后，颜色变为黑色；
- 正常情况下，我的代码
<div className='box'> Hello World! </div>.box{ font-size:20px; color:#16a34a; } .box:hover{ color:#000; }
- Tailwind的代码
<div text-[20px] text-[#16a34a] hover:text-black> Hello World! </div>
- Tailwind CSS 官网
https://tailwindcss.com/docs/installation/framework-guides
- Tailwind CSS 中文网
https://tailwind.org.cn/docs/installation
- Tailwind Vite框架使用教程
https://tailwindcss.com/docs/guides/vite
以下内容有一部分【借鉴的】网上的
1、安装Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
如果 生成
tailwind.config.ts文件
npx tailwindcss init --ts
安装完之后 项目 会生成文件
tailwind.config.js和postcss.config.js
2、配置文件
- 配置tailwind.config.js文件
/** @type {import('tailwindcss').Config} */
export default {
//定义 Tailwindcss 需要扫描哪些文件 用以 生成CSS类
content: [
"./index.html",
/*扫描src目录下的.js、.ts、.jsx、.tsx 文件；
如果你用的vue框架，在.{js,ts,jsx,tsx，vue}里面加上vue就行了；
注意：不要直接 ./，否则会 走到其他路径下 如nodo_modules文件里面*/
"./src/**/*.{js,ts,jsx,tsx}",
],
//配置 Tailwind 的 主题
theme: {
extend: {},//如果需要自定义主题 在里面添加配置
},
plugins: [],//需要配置 哪些 插件
}
- postcss.config.js 文件内容
export default {
plugins: { //指定需要使用的 插件、及其配置
tailwindcss: {},
//CSS插件 会在CSS属性添加适当的 前缀(`-webkit-`,`-moz-`等)，确保 不同浏览器的 兼容性
autoprefixer: {},
},
}
- 配置全局样式文件
两个都行，我试了一下，不过第一个会有三个warming，但是应该没有什么影响，能用就行
@tailwind base; /*tailwind 的基础样式*/
@tailwind components;/*tailwind 的组件样式*/
@tailwind utilities; /*tailwind 的工具样式*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
最后发现配置了tailwind.config.js文件可以生效，但是配置ts不能
- 在main.tsx中引入你的全局样式文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
//引入全局样式文件
import './index.css'
//引入tailwind.css【这段代码写不写都没有影响诶？】
import 'tailwindcss/tailwind.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
3、第一个Hello World
- App.tsx
import './App.css'
function App() {
return (
<>
<h1 className="text-3xl font-bold underline">
<div className="w-50 h-10 bg-yellow-200">Hello world!</div>
</h1>
</>
)
}
export default App
- 运行结果【页面展示】
4、浏览器解析出来的代码
可以看见 浏览器将代码解析出来后 相应的属性 会有相应的样式【我没有在css文件中写，就写了个居中】
让我们来看看div盒子里面的类名解析出来的代码【我没有找到w-50 T_T】
但是我们可以看见
h-10的样式代码中hight:2.5rem然后我将
h-10改为了h-1盒子的高度变成了hight:0.25rem那么就可以得出结论【默认情况！】：h为高度，-1为高度是 0.25rem 【4px】
w为宽度，-1应该也是 宽度为 0.25rem
bg应该是背景颜色的意思
其实官网上也有，仔细去找找，还是可以找到！！！【加油！！！】
在Tailwind 官网上有一个自定义颜色【颜色color】，里面 yellow-200 的确就是 页面背景展示的黄色哦
然后我去看看盒子的高度，不难发现 高度为40
- 任意值 【更多请见 官网 ；慢慢找，会找到的】
手动书写 任意值 那么怎么写呢，请见下文案例
<div className="w-[200px] h-[40px] bg-yellow-200">Hello world!</div>
那么请看页面解析的 css代码【我就不截图了，截图没有 复制粘贴来得快】 清楚明了的可以看见，盒子宽度为200px 高度为40px
.w-[200px] {
width: 200px;
}
.h-[40px] {
height: 40px;
}
5、Tailwind 和我的类名冲突 解决 办法
可以发现，在上面代码中，我的类名为border，而在Tailwind里面 也有个类名为border 那么遇到这种问题应该怎么解决呢？【网上问呗！】
那么以下就是我查到的解决方案
- 第一步：在 tailwind.config.js 配置文件中加入
prefix属性【如下图】
- 第二步：在你需要用到 Tailwind 的地方 加上你
prefix里面的内容【如下图】 这样你的 类名 就不会和 Tailwind 的类名冲突了【只要你别在你的类名前面也加上prefix里面的内容】
6、展示一下一天的学习成果
- 代码
import "./App.css";
function App() {
return (
<>
<h1>
<button
className="
tw-text-[#16a34a]
tw-text-[30px]
tw-font-bold
tw-underline
hover:tw-text-[#3b82f6]
tw-w-[200px]
tw-h-[45px]
tw-bg-yellow-200
hover:tw-w-[400px]
hover:tw-h-[90px]
tw-ease-in-out
tw-duration-1000
tw-rounded-[15px]
"
>
Hello world!
</button>
</h1>
</>
);
}
export default App;
- 页面
【声明：以上笔记仅仅只是我上班摸鱼进行一天学习到的知识，我还在继续学习，所有的只是我自己的理解，只是为了方便自己看的；如果有不足，请一定指出！！！】
