Button A Button B Button C Applying Conditionally Hover, focus, and other states Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:delay-0 to only apply the delay-0 utility on hover. <!-- ... --> For a complete ...
.github .husky docs .gitignore .prettierignore .prettierrc LICENSE README.md crowdin.yml index.js package-lock.json package.json A Tailwind CSS plugin for creating beautiful animations. <!-- Add an animated fade and zoom entrance -->...<!-- Add an animated slide to top-left exit -->...
Button A Button B Button CLearn more in the animation delay documentation.Changing animation directionUse the direction-{keyword} utilities to control an element’s animation-delay.Button A
Breadcrumbs tailwindcss-animate /docs / enter-animation.mdTop File metadata and controls Preview Code Blame 63 lines (45 loc) · 2.85 KB Raw Enter Animations Utilities for creating enter animations. ClassProperties animate-in animation-name: enter;animation-duration: 150ms;--tw-enter-opacity: ini...
@plugin 'tailwindcss-animate'; @plugin '@tailwindcss/typography'; @theme { --color-border-radius-lg: var(--radius); --color-border-radius-md: calc(var(--radius) - 2px); --color-border-radius-sm: calc(var(--radius) - 4px); --color-muted: var(--muted); --font-sans: ui-sans...
importtype{Config}from'tailwindcss'importdefaultThemefrom'tailwindcss/defaultTheme.js'importanimatePluginfrom'tailwindcss-animate'importradixPluginfrom'tailwindcss-radix'exportdefault{content:['./app/**/*.{ts,tsx,jsx,js}'],darkMode:'class',theme:{container:{center:true,padding:'2rem',screens:{'...
duraation-200 absolute rounded-lg opacity-80 bg-gradient-to-r from-pink-600 to-purple-500 -inset-3 blur-[2px] animate-tilt">Get started Releases No releases published Packages No packages published Languages CSS98.6% JavaScript1.2% HTML0.2%...
Tailwind CSS Fonts with @next/font Icons from Lucide Dark mode with next-themes Automatic import sorting with @ianvs/prettier-plugin-sort-imports Tailwind CSS Features Class merging with tailwind-merge Animation with tailwindcss-animate Conditional classes with clsx Variants with class-variance-authority...
import{motion}from"framer-motion"exportconstMyComponent=()=>(<motion.divinitial={{y:'var(--spacing-8)'}}animate={{y:0}}exit={{y:'var(--spacing-8)'}}>{children}</motion.div>) 总结 Tailwind CSS v4.0-alpha 的发布标志着该 Tailwind CSS 框架在性能和现代化 CSS 体验方面的重大进步,通过...
2. 语义化:text-lg、text-white、ring、animate-spin` text-lg,一个较大字体,如果设置行内样式,肯定有诸多麻烦的事:我想设计一个较大的字体,那我应该设计多大尺寸、使用什么单位 同样还有: text-white: 白色的色值是哪个来着? ring: 我想给这个按钮加一个圈圈?