与scss一起使用时样式会不生效:

官方有说明不推荐,建议使用自带的预处理器(tailwindcss/nesting)

tailwindcss.com/docs/using-…

@apply

将tailwind类进行封装

@import

这是postcss的postcss-import插件

vue与tailwind

/* '..../styles/components/input.css' */
@layer components {
  /* input */
  .input {
    @apply p-input p-input-bordered rounded-xl;
  .input-info {
    @apply p-input p-input-info;
    background-color: #cffafe;
  .input-error {
    @apply p-input p-input-error;
    background-color: #fce4e4;
  .input-warning {
    @apply p-input p-input-warning;
    background-color: #fce4e4;
/* m_input.vue */
<script setup>
if ( props.dataConfirm !== props.data) {
    e.target.classList.remove("input-info")
    e.target.classList.add("input-error")
    e.target.parentNode.classList.add("tooltip-error")
} else {
    e.target.classList.remove("input-error")
    e.target.classList.add("input-info")
    e.target.parentNode.classList.remove("tooltip-error")
</script>
<style scoped>
@layer components {
  /* input */
  .input {
    @apply p-input p-input-bordered rounded-xl;
  .input-info {
    @apply p-input p-input-info;
    background-color: #cffafe;
  .input-error {
    @apply p-input p-input-error;
    background-color: #fce4e4;
  .input-warning {
    @apply p-input p-input-warning;
    background-color: #fce4e4;
</style>
这里需要加个@tailwind components,因为在Vue 和 Svelte 等组件框架的是独立的,tailwind 无法知道这里使用到了,需要显示地@tailwind xx,才能识别
/* m_input.vue */
<script setup>
if ( props.dataConfirm !== props.data) {
    e.target.classList.remove("input-info")
    e.target.classList.add("input-error")
} else {
    e.target.classList.remove("input-error")
    e.target.classList.add("input-info")
</script>
<style scoped>
@layer components {
  /* input */
  .input {
    @apply p-input p-input-bordered rounded-xl;
  .input-info {
    @apply p-input p-input-info;
    background-color: #cffafe;
  .input-error {
    @apply p-input p-input-error;
    background-color: #fce4e4;
  .input-warning {
    @apply p-input p-input-warning;
    background-color: #fce4e4;
@tailwind components;
</style>
@import是postcss中的一个插件,vite原生支持
xx-[xx]
自定义修饰符,不用非得用在tailwind css设定的那几个值,单位也更加灵活
.width {
  @apply w-[5rem] h-[50px];
前面的范围间隔很固定,当后面就不好猜了,为什么要猜,不是有插件支持IDE的提示吗?因为IDE的提示在内联写样式时不怎么灵敏
当任意值需要包含空格时，请使用下划线 ( _) 
可以与var(),url()结合
自定义类无法通过@apply二次封装
//其中btn是用自定义类,这里用它再次生成新类,失败了
.pagination {
    @apply btn bg-sky-400 hover:bg-sky-600 text-4xl border-0
正确的做法,使用@layer来生成
如果使用的是vue或svelte的话,@layer需要额外声明一句@tailwind xx
当使用esm的配置文件时,daisyUi的自定义类可以直接@apply使用,当但使用cjs的配置文件时,不可以,必须使用@layer指令,且不能写在vue的中,不然还是会报错
@player base
更改默认的html样式
@layer base {
    @apply text-2xl;
    @apply text-xl;
  /* ... */
@player components
二次封装css类,没有使用到的会被tree-sharking
生成的css类支持md: ,lg:等
@player utilities
@layer utilities {
  .content-auto {
    content-visibility: auto;
二次封装css类,没有使用到的会被tree-sharking
支持md: ,lg:等
发现utilities与components没有区别,作用纯粹是分类,实际功能一摸一样
全局tailwind css类
直接添加到tailwind.css里,不用使用@player,
但这样会有优先级问题,由于放在全局上,所以极容易被其他样式覆盖,产生自己所不期望的结果
@media 与 sm, lg...
支持通过sm,lg等关键值来断点
@media screen(sm) {
  /* ... */
当大量使用断点查询时
.book-card {  
    //一个个添加sm:
    @apply sm:flex-row sm:w-[90vw] sm:h-[50vh];
    //用@media screen(sm)
    @media screen(sm) {
      @apply flex-row w-[90vw] h-[50vh];
theme配置
自定义tailwind的内联类名,需要在tailwind.config.js里进行配置
//tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      borderRadius: {
        '4xl': '2rem',
保留预设的前提下进行扩展:
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
更改部分预设
要覆盖默认主题中的选项，请直接在 theme你的部分 tailwind.config.js:
tailwind.config.js
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
外部预设导入
tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  // ...
使用theme()访问预设值
.content-area {
  height: calc(100vh - theme(spacing.12));
如果需要访问包含点的值（例如 2.5间距刻度中的值），可以使用方括号表示法：
.content-area {
  height: calc(100vh - theme(spacing[2.5]));
hover:
after:
before:
搭配ui框架
添加前缀p-,防止命名冲突
import daisyui from "daisyui"
export default {
  content: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  theme: {
    extend: {},
  variants: {
    extend: {},
  plugins: [daisyui],
  daisyui: {
    prefix: "p-"
复制代码
  
分类：
 前端
 
标签：
 
CSS
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    用户4587236212751