tailwindcss+vue3+vite+preline项目搭建

最近原子化样式比较火，用了一下确实还不错，也确实是用一些标准的样式能够使网页看起来比较统一，而且能够极大的减轻起名字的压力，有利有弊，就不一一细说了。
之前开发都是习惯于使用vite+vue3来开发的，此次搭建项目也是以这个为例子。
tailwindcss搭建的流程，参考https://tailwindcss.com/docs/guides/vite#vue

创建项目

npm create vite@latest my-project -- --template vue
cd my-project

安装tailwindcss及一些插件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改一下tailwind.config.js配置文件

export default {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

把tailwind指令添加到主样式文件中

一般来说样式文件在 ./src/style.css 中，直接添加到结尾

@tailwind base;
@tailwind components;
@tailwind utilities;

启动～

npm run dev

修改一下试试

修改App.vue的文件内容

<template><h1 class="text-3xl font-bold underline">Tailwind CSS + Vue 3 + Vite</h1><h1 class="text-2xl font-bold underline">Hello world!</h1>
</template>

显示效果如下：
请添加图片描述

增加preline UI样式库

发现了一个比较好用的样式库，感觉花里胡哨的用多了会审美疲劳，用这个样式库感觉就还能够看的持久一些。
样式库地址https://preline.co/index.html

安装方式

npm i preline

修改tailwind.config.js

module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}","node_modules/preline/dist/*.js",],plugins: [require('preline/plugin'),],
}

修改index.html文件

把样式表引入放在body下边

<script src="./node_modules/preline/dist/preline.js"></script>

齐活，在app.vue中加入一个新的东西看看效果。

<template><h1 class="text-3xl font-bold underline">Tailwind CSS + Vue 3 + Vite</h1><h1 class="text-2xl font-bold underline">Hello world!</h1><div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert"><div class="flex p-4"><div class="flex-shrink-0"><svg class="flex-shrink-0 size-4 text-blue-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path></svg></div><div class="ms-3"><p class="text-sm text-gray-700 dark:text-gray-400">This is a normal message.</p></div></div></div>
</template>