css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)
安装教程
配置vscode智能提示插件
Tailwind CSS IntelliSense // 直接在vscode插件市场搜索即可原始的HTML里面使用
- 新建文件夹
- npm init -y 初始化项目
安装相关依赖
// 依次执行以下两个命令
npm install -D tailwindcss
npx tailwindcss init在 tailwind.config.js 文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
// 这里配置的是src文件夹下面所有的html被匹配到
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中。根目录下新建src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;package.json新增节点
"scripts":{
"watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}在src/index.html使用
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold bg-cyan-300 text-red-500">
Hello world!
</h1>
</body>
</html>html引入只需要引入src下面的output.css(运行npm run watch会打包生成output.css的)文件即可
至此,当我们运行npm run watch会打包生成output.css文件内也会增加对应的类，热更新的
vue内使用安装教程
这里使用vite配置
创建项目
npm create vite@latest安装依赖
npm install // 先全部安装
npm install -D tailwindcss postcss autoprefixer // 再安装需要的依赖初始化两个文件
npx tailwindcss init -p设置tailwind.config.js文件的目录位置
/** @type {import('tailwindcss').Config} */
export default {
// 当以下被匹配到的文件内的类名变化时,会被匹配到,同时会在打包目录下新增类对应的样式
purge:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {},
},
plugins: [],
}在src下面新增index.css
@tailwind base;
@tailwind components;
@tailwind utilities;package.json新增节点
"scripts":{
"watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}运行npm run watch会命令会打包生成output.css文件内也会增加对应的类，热更新的
在入口的index.html使用生成的output.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>编辑App.vue
<script setup>
import { ref, reactive } from 'vue';
const count = ref(0);
</script>
<template>
<div class="text-9xl text-center text-blue-600 sm:block">
hello world
</div>
</template>
<style scoped lang="scss">
</style>运行项目
npm run dev效果图
具体的类名和样式需要大家去官网查询,这里我推荐的是中文网(因为能看懂)
rem使用和配置
在Tailwindcss中，w-1代表0.25rem，w-0.5代表0.25rem，但是没有w-0.1和w-0.2和w-0.3这种，也没有精确的rem例如0.1rem，0.2rem，0.3rem，针对这种我们需要自己去配置 打开tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
// 当以下被匹配到的文件内的类名变化时,会被匹配到,同时会在打包目录下新增类对应的样式
purge:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],
content: [],
theme: {
extend: {
width: {
'0.1': '0.1rem', // 添加自定义宽度
// 可以继续添加其他需要的宽度
},
// ... 下面可以添加更多属性配置
},
},
plugins: [],
}按照上面配置完以后会发现有了w-0.1并且值也是0.1rem了，如果需要更多参数的话往下加就可以了，其他属性的也可以在这里面配置
定义根元素大小，后面的rem都是基于这个根元素这个值进行缩放的
也可以参考我这篇博客动态获取根元素大小，实现自适应，我这里用的就是第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/jinweizhe/cdn/adaptive.js"></script>
<script>
window['adaptive'].desinWidth = 750// 设计图宽度
window['adaptive'].baseFont = 28// 没有缩放时的字体大小
window['adaptive'].maxWidth = 750// 页面最大宽度 默认540
window['adaptive'].init()// 调用初始化方法
</script>
<style>
div {
width: 0.3rem;
height: 0.3rem;
background-color: red;
}
</style>
</head>
<body>
<div>123</div>
</body>
</html>注意：打包出来后直接运行dist/index.html会报错跨域，但是放到服务器上面跑就没问题，因此打包完可以用live serve运行或者部署到静态托管网站去看，不能直接双击打开，或者把打包的文件放到根目录下运行
uniapp内使用教程
项目根目录下运行如下命令
npm install -D tailwindcss postcss autoprefixer初始化两个文件
npx tailwindcss init -p设置tailwind.config.js文件的目录位置
/** @type {import('tailwindcss').Config} */
// 即在pages下面的所有的.vue.js.ts.jsx.tsx文件均可使用样式类，还有index.html
module.exports = {
purge:['./index.html','./pages/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}在/pages下新建assets/input.css文件,内容如下:
@tailwind base;
@tailwind components;
@tailwind utilities;package.json新增节点
"scripts":{
"watch":"npx tailwindcss -i ./pages/assets/input.css -o ./pages/assets/output.css --watch"
}运行npm run watch会命令会打包生成output.css文件内也会增加对应的类，热更新的
在入口的index.html使用生成的output.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!-- 引入生成的css文件 -->
<link rel="stylesheet" href="./pages/assets/output.css" />
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>在pages/index.index.vue文件内添加如下代码进行测试
<script setup>
import { ref, reactive } from 'vue';
const count = ref(0);
</script>
<template>
<div class="text-9xl text-center text-blue-600 sm:block">
hello world
</div>
</template>
<style scoped lang="scss">
</style>可以发现没问题了,接下来就是单位转换,由于uniapp提供了upx单位进行适配,不会upx配置的点击查看配置配置完以后就可以理解为750upx刚好为一个屏幕的宽度
配置upx单位转换(tailwind默认rem单位),在tailwind.config.js文件内
/** @type {import('tailwindcss').Config} */
module.exports = {
purge:['./index.html','./pages/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
fontSize: Array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}upx`;
return map;
}, {}),
width: Array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}upx`;
return map;
}, {}),
extend: {},
},
plugins: [],
}后续需要改什么属性的尺寸单位,直接往里面塞就行,length是该属性的最大值
注意:一定按照上面的路径配,或者自己改路径也行,就是生成的output.css文件一定要在pages/components/.vue文件内的style标签内(这有这些文件夹和位置的css的upx单位会被转化为各大平台的适配尺寸,本人踩了坑,刚开始直接把output.css生成到了static文件夹内,但是这个文件夹不被解析,因此output.css里面的upx单位不会被转换)
如果将该项目编译到微信小程序报了如下错误
[ WXSS 文件编译错误] ./app.wxss
unexpected token "*"
2 | /*每个页面公共css */
3 |
> 4 | *, ::before, ::after {
| ^
5 | --tw-border-spacing-x: 0;
6 | --tw-border-spacing-y: 0;
7 | --tw-translate-x: 0;
at files://app.wxss#4(env: Windows,mp,1.06.2402040; lib: 3.5.4)将output.css文件的第一行*, 去掉即可,这个报错原因是小程序不支持*选择器,因此将*选择器去掉即可解决该报错