New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

@cs-magic/tailwindcss-config

Package Overview
Dependencies
Maintainers
0
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cs-magic/tailwindcss-config

Shared TailwindCSS configurations for CS Magic projects

latest
npmnpm
Version
0.3.0
Version published
Maintainers
0
Created
Source

@cs-magic/tailwindcss-config

CS Magic 项目的共享 TailwindCSS 配置。

安装

npm install --save-dev @cs-magic/tailwindcss-config
# 或
yarn add -D @cs-magic/tailwindcss-config

使用

在你的 tailwind.config.js 中:

module.exports = {
  // 使用预设配置
  presets: [require('@cs-magic/tailwindcss-config')],
  
  // 添加你自己的配置来覆盖预设
  theme: {
    extend: {
      // 你的自定义主题配置
    }
  },
  
  // 添加额外的插件
  plugins: [
    // 你的额外插件
  ]
}

特性

  • 预配置的颜色主题和暗色模式支持
  • 常用的间距和边框半径扩展
  • 集成常用的 TailwindCSS 插件
  • 自定义动画效果
  • 针对 Next.js 和 React 项目优化的内容配置

包含的插件

  • @tailwindcss/forms
  • @tailwindcss/typography
  • @tailwindcss/aspect-ratio
  • @tailwindcss/container-queries
  • tailwindcss-animate

自定义主题

配置包括明暗两种主题模式:

// 使用浅色主题颜色
bg-background-primary
text-text-primary
border-border-light

// 使用深色主题颜色
dark:bg-dark-background-primary
dark:text-dark-text-primary
dark:border-dark-border-light

动画

包含预设的动画类:

<div class="animate-fade-in">淡入效果</div>
<div class="animate-slide-in">滑入效果</div>

Keywords

tailwind

FAQs

Package last updated on 14 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts