tailwincss个人笔记

tailwincss 4 ，在官网搜vite的安装方法，就可以了。在postcss.config.js使用插件就可

深色模式

taiwincss 4默认开启深色模式，3以及3之前的都要手动开启深色模式

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

深色模式的话，一般用就是在前面加个dark:就可以，比如

    <div class="bg-green-50 dark:bg-red-700">暗黑模式测试</div>

会自动检测CSS 媒体功能，如果是光亮模式，会调用bg-green-50，如果是暗黑模式，会覆盖他，调用dark:bg-red-700

重用样式

创建组件以调用他

比如一个button，写得那么多class，可以直接创建一个组件来调用他

使用 @apply 抽取组件类

但是创建组件的方法有点麻烦了，虽然很多个class，但也不至于大到要创组件吧。

而且官方建议说最好不要经常用，不然文件也会越来越大，而且如果这样用为什么还要用tailwindcss呢，脱裤子放屁了

可以使用tailwincss的方式，将多个class打包，组成一个新的class，再用新的class就行

<button class="btn-indigo">
  Click me
</button>

<style>
  .btn-indigo {
    @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
  }
</style>

btn-indigo 就调用了

但是官方说为了避免bug，还是专门放在一个css文件里面使用比较好

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

换算方式

比如现在的w-1，实际上是width: 0.25rem;，而在我们的浏览器是4px，也就是说16px = 1rem