TailwindCSS使用体验

TailwindCSS出了jit模式算是重度使用者，给我最大的使用体验就是不用对class进行语义化命名，就这一点，我就感觉很爽，命名困难户的春天。 有的人会觉得class写一堆会很难看，就跟在写style一样，但是我一直都是原子化css方案的使用者 不管是开发还是维护我都不会觉得很难看，没有较大负担

个人优化体验：业务组件的css可以直接写TailwindCSS的class 一些通用的组件 如input btn 可以抽出来方便维护 感觉.class行数都少了很多 也简洁一点

.xl-input {
    @apply w-full rounded-[4px] px-[24px]  text-[14px] color-[rgb(50,50,50)] relative;
}

jit模式2.2版本才支持，先贴个配置。中文文档暂时还没这方面的直译，使用了jit模式就可以在class上写具体的值最后生成class，如

<div class="w-[48px] h-[48px] ml-[12px]"></div>
<!-- 浏览器看到的css -->
<style>
.h-[48px] {
    height:  48px;
}
.w-[48px] {
    width: 48px;
}
.ml-[12px] {
    margin-left: 12px;
}
<style>

jit配置,只需要在tailwind.config.js将mode设置为jit

module.exports = {
  mode:'jit',
  purge: [],
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
  },
   variants: {
     extend: {},
   },
   plugins: [],
 }

实际项目中使用

ps：在合理范围内选择自己喜欢的 写的爽才最重要 在多人合作的项目中需要先听取他人的意见再采用合适的方案 目前我已经安利这个给我司的前端 得到的反馈都挺好的