Tailwind CSS 插件 #

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, addComponents, theme }) {
  // 插件逻辑
})

// tailwind.config.js
const myPlugin = require('./plugins/my-plugin')

module.exports = {
  plugins: [
    myPlugin,
  ],
}

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.text-shadow': {
      'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
    },
    '.text-shadow-lg': {
      'text-shadow': '4px 4px 8px rgba(0, 0, 0, 0.15)',
    },
    '.text-shadow-none': {
      'text-shadow': 'none',
    },
  })
})

<h1 class="text-shadow">文字阴影</h1>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities, theme }) {
  const shadows = theme('boxShadow')
  const textShadows = {}
  
  Object.keys(shadows).forEach(key => {
    textShadows[`.text-shadow-${key}`] = {
      'text-shadow': shadows[key],
    }
  })
  
  addUtilities(textShadows)
})

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addUtilities }) {
  addUtilities(
    {
      '.text-shadow': {
        'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
      },
    },
    {
      variants: ['hover', 'focus'],
    }
  )
})

<h1 class="hover:text-shadow">悬停文字阴影</h1>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addComponents }) {
  addComponents({
    '.btn': {
      padding: '.5rem 1rem',
      borderRadius: '.25rem',
      fontWeight: '600',
      transition: 'all 0.2s',
    },
    '.btn-primary': {
      backgroundColor: '#3b82f6',
      color: '#ffffff',
      '&:hover': {
        backgroundColor: '#2563eb',
      },
    },
    '.btn-secondary': {
      backgroundColor: '#6b7280',
      color: '#ffffff',
      '&:hover': {
        backgroundColor: '#4b5563',
      },
    },
  })
})

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addComponents, theme }) {
  addComponents({
    '.card': {
      backgroundColor: theme('colors.white'),
      borderRadius: theme('borderRadius.lg'),
      boxShadow: theme('boxShadow.md'),
      padding: theme('spacing.6'),
    },
  })
})

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addBase, theme }) {
  addBase({
    'h1': {
      fontSize: theme('fontSize.4xl'),
      fontWeight: theme('fontWeight.bold'),
    },
    'h2': {
      fontSize: theme('fontSize.3xl'),
      fontWeight: theme('fontWeight.bold'),
    },
    'h3': {
      fontSize: theme('fontSize.2xl'),
      fontWeight: theme('fontWeight.semibold'),
    },
  })
})

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addVariant, e }) {
  // 添加 first-child 变体
  addVariant('first', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`first${separator}${className}`)}:first-child`
    })
  })
  
  // 添加 disabled 变体
  addVariant('disabled', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`disabled${separator}${className}`)}:disabled`
    })
  })
})

<li class="first:font-bold">第一项加粗</li>
<button class="disabled:opacity-50" disabled>禁用按钮</button>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ matchUtilities, theme }) {
  matchUtilities(
    {
      'text-shadow': (value) => ({
        'text-shadow': value,
      }),
    },
    {
      values: theme('boxShadow'),
    }
  )
})

<div class="text-shadow-md">中等文字阴影</div>
<div class="text-shadow-lg">大文字阴影</div>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ matchComponents, theme }) {
  matchComponents(
    {
      'btn': (value) => ({
        backgroundColor: value,
        color: '#ffffff',
        padding: '.5rem 1rem',
        borderRadius: '.25rem',
      }),
    },
    {
      values: theme('colors'),
    }
  )
})

<button class="btn-blue-500">蓝色按钮</button>
<button class="btn-red-500">红色按钮</button>

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addComponents, theme }) {
  addComponents({
    '.input': {
      appearance: 'none',
      width: '100%',
      padding: '.5rem .75rem',
      fontSize: '1rem',
      lineHeight: '1.5',
      color: theme('colors.gray.700'),
      backgroundColor: theme('colors.white'),
      border: `1px solid ${theme('colors.gray.300')}`,
      borderRadius: theme('borderRadius.md'),
      transition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
      
      '&:focus': {
        outline: 'none',
        borderColor: theme('colors.blue.500'),
        boxShadow: `0 0 0 3px ${theme('colors.blue.100')}`,
      },
      
      '&::placeholder': {
        color: theme('colors.gray.400'),
      },
    },
    
    '.input-error': {
      borderColor: theme('colors.red.500'),
      
      '&:focus': {
        borderColor: theme('colors.red.500'),
        boxShadow: `0 0 0 3px ${theme('colors.red.100')}`,
      },
    },
  })
})

<input class="input" placeholder="请输入内容">
<input class="input input-error" placeholder="错误状态">

const plugin = require('tailwindcss/plugin')

module.exports = plugin(function({ addComponents, theme }) {
  addComponents({
    '.card': {
      backgroundColor: theme('colors.white'),
      borderRadius: theme('borderRadius.lg'),
      boxShadow: theme('boxShadow.md'),
      overflow: 'hidden',
    },
    
    '.card-header': {
      padding: theme('spacing.4'),
      borderBottom: `1px solid ${theme('colors.gray.200')}`,
    },
    
    '.card-body': {
      padding: theme('spacing.4'),
    },
    
    '.card-footer': {
      padding: theme('spacing.4'),
      borderTop: `1px solid ${theme('colors.gray.200')}`,
      backgroundColor: theme('colors.gray.50'),
    },
  })
})

<div class="card">
  <div class="card-header">
    <h3 class="font-semibold">卡片标题</h3>
  </div>
  <div class="card-body">
    <p>卡片内容</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">操作</button>
  </div>
</div>

npm install @tailwindcss/forms

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

npm install @tailwindcss/typography

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<article class="prose prose-lg">
  <h1>文章标题</h1>
  <p>文章内容...</p>
</article>

npm install @tailwindcss/line-clamp

module.exports = {
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

<p class="line-clamp-3">
  这是一段很长的文本，会被截断显示三行...
</p>

npm install @tailwindcss/aspect-ratio

module.exports = {
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

<div class="aspect-w-16 aspect-h-9">
  <img src="image.jpg" class="object-cover">
</div>