css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)

萧寂173

已于 2024-05-22 20:16:24 修改

阅读量1.1k

点赞数 13

分类专栏： vue css 文章标签： css html vue.js

于 2023-12-28 16:03:29 首次发布

本文链接：https://blog.csdn.net/weixin_68658847/article/details/135263929

版权

vue 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

安装教程

中文官网教程

配置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;

在main.js内引入index.css

import { createApp } from 'vue'
import './index.css'
import App from './App.vue'

createApp(App).mount('#app')

编辑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>