其实想写在前面的，tailwind css 这种框属于是慢工出细活的，主要优点是慢工出细活，一经部署至少是双端可行，但是缺点也很明显工期要拉长，而且快速突击增加模块的话多版扩展困难，说白了这种框架适宜团队多人慢工但是出大活。小团队只有一俩个前端的实际用这个东西很勉强，实际会拖慢相关工期速度

本次独立开发项目使用 tailwind css 主要问题是项目要求的双端需求及兼容PC和移动端这样，所以使用tailwind css 进行尝试。

首先遇到的第一个问题配置覆盖问题
1.按照中文文档的说明进行构建，我以为构建的是2.0的文档，但是实际产生的效果，是我安装了3.0最新版本的 tailwind css。
2.按照模式进行构建和构建配置文件，无法准确的覆盖目标文件夹。

更新了 tailwind.config.js 之后，进行了文件夹的配置

content: [
'./src/views//*.{html,js,vue}',
'./src/components//*.{html,js,vue}',
],

该配置正确之后，可以覆盖到指定路由下的文件夹了。

3. 意识到的点，貌似tailwind css 没法定义组件到多少px 这种精细化复刻，拿对应类型往上标数据这种，估计开发起来对照文档应该相当的耗时。(备注第三点已经解决，解决方法就是，在vscode的里面，下了一个插件可以直接显示出多少px)

4. 新的问题又出现了是否可以优化css文件的大小。(好像这个问题框架优化过了，牛批)

第二个问题就是插件，其实插件很重要，没有px，没法对设计稿进行一个高度还原，所以还是费了一些时间去安装插件。

Tailwind CSS IntelliSense 这个插件 高亮没有在vscode 里面展示出来。就是说没有启用

要启用Tailwind CSS IntelliSense插件的高亮功能，您需要确保已安装Tailwind CSS和VSCode编辑器，并已将Tailwind CSS IntelliSense插件安装到VSCode。

然后，打开VSCode的“设置”菜单，搜索“tailwindCSS.experimental.classRegex”，并将其设置为true。这将启用Tailwind CSS IntelliSense插件的高亮功能。如果您已经完成了这些步骤但仍然无法看到高亮，请尝试重新启动VSCode编辑器。

如果您遇到其他问题，请参考Tailwind CSS IntelliSense插件的文档和社区支持资源以获取帮助。

其实这个问题解决， 我试了很多配置，最终解决方案是升级vscode 版 其实还是版本不匹配的问题。

其实版本不一致还不报错这个就其实挺离谱的，但是呢还是要多注意。

补几个图吧，就是插件能够实时展示转换px效果

以及tailwinds的配置表

/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./src/views/**/.{html,js,vue}',
'./src/components//*.{html,js,vue}',
"./node_modules/flowbite//*.js"
],
theme: {
extend: {
padding: {
px8: '8px',
'40px': '40px',
'72px': '72px'
},
margin: {
'2px': '2px',
'6px': '6px',
'8px': '8px',
'10px': '10px',
'60px': '60px',
'18': '4.5rem',
'38': '9.5rem'
},
backgroundColor: {
color_242424: '#242424',
color_FFE249: '#FFE249',
color_4D4D4D: '#4D4D4D',
color_363636: '#363636',
color_362B55: '#362B55',
color_333333: '#333333',
color_282828: '#282828',
color_f5f5f5: '#f5f5f5',
color_616161: '#616161',
color_EDE7FF: '#EDE7FF',
color_FFF7CB: '#FFF7CB',
color_E8F8D4: '#E8F8D4',
color_F8F8F8: '#F8F8F8',
color_e5e5e5: '#e5e5e5',
color_7A91B4: '#7A91B4',
color_FAFAFB: '#FAFAFB',
color_ADADAD: '#ADADAD',
color_rgba80_80_80: 'rgba(80, 80, 80, 0.7)',
color_rgba255_255_255_07: 'rgba(255, 255, 255, 0.8)',
color_rgba255_250_220_063: 'rgba(255, 250, 220, 0.63);',
},
textColor: {
color_FFE249: '#FFE249',
color_242424: '#242424',
color_78D200: '#78D200',
color_616161: '#616161',
color_A282FF: '#A282FF',
color_ECC914: '#ECC914',
color_49D3FF: '#49D3FF',
color_BEBEBE: '#BEBEBE',
color_7A91B4: '#7A91B4',
color_A9A9A9: '#A9A9A9'
},
width: {
w_376: '376px',
w_418: '418px',
w_580: '580px',
w_600: '600px',
w_1200: '1200px',
w_1130: '1130px',
'82': '22rem',
'70px': '70px',
'116px': '116px',
'200px': '200px',
'250px': '250px',
'300px': '300px',
'376px': '376px',
'480px': '480px',
'584px': '584px',
},
height: {
'24px': '24px',
'36px': '36px',
'60px': '60px',
'150px': '150px',
'200px': '200px',
'210px': '210px',
'240px': '240px',
'250px': '250px',
'300px': '300px',
'340px': '340px',
'18': '3.8rem',
},
lineHeight: {
'18': '3.8rem',
'3rem': '3rem!Important',
'3.5rem': '3.5rem',
'24px': '24px',
'60px': '60px',
},
inset: { // 定制相对位置 top left right bottom
'15': '60px',
}
},
},
plugins: [
require('flowbite/plugin')
],
}
其实有一个挺稀碎的问题，tailwind css 及其考验设计对整体图块的把控能力，我这些配置表其实都是设计加出来的， 如果设计师 大把出现 25px， 33px，51px, 这种很极限的设计格式，那整个项目的配置代码也是稀碎，所以还需要和设计师不断的沟通协调，希望他把模块可以规范成一个整体的有序的代码。其实在工作中接触过许多就是老外的项目，这些外国友人的项目其实奉行的都是极简主义，所以 tailwind 这种框架对他们来说反而是一种快速落地的方案。