HbuilderX 创建项目 使用TailwindCss

Tailwind CSS 是一个利用共用程序类（Utilize Class：类本身中没有特定的含义，可以用在任何地方）的css框架。

（）

官网地址：https://www.tailwindcss.cn/

TailWind Css的优势

1.响应式设计：

（）

Tailwind css 内置了响应式设计功能，可以根据不用的屏幕大小和设备自动调整样式.

2.模块化：

Tailwind css 采用模块化设计理念，将样式分为不用模块，如布局，颜色，字体等。

3.灵活性

允许开发人员自定义样式，并根据项目的需求进行扩展，支持自定义类和属性，比如在配置文件中配置未注册的样式类，或者使用text-[#121212]、w-[100px]这种固定值的方式

4.快速开发

Tailwind css 通过提供大量的预定义类和实用程序类，可以大大加快开发速度。开发人员可以通过简单的添加类名来应用样式，无需编写大量的自定义css代码

5.可扩展性

Tailwind css 具有良好的可扩展性，可以与其他框架和库集成使用，如：Vue.js、React和Angular。

安装

通过 npm 安装 tailwindcss，然后创建你自己的tailwind.config.js 配置文件。

npm install -D tailwindcss

 然后输入npx tailwindcss init命令会生成一个tailwind.config.js文件

npx tailwindcss init

 配置tailwind.config.js文件

/** @type {import('tailwindcss').Config} */module.exports = {  content: [],  theme: {    extend: {},  },  plugins: [],}/** @type {import('tailwindcss').Config} */module.exports = {// https://ask.dcloud.net.cn/article/40098  separator: '__', // 如果是小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500    corePlugins: {    // 预设样式    preflight: false, // 一般uniapp都有预设样式，所以不需要tailwindcss的预设    // 以下功能小程序不支持    space: false, // > 子节点选择器    pideWidth: false,    pideColor: false,    pideStyle: false,    pideOpacity: false,    },  content: [  './pages/**/*.{vue,js}',  // './main.js',    './App.vue',    // './index.html'   ],  theme: {extend: {},  },  plugins: [],}

在根目录下新建tailwind-input.css 

@tailwind base;/* 如果是小程序的话，这一行注释掉，因为tailwind base模块提供的一些样式选择器是基于*，这在小程序中会报错 */@tailwind components;@tailwind utilities;

tailwind CLI构建 

npx tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch

这行指令意思是，启动 tailwind cli，以 ./tailwind-input.css 为输入文件，以 ./tailwind.config.js （默认）为配置文件，开始扫描配置中 content 字段指定的【项目文件】，并输出结果css文件到 ./static/tailwind.css 中，并且监听这些【项目文件】的变化，实时更新输出结果文件 

在 main,js或者App.vue种引入tailwind cli 的输出结果

例如，在main.js中

import "@/static/css/tailwind.css"

缺点就是每次运行项目都要自己手动去执行npx tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch,不方便 所以必须改成自动化

在根目录的package.json文件中配置

"scripts": {"tailwind-dev": "tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css --watch","tailwind-build": "tailwindcss -i ./tailwind-input.css -o ./static/css/tailwind.css"},

如果没有package.json文件，在根目录执行npm init 初始化就有了