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, // > 子节点选择器  
  		divideWidth: false,  
  		divideColor: false,  
  		divideStyle: false,  
  		divideOpacity: 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"

以上步骤即可在页面中使用tailwindcss了

缺点就是每次运行项目都要自己手动去执行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 初始化就有了