From 889bda33d5cb9c8b54bbc78b4cf748a17d1b84b7 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:30:11 +0800 Subject: [PATCH 01/48] copy components to components/.ZH --- src/components/.ZH/Footer.js | 86 ++ src/components/.ZH/Header.js | 275 ++++++ src/components/.ZH/Heading.js | 80 ++ src/components/.ZH/HtmlZenGarden.js | 798 ++++++++++++++++++ src/components/.ZH/Search.js | 198 +++++ src/components/.ZH/home/BuildAnything.js | 332 ++++++++ src/components/.ZH/home/ComponentDriven.js | 665 +++++++++++++++ src/components/.ZH/home/ConstraintBased.js | 367 ++++++++ src/components/.ZH/home/Customization.js | 350 ++++++++ src/components/.ZH/home/DarkMode.js | 194 +++++ src/components/.ZH/home/EditorTools.js | 425 ++++++++++ src/components/.ZH/home/Footer.js | 54 ++ src/components/.ZH/home/Hero.js | 488 +++++++++++ src/components/.ZH/home/MobileFirst.js | 336 ++++++++ src/components/.ZH/home/ModernFeatures.js | 251 ++++++ src/components/.ZH/home/Performance.js | 351 ++++++++ .../.ZH/home/ReadyMadeComponents.js | 91 ++ src/components/.ZH/home/StateVariants.js | 293 +++++++ src/components/.ZH/home/common.js | 135 +++ 19 files changed, 5769 insertions(+) create mode 100644 src/components/.ZH/Footer.js create mode 100644 src/components/.ZH/Header.js create mode 100644 src/components/.ZH/Heading.js create mode 100644 src/components/.ZH/HtmlZenGarden.js create mode 100644 src/components/.ZH/Search.js create mode 100644 src/components/.ZH/home/BuildAnything.js create mode 100644 src/components/.ZH/home/ComponentDriven.js create mode 100644 src/components/.ZH/home/ConstraintBased.js create mode 100644 src/components/.ZH/home/Customization.js create mode 100644 src/components/.ZH/home/DarkMode.js create mode 100644 src/components/.ZH/home/EditorTools.js create mode 100644 src/components/.ZH/home/Footer.js create mode 100644 src/components/.ZH/home/Hero.js create mode 100644 src/components/.ZH/home/MobileFirst.js create mode 100644 src/components/.ZH/home/ModernFeatures.js create mode 100644 src/components/.ZH/home/Performance.js create mode 100644 src/components/.ZH/home/ReadyMadeComponents.js create mode 100644 src/components/.ZH/home/StateVariants.js create mode 100644 src/components/.ZH/home/common.js diff --git a/src/components/.ZH/Footer.js b/src/components/.ZH/Footer.js new file mode 100644 index 000000000..cf1e9e1fb --- /dev/null +++ b/src/components/.ZH/Footer.js @@ -0,0 +1,86 @@ +import Link from 'next/link' +import clsx from 'clsx' + +export function Footer({ children, previous, next }) { + return ( + + ) +} diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js new file mode 100644 index 000000000..f31163c73 --- /dev/null +++ b/src/components/.ZH/Header.js @@ -0,0 +1,275 @@ +import Link from 'next/link' +import { VersionSwitcher } from '@/components/VersionSwitcher' +// import { SearchButton } from '@/components/Search' +import { SearchButton } from '@/components/.ZH/Search' +import Router from 'next/router' +import { Logo } from '@/components/Logo' +import { Dialog } from '@headlessui/react' +import { useEffect, useState } from 'react' +import clsx from 'clsx' + +function Featured() { + return ( + + + Tailwind CSS v3.0 + + + {/* Just-in-Time all the time, colored shadows, scroll snap and more */} + Just-in-Time all the time, colored shadows, scroll snap and more + + + + + ) +} + +export function NavPopover() { + let [isOpen, setIsOpen] = useState(false) + + useEffect(() => { + if (!isOpen) return + function handleRouteChange() { + setIsOpen(false) + } + Router.events.on('routeChangeComplete', handleRouteChange) + return () => { + Router.events.off('routeChangeComplete', handleRouteChange) + } + }, [isOpen]) + + return ( + <> + + + +
+ +
    + +
+
+ + + ) +} + +export function NavItems() { + return ( + <> +
  • + + {/* Docs */} + 文件 + +
    • +
  • + + {/* Components */} + 元件庫 + +
    • +
  • + + {/* Blog */} + 部落格 + +
    • +
  • + + Tailwind CSS on GitHub + + +
    • + + ) +} + +export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section }) { + let [isOpaque, setIsOpaque] = useState(false) + + useEffect(() => { + let offset = 50 + function onScroll() { + if (!isOpaque && window.scrollY > offset) { + setIsOpaque(true) + } else if (isOpaque && window.scrollY <= offset) { + setIsOpaque(false) + } + } + window.addEventListener('scroll', onScroll, { passive: true }) + return () => { + window.removeEventListener('scroll', onScroll, { passive: true }) + } + }, [isOpaque]) + + return ( + <> +
    +
    + + + + +
    +
    +
    +
    +
    +
    + + { + e.preventDefault() + Router.push('/brand') + }} + > + {/* Tailwind CSS home page */} + Tailwind CSS 首頁 + + + + + + + + {/* Search */} + 搜尋 + + +
    + +
    +
    +
    + {hasNav && ( +
    + + {title && ( +
      + {section && ( +
    1. + {section} + +
      2. + )} +
    2. {title}
      3. +
    + )} +
    + )} +
    +
    + + ) +} diff --git a/src/components/.ZH/Heading.js b/src/components/.ZH/Heading.js new file mode 100644 index 000000000..aae845bad --- /dev/null +++ b/src/components/.ZH/Heading.js @@ -0,0 +1,80 @@ +import { useEffect, useContext, useRef } from 'react' +import { ContentsContext } from '@/layouts/.ZH/ContentsLayout' +import { useTop } from '@/hooks/useTop' +import clsx from 'clsx' + +export function Heading({ + level, + id, + children, + number, + badge, + className = '', + hidden = false, + ignore = false, + style = {}, + nextElement, + ...props +}) { + let Component = `h${level}` + const context = useContext(ContentsContext) + + let ref = useRef() + let top = useTop(ref) + + useEffect(() => { + if (!context) return + if (typeof top !== 'undefined') { + context.registerHeading(id, top) + } + return () => { + context.unregisterHeading(id) + } + }, [top, id, context?.registerHeading, context?.unregisterHeading]) + + return ( + + {!hidden && ( + + ​ +
    + +
    +     + )} + {number && ( + + {number} + + )} + {children} + {badge && ( + + {badge} + + )} +     + ) +} diff --git a/src/components/.ZH/HtmlZenGarden.js b/src/components/.ZH/HtmlZenGarden.js new file mode 100644 index 000000000..27a913934 --- /dev/null +++ b/src/components/.ZH/HtmlZenGarden.js @@ -0,0 +1,798 @@ +import { AnimateSharedLayout, motion } from 'framer-motion' +import { font as pallyVariable } from '../fonts/generated/Pally-Variable.module.css' +import { font as synonymVariable } from '../fonts/generated/Synonym-Variable.module.css' +import { font as sourceSerifProRegular } from '../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as ibmPlexMonoSemiBold } from '../fonts/generated/IBMPlexMono-SemiBold.module.css' +import { usePrevious } from '@/hooks/usePrevious' +import { useCallback, useEffect, useRef, useState } from 'react' +import debounce from 'debounce' +import dlv from 'dlv' +import { fit } from '@/utils/fit' +import clsx from 'clsx' +import colors from 'tailwindcss/colors' + +const themes = { + Simple: { + wrapper: { borderRadius: 12 }, + container: '', + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 192 + if (css) { + return col ? '100%' : '192px' + } else { + return col ? containerWidth : 192 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 + return col ? 191 : 305 + }, + borderRadius: [ + [8, 8, 0, 0], + [8, 8, 0, 0], + [8, 0, 0, 8], + ], + src: require('@/img/classic-utility-jacket.jpg').default, + originalWidth: 1200, + originalHeight: 1600, + }, + contentContainer: 'p-6', + header: '-mt-6 pt-6 pb-6', + heading: 'flex-auto', + stock: 'flex-none w-full mt-2', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + height: 42, + borderRadius: 8, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.gray[900], + text: 'text-white font-semibold', + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: 'text-gray-900 font-semibold', + }, + like: { + color: colors.gray[300], + }, + }, + size: { + container: '', + list: 'space-x-3', + button: { + activeFont: 'font-semibold', + size: 38, + borderRadius: 8, + color: colors.gray[700], + activeBackgroundColor: colors.gray[900], + activeColor: colors.white, + }, + }, + smallprint: { + container: ['mt-6', 'mt-6', 'mt-6 mb-1'], + inner: 'text-sm text-gray-700', + }, + }, + Playful: { + wrapper: { borderRadius: 12 }, + // container: ['p-6', 'p-6', ''], + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 224 + if (css) { + return col ? 'calc(100% + 1rem)' : '224px' + } else { + return col ? containerWidth + 16 : 224 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 + 16 + return col ? 191 : 305 + 16 + }, + borderRadius: 8, + src: require('@/img/kids-jumper.jpg').default, + originalWidth: 1200, + originalHeight: 1700, + className: ['-mt-2 -mx-2', '-mt-2 -mx-2', '-my-2 -ml-2'], + }, + contentContainer: 'p-6', + header: ['pb-4', 'pb-4', '-mt-6 pt-6 pb-4'], + heading: 'flex-auto', + price: 'mt-2 w-full flex-none order-1', + stock: 'flex-none ml-3', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + height: 46, + borderRadius: 46 / 2, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.violet[600], + text: `text-base text-white font-medium ${pallyVariable}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-base text-gray-900 font-medium ${pallyVariable}`, + }, + like: { + color: colors.violet[600], + backgroundColor: colors.violet[50], + borderColor: colors.violet[50], + }, + }, + size: { + container: '', + list: 'space-x-3', + button: { + font: `font-bold ${pallyVariable}`, + size: 38, + borderRadius: 38 / 2, + borderColor: colors.white, + color: colors.violet[400], + activeBackgroundColor: colors.violet[600], + activeBorderColor: colors.violet[600], + activeColor: colors.white, + }, + }, + smallprint: { container: 'mt-5', inner: `text-sm ${pallyVariable}` }, + }, + Elegant: { + wrapper: { borderRadius: 0 }, + container: 'p-1.5', + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 210 + if (css) { + return col ? '100%' : '210px' + } else { + return col ? containerWidth - 12 : 210 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 - 12 + return col ? 177 : 305 - 12 + }, + borderRadius: 0, + src: require('@/img/fancy-suit-jacket.jpg').default, + originalWidth: 1200, + originalHeight: 2128, + }, + contentContainer: ['p-6 pt-0 -mx-1.5 -mb-1.5', 'p-6 pt-0 -mx-1.5 -mb-1.5', 'p-6 pt-0 -my-1.5'], + header: 'py-6', + heading: 'w-full flex-none mb-3', + stock: 'flex-none ml-auto', + button: { + grid: ['1fr auto', '1fr 1fr auto', '1fr 1fr auto'], + height: 46, + borderRadius: 0, + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.gray[900], + text: `text-white font-medium tracking-wide uppercase ${synonymVariable}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-gray-900 font-medium tracking-wide uppercase ${synonymVariable}`, + }, + like: { + color: colors.gray[300], + }, + }, + size: { + container: '', + button: { + font: `font-medium ${synonymVariable}`, + size: 32, + borderRadius: 32 / 2, + color: colors.gray[500], + activeBackgroundColor: colors.gray[100], + activeColor: colors.gray[900], + }, + }, + smallprint: { + container: 'mt-[1.375rem]', + inner: `text-sm ${synonymVariable}`, + }, + }, + Brutalist: { + wrapper: { borderRadius: 0 }, + container: ['p-4 pb-6', 'p-4 pb-6', 'p-6 pb-[1.0625rem]'], + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 184 + if (css) { + return col ? '100%' : '184px' + } else { + return col ? containerWidth - 32 : 184 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 224 + return col ? 160 : 224 + }, + borderRadius: 0, + src: require('@/img/retro-shoe.jpg').default, + originalWidth: 1200, + originalHeight: 1772, + }, + contentContainer: ['px-2', 'px-2', 'pl-8'], + header: ['py-6', 'py-6', '-mt-6 py-6'], + heading: 'w-full flex-none mb-2', + stock: 'flex-auto ml-3', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + width: 30, + height: 46, + borderRadius: 0, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.teal[400], + borderColor: colors.black, + text: `text-base text-black uppercase ${ibmPlexMonoSemiBold}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-base text-black uppercase ${ibmPlexMonoSemiBold}`, + }, + like: { + container: ' ', + className: 'justify-center', + color: colors.black, + borderColor: colors.white, + }, + }, + size: { + container: 'my-6', + list: 'space-x-3', + button: { + font: ibmPlexMonoRegular, + size: 42, + borderRadius: 0, + color: colors.black, + activeBackgroundColor: colors.black, + activeColor: colors.white, + }, + }, + smallprint: { + container: 'mt-4', + inner: `${ibmPlexMonoRegular} text-xs leading-6`, + }, + }, +} + +const imageAnimationVariants = { + visible: { opacity: [0, 1], zIndex: 2 }, + prev: { zIndex: 1 }, + hidden: { zIndex: 0 }, +} + +export function HtmlZenGarden({ theme }) { + const prevTheme = usePrevious(theme) + const [{ width: containerWidth, col, above }, setContainerState] = useState({ + width: 0, + col: false, + }) + const containerRef = useRef() + + const updateWidth = useCallback( + debounce(() => { + if (!containerRef.current) return + const newWidth = Math.round(containerRef.current.getBoundingClientRect().width) + const newCol = + window.innerWidth < 640 + ? 'sm' + : window.innerWidth >= 1024 && window.innerWidth < 1280 + ? 'lg' + : false + const newAbove = window.innerWidth < 1024 + if (newWidth !== containerWidth || newCol !== col || newAbove !== above) { + setContainerState({ width: newWidth, col: newCol, above: newAbove }) + } + }, 300) + ) + + useEffect(() => { + const observer = new window.ResizeObserver(updateWidth) + observer.observe(containerRef.current) + updateWidth() + return () => { + observer.disconnect() + } + }, [containerWidth, col, updateWidth]) + + const getThemeValue = (key, defaultValue) => { + const value = dlv(themes[theme], key, defaultValue) + return Array.isArray(value) ? value[col === 'sm' ? 0 : col === 'lg' ? 1 : 2] : value + } + + const getImageRadius = (key) => { + let radius = themes[theme].image.borderRadius + if (!Array.isArray(radius)) { + return { + borderTopLeftRadius: radius, + borderTopRightRadius: radius, + borderBottomRightRadius: radius, + borderBottomLeftRadius: radius, + } + } + if (Array.isArray(radius[0])) { + radius = radius[col === 'sm' ? 0 : col === 'lg' ? 1 : 2] + } + if (!Array.isArray(radius)) { + return { + borderTopLeftRadius: radius, + borderTopRightRadius: radius, + borderBottomRightRadius: radius, + borderBottomLeftRadius: radius, + } + } + return { + borderTopLeftRadius: radius[0], + borderTopRightRadius: radius[1], + borderBottomRightRadius: radius[2], + borderBottomLeftRadius: radius[3], + } + } + + return ( + +
    + {!containerWidth ? ( +
    + ) : ( + + +
    + + {Object.keys(themes).map((name, i) => ( + + ))} + + +
    +
    +
    + +
    + + Classic Utility + Jacket + + + Kids Jumpsuit + + + Dogtooth Style Jacket + + + Retro Shoe + +
    +
    + + $110.00 + + + $39.00 + + + $350.00 + + + $89.00 + +
    +
    + + In stock + + + In stock + + + In stock + + + In stock + +
    +
    +
    + + {['XS', 'S', 'M', 'L', 'XL'].map((size) => ( + + {size === 'XS' && ( + + )} + + {Object.keys(themes).map((name) => ( + + {size === 'XS' && name === 'Brutalist' ? ( + <> + {/* + */} + {size} + + ) : ( + size + )} + + ))} + + ))} + +
    + +
    +
    + + {Object.keys(themes).map((name, i) => ( + + Buy now + + ))} + +
    +
    + + {Object.keys(themes).map((name, i) => ( + + Add to bag + + ))} + +
    +
    + + + + + +
    +
    +
    + {Object.keys(themes).map((name) => ( + + + Free shipping on all + continental US orders. + + + ))} +
    +
    +     +     + )} +
    + + ) +} diff --git a/src/components/.ZH/Search.js b/src/components/.ZH/Search.js new file mode 100644 index 000000000..aeabb3ea3 --- /dev/null +++ b/src/components/.ZH/Search.js @@ -0,0 +1,198 @@ +import { useState, useCallback, useRef, createContext, useContext, useEffect } from 'react' +import { createPortal } from 'react-dom' +import Link from 'next/link' +import Head from 'next/head' +import { useRouter } from 'next/router' +import { DocSearchModal } from '@docsearch/react' +import clsx from 'clsx' +import { useActionKey } from '@/hooks/useActionKey' + +const INDEX_NAME = 'tailwindcss' +const API_KEY = '5fc87cef58bb80203d2207578309fab6' +const APP_ID = 'KNPXZI5B0M' + +const SearchContext = createContext() + +export function SearchProvider({ children }) { + const router = useRouter() + const [isOpen, setIsOpen] = useState(false) + const [initialQuery, setInitialQuery] = useState(null) + + const onOpen = useCallback(() => { + setIsOpen(true) + }, [setIsOpen]) + + const onClose = useCallback(() => { + setIsOpen(false) + }, [setIsOpen]) + + const onInput = useCallback( + (e) => { + setIsOpen(true) + setInitialQuery(e.key) + }, + [setIsOpen, setInitialQuery] + ) + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + }) + + return ( + <> + + + + + {children} + + {isOpen && + createPortal( + { + return items.map((item, index) => { + // We transform the absolute URL into a relative URL to + // leverage Next's preloading. + const a = document.createElement('a') + a.href = item.url + + const hash = a.hash === '#content-wrapper' ? '' : a.hash + + return { + ...item, + url: `${a.pathname}${hash}`, + __is_result: () => true, + __is_parent: () => item.type === 'lvl1' && items.length > 1 && index === 0, + __is_child: () => + item.type !== 'lvl1' && + items.length > 1 && + items[0].type === 'lvl1' && + index !== 0, + __is_first: () => index === 1, + __is_last: () => index === items.length - 1 && index !== 0, + } + }) + }} + />, + document.body + )} + + ) +} + +function Hit({ hit, children }) { + return ( + + + {children} + + + ) +} + +export function SearchButton({ children, ...props }) { + let searchButtonRef = useRef() + let actionKey = useActionKey() + let { onOpen, onInput } = useContext(SearchContext) + + useEffect(() => { + function onKeyDown(event) { + if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) { + if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) { + onInput(event) + } + } + } + window.addEventListener('keydown', onKeyDown) + return () => { + window.removeEventListener('keydown', onKeyDown) + } + }, [onInput, searchButtonRef]) + + return ( + + ) +} + +function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) { + useEffect(() => { + function onKeyDown(event) { + function open() { + // We check that no other DocSearch modal is showing before opening + // another one. + if (!document.body.classList.contains('DocSearch--active')) { + onOpen() + } + } + + if ( + (event.keyCode === 27 && isOpen) || + (event.key === 'k' && (event.metaKey || event.ctrlKey)) || + (!isEditingContent(event) && event.key === '/' && !isOpen) + ) { + event.preventDefault() + + if (isOpen) { + onClose() + } else if (!document.body.classList.contains('DocSearch--active')) { + open() + } + } + } + + window.addEventListener('keydown', onKeyDown) + return () => { + window.removeEventListener('keydown', onKeyDown) + } + }, [isOpen, onOpen, onClose]) +} + +function isEditingContent(event) { + let element = event.target + let tagName = element.tagName + return ( + element.isContentEditable || + tagName === 'INPUT' || + tagName === 'SELECT' || + tagName === 'TEXTAREA' + ) +} diff --git a/src/components/.ZH/home/BuildAnything.js b/src/components/.ZH/home/BuildAnything.js new file mode 100644 index 000000000..a3bfadf11 --- /dev/null +++ b/src/components/.ZH/home/BuildAnything.js @@ -0,0 +1,332 @@ +import { Fragment, useEffect, useRef, useState } from 'react' +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + themeTabs, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/build-anything.png' +import { HtmlZenGarden } from '@/components/HtmlZenGarden' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/build-anything.html?highlight' + +const code = { + Simple: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $110.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Playful: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $110.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Elegant: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $350.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Brutalist: `
    +
    + +
    +
    +
    +

    Retro Shoe

    +
    $89.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, +} + +function extractClasses(code) { + return code.match(/class="[^"]+"/g).map((attr) => attr.substring(7, attr.length - 1)) +} + +const classes = { + Simple: extractClasses(code.Simple), + Playful: extractClasses(code.Playful), + Elegant: extractClasses(code.Elegant), + Brutalist: extractClasses(code.Brutalist), +} + +const content = { + Simple: ['/classic-utility-jacket.jpg', 'Classic Utility Jacket', '$110.00'], + Playful: ['/kids-jumpsuit.jpg', 'Kids Jumpsuit', '$39.00'], + Elegant: ['/dogtooth-style-jacket.jpg', 'DogTooth Style Jacket', '$350.00'], + Brutalist: ['/retro-shoe.jpg', 'Retro Shoe', '$89.00'], +} + +export function BuildAnything() { + const [theme, setTheme] = useState('Simple') + let classIndex = 0 + let contentIndex = 0 + + const initial = useRef(true) + + useEffect(() => { + initial.current = false + }, []) + + return ( +
    +
    + + + + Build anything + + Build whatever you want, seriously. + + + Because Tailwind is so low-level, it never encourages you to design the same site twice. + Even with the same color palette and sizing scale, it's easy to build the same component + with a completely different look in the next project. + + + Get started, installation + +
    + +
    +
    + } + right={ + + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.content === '_') { + let cls = classes[theme][classIndex++] + return ( + + {cls} + + ) + } + + if (token.content.includes('__content__')) { + let text = content[theme][contentIndex++] + return ( + + {token.content.split(/(__content__)/).map((part, i) => + i === 1 ? ( + + {text} + + ) : ( + part + ) + )} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/ComponentDriven.js b/src/components/.ZH/home/ComponentDriven.js new file mode 100644 index 000000000..e9fc5e2a5 --- /dev/null +++ b/src/components/.ZH/home/ComponentDriven.js @@ -0,0 +1,665 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { GridLockup } from '@/components/GridLockup' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { Fragment, useEffect, useState } from 'react' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import iconUrl from '@/img/icons/home/component-driven.png' +import { Tabs } from '@/components/Tabs' +import { AnimatePresence, motion } from 'framer-motion' +import clsx from 'clsx' +import { useInView } from 'react-intersection-observer' + +import { lines as reactMoviesSample } from '../../samples/react/movies.jsx?highlight' +import { lines as reactNavSample } from '../../samples/react/nav.jsx?highlight' +import { lines as reactNavItemSample } from '../../samples/react/nav-item.jsx?highlight' +import { lines as reactListSample } from '../../samples/react/list.jsx?highlight' +import { lines as reactListItemSample } from '../../samples/react/list-item.jsx?highlight' + +import { lines as vueMoviesSample } from '../../samples/vue/movies.html?highlight' +import { lines as vueNavSample } from '../../samples/vue/nav.html?highlight' +import { lines as vueNavItemSample } from '../../samples/vue/nav-item.html?highlight' +import { lines as vueListSample } from '../../samples/vue/list.html?highlight' +import { lines as vueListItemSample } from '../../samples/vue/list-item.html?highlight' + +import { lines as angularMoviesSample } from '../../samples/angular/movies.js?highlight' +import { lines as angularNavSample } from '../../samples/angular/nav.js?highlight' +import { lines as angularNavItemSample } from '../../samples/angular/nav-item.js?highlight' +import { lines as angularListSample } from '../../samples/angular/list.js?highlight' +import { lines as angularListItemSample } from '../../samples/angular/list-item.js?highlight' + +import { lines as bladeMoviesSample } from '../../samples/blade/movies.html?highlight' +import { lines as bladeNavSample } from '../../samples/blade/nav.html?highlight' +import { lines as bladeNavItemSample } from '../../samples/blade/nav-item.html?highlight' +import { lines as bladeListSample } from '../../samples/blade/list.html?highlight' +import { lines as bladeListItemSample } from '../../samples/blade/list-item.html?highlight' + +import { lines as css } from '../../samples/apply.txt?highlight=css' +import { lines as html } from '../../samples/apply.html?highlight' + +function highlightDecorators(lines) { + for (let i = 0; i < lines.length; i++) { + for (let j = 0; j < lines[i].length; j++) { + if (lines[i][j].types.includes('function') && lines[i][j - 1].content.trim() === '@') { + lines[i][j - 1].types = ['function'] + } + } + } + return lines +} + +const movies = [ + { + title: 'Prognosis Negative', + starRating: '2.66', + rating: 'PG-13', + year: '2021', + genre: 'Comedy', + runtime: '1h 46m', + cast: 'Simon Pegg, Zach Galifianakis', + image: require('@/img/prognosis-negative.jpg').default, + }, + { + title: 'Rochelle, Rochelle', + starRating: '3.25', + rating: 'R', + year: '2020', + genre: 'Romance', + runtime: '1h 56m', + cast: 'Emilia Clarke', + image: require('@/img/rochelle-rochelle.jpg').default, + }, + { + title: 'Death Blow', + starRating: '4.95', + rating: '18A', + year: '2020', + genre: 'Action', + runtime: '2h 5m', + cast: 'Idris Elba, John Cena, Thandiwe Newton', + image: require('@/img/death-blow.jpg').default, + }, +] + +const tabs = { + React: { + 'Movies.js': reactMoviesSample, + 'Nav.js': reactNavSample, + 'NavItem.js': reactNavItemSample, + 'List.js': reactListSample, + 'ListItem.js': reactListItemSample, + }, + Vue: { + 'Movies.vue': vueMoviesSample, + 'Nav.vue': vueNavSample, + 'NavItem.vue': vueNavItemSample, + 'List.vue': vueListSample, + 'ListItem.vue': vueListItemSample, + }, + Angular: { + 'movies.component.ts': highlightDecorators(angularMoviesSample), + 'nav.component.ts': highlightDecorators(angularNavSample), + 'nav-item.component.ts': highlightDecorators(angularNavItemSample), + 'list.component.ts': highlightDecorators(angularListSample), + 'list-item.component.ts': highlightDecorators(angularListItemSample), + }, + Blade: { + 'movies.blade.php': bladeMoviesSample, + 'nav.blade.php': bladeNavSample, + 'nav-item.blade.php': bladeNavItemSample, + 'list.blade.php': bladeListSample, + 'list-item.blade.php': bladeListItemSample, + }, +} + +function ComponentLink({ onClick, children }) { + const [active, setActive] = useState(false) + + useEffect(() => { + function onKey(e) { + const modifier = e.ctrlKey || e.shiftKey || e.altKey || e.metaKey + if (!active && modifier) { + setActive(true) + } else if (active && !modifier) { + setActive(false) + } + } + window.addEventListener('keydown', onKey) + window.addEventListener('keyup', onKey) + return () => { + window.removeEventListener('keydown', onKey) + window.removeEventListener('keyup', onKey) + } + }, [active]) + + return active ? ( + + ) : ( + children + ) +} + +function ComponentExample({ framework }) { + const [activeTab, setActiveTab] = useState(0) + const lines = tabs[framework][Object.keys(tabs[framework])[activeTab]] + + useIsomorphicLayoutEffect(() => { + setActiveTab(0) + }, [framework]) + + return ( + + + +
    +
      + {Object.keys(tabs[framework]).map((tab, tabIndex) => ( +
    • + +
      • + ))} +
    +
    +
    + + + + + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if ( + (token.types[token.types.length - 1] === 'class-name' || + (token.types[token.types.length - 1] === 'tag' && + /^([A-Z]|x-)/.test(token.content))) && + tokens[tokenIndex - 1]?.types[tokens[tokenIndex - 1].types.length - 1] === + 'punctuation' && + (tokens[tokenIndex - 1]?.content === '<' || + tokens[tokenIndex - 1].content === ' + + setActiveTab( + Object.keys(tabs[framework]).findIndex((x) => + x.startsWith(`${token.content.replace(/^x-/, '')}.`) + ) + ) + } + > + {token.content} + + + ) + } + + if ( + token.types[token.types.length - 1] === 'string' && + /^(['"`])\.\/.*?\.(js|vue)\1$/.test(token.content) + ) { + const tab = token.content.substr(3, token.content.length - 4) + return ( + + {token.content.substr(0, 1)} + + {token.content.substr(0, 1)} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + + + ) +} + +function ApplyExample({ inView }) { + return ( + +

    + styles.css +

    +
    + + {css.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + let className = getClassNameForToken(token) + if (className) { + className = className + .replace(/\bclass\b/, 'selector') + .replace(/\b(number|color)\b/, '') + } + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + +
    +

    + index.html +

    +
    + +
    + {html.map((tokens, lineIndex) => ( +
    = 4 && lineIndex <= 5 ? 'not-mono' : undefined} + > + {tokens.map((token, tokenIndex) => { + return ( + + {token.content} + + ) + })} +
    + ))} +
    +     +
    +     + ) +} + +function AtApplySection() { + const { inView, ref } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( +
    +
    +

    Not into component frameworks?

    + + If you like to keep it old school use Tailwind's @apply directive + to extract repeated utility patterns into custom CSS classes just by copying and pasting + the list of class names. + + + Learn more, reusing styles + +
    + +
    +
    +
    +

    + Weekly one-on-one +

    +
    +
    +
    Date and time
    +
    + -{' '} + +
    +
    +
    +
    Location
    +
    + Kitchener, ON +
    +
    +
    +
    Description
    +
    No meeting description
    +
    +
    +
    Attendees
    +
    + Andrew McDonald +
    +
    +
    +
    +
    + Decline +
    +
    + Accept +
    +
    +
    +
    +
    +
    + +
    +
    + ) +} + +const tabItems = { + React: (selected) => ( + <> + + + + + + ), + Vue: (selected) => ( + <> + + + + ), + Angular: (selected) => ( + <> + + + + + ), + Blade: (selected) => ( + <> + + + + + + + ), +} + +export function ComponentDriven() { + const [framework, setFramework] = useState('React') + + return ( +
    +
    + + + + Component-driven + + Worried about duplication? Don’t be. + + + If you're repeating the same utilities over and over and over again, all you have to do is + extract them into a component or template partial and boom — you've got a single source of + truth so you can make changes in one place. + + + Learn more, reusing styles + +
    + +
    +
    + + + + {movies.map(({ title, starRating, rating, year, genre, runtime, cast, image }, i) => ( +
    + +
    +

    {title}

    +
    +
    +
    + Star rating + + + +
    +
    {starRating}
    +
    +
    +
    Rating
    +
    {rating}
    +
    +
    +
    Year
    +
    {year}
    +
    +
    +
    Genre
    +
    + + {genre} +
    +
    +
    +
    Runtime
    +
    + + {runtime} +
    +
    +
    +
    Cast
    +
    {cast}
    +
    +
    +
    +
    + ))} +
    + } + right={} + /> + + + + ) +} diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js new file mode 100644 index 000000000..4f289a740 --- /dev/null +++ b/src/components/.ZH/home/ConstraintBased.js @@ -0,0 +1,367 @@ +import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/constraint-based.png' +import defaultConfig from 'defaultConfig' +import { AnimatePresence, motion } from 'framer-motion' +import { useState } from 'react' +import { GridLockup } from '../GridLockup' +import clsx from 'clsx' +import { lines as sizingSample } from '../../samples/sizing.html?highlight' +import { lines as colorsSample } from '../../samples/colors.html?highlight' +import { lines as typographySample } from '../../samples/typography.html?highlight' +import { lines as shadowsSample } from '../../samples/shadows.html?highlight' + +const tokens = { + Sizing: sizingSample, + Colors: colorsSample, + Typography: typographySample, + Shadows: shadowsSample, +} + +let tabs = { + Sizing: (selected) => ( + <> + + + + ), + Colors: (selected) => ( + <> + + + + + + ), + Typography: (selected) => ( + <> + + + + + ), + Shadows: (selected) => ( + <> + + + + + ), +} + +function Bars({ sizes, className }) { + return ( + + {sizes.map((key, i) => ( +
  • + +
    + w-{key} +
    + +
    • + ))} +     + ) +} + +function Sizing() { + return ( + <> + + + + ) +} + +function Colors() { + return ( + + {['sky', 'blue', 'indigo', 'purple'].map((color, i) => ( + +
      + {Object.keys(defaultConfig.theme.colors[color]).map((key) => ( +
    • + ))} +
    +
    + {color}-50 + + + + + + + + {color}-900 +
    +     + ))} +     + ) +} + +function Typography() { + return ( + + {[ + [ + 'font-sans', + 'text-sm leading-6 sm:text-base sm:leading-6 lg:text-sm lg:leading-6 xl:text-base xl:leading-6', + ], + ['font-serif', 'text-sm leading-6 sm:text-lg lg:text-sm lg:leading-6 xl:text-lg'], + ['font-mono', 'text-sm leading-6 sm:leading-7 lg:leading-6 xl:leading-7'], + ].map((font, i) => ( + +

    {font[0]}

    +
    + The quick brown fox jumps over the lazy dog. +
    +     + ))} +     + ) +} + +function Shadows() { + return ( + +
      + {['shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl'].map( + (shadow, i) => ( + + {shadow} + + ) + )} +
    +     + ) +} + +export function ConstraintBased() { + const [tab, setTab] = useState('Sizing') + + return ( +
    +
    + + + + Constraint-based + + An API for your design system. + + + Utility classes help you work within the constraints of a system instead of littering your + stylesheets with arbitrary values. They make it easy to be consistent with color choices, + spacing, typography, shadows, and everything else that makes up a well-engineered design + system. + + + Learn more, utility-first fundamentals + +
    + setTab(tab)} + className="text-indigo-600" + iconClassName="text-indigo-500" + /> +
    +
    + +
    +
    +
    +
    + + {tab === 'Sizing' && } + {tab === 'Colors' && } + {tab === 'Typography' && } + {tab === 'Shadows' && } + +
    +
    +
    + } + right={ + + + + + {tokens[tab].map((tokens, lineIndex) => ( +
    + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'attr-value') { + return ( + + {token.content.split(/\[([^\]]+)\]/).map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + )} + + ) + } + return ( + + {token.content} + + ) + })} +
    + ))} +     +     +     +     + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js new file mode 100644 index 000000000..05d03c520 --- /dev/null +++ b/src/components/.ZH/home/Customization.js @@ -0,0 +1,350 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + themeTabs, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/customization.png' +import { useEffect, useRef, useState } from 'react' +import tailwindColors from 'tailwindcss/colors' +import { AnimatePresence, motion } from 'framer-motion' +import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' +import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' +import { Token } from '../Code' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { tokens } from '../../samples/customization.js?highlight' + +const defaultSampleBody = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.' + +const themes = { + Simple: { + font: 'Inter', + fontStacks: [ + ['Inter', 'system-ui', 'sans-serif'], + ['Inter', 'system-ui', 'sans-serif'], + ], + bodySize: '14pt', + colors: { + primary: 'blue', + secondary: 'gray', + }, + }, + Playful: { + font: 'Pally', + fontStacks: [ + ['Pally', 'Comic Sans MS', 'sans-serif'], + ['Pally', 'Comic Sans MS', 'sans-serif'], + ], + bodySize: '14pt', + classNameDisplay: `${pallyVariable} font-medium`, + classNameBody: pallyVariable, + colors: { + primary: 'rose', + secondary: 'violet', + }, + }, + Elegant: { + font: 'Source Serif Pro', + fontStacks: [ + ['Source Serif Pro', 'Georgia', 'serif'], + ['Synonym', 'system-ui', 'sans-serif'], + ], + bodySize: '14pt', + classNameDisplay: sourceSerifProRegular, + classNameBody: synonymVariable, + colors: { + primary: 'gray', + secondary: 'emerald', + }, + }, + Brutalist: { + font: 'IBM Plex Mono', + fontStacks: [ + ['IBM Plex Mono', 'Menlo', 'monospace'], + ['IBM Plex Mono', 'Menlo', 'monospace'], + ], + bodySize: '14pt', + classNameDisplay: ibmPlexMonoRegular, + classNameBody: ibmPlexMonoRegular, + sampleBody: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat.', + colors: { + primary: 'gray', + secondary: 'teal', + }, + }, +} + +export function Customization() { + const [theme, setTheme] = useState('Simple') + + return ( +
    +
    + + + + Customization + + Extend it, tweak it, change it. + + +

    + Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally + everything can be customized — from the color palette to the spacing scale to the box + shadows to the mouse cursor. +

    +

    + Use the tailwind.config.js file to craft your own design system, then let Tailwind + transform it into your own custom CSS framework. +

    +     + + Learn more, configuration + +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +

    Typography

    +
      +
    • +
      +
      +
      CSS class
      +
      font-display
      +
      +
      +
      Font name
      + + + {themes[theme].font} + + +
      +
      +
      Sample
      + + + AaBbCc + + +
      +
      +
      • +
    • +
      +
      +
      CSS class
      +
      font-body
      +
      +
      +
      Font size
      + + + {themes[theme].bodySize} + + +
      +
      +
      Sample
      + + + {themes[theme].sampleBody || defaultSampleBody} + + +
      +
      +
      • +
    +
    + +
    +
    +

    Colors

    +
      + {Object.entries(themes[theme].colors).map(([name, color], index) => ( +
    • +
      +
      +
      CSS class prefix
      +
      bg-{name}
      +
      +
      +
      Range
      +
      50-900
      +
      +
      +
      Sample
      +
      +
        + {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((key) => ( + + ))} +
      +
      +
      +
      +
      • + ))} +
    +
    +
    +
    +
    + } + right={ + + { + if (typeof token === 'string' && token.includes('__SECONDARY_COLOR__')) { + return ['__SECONDARY_COLOR__', token] + } + return token + }} + /> + + } + /> +
    + ) +} + +function CustomizationToken({ theme, ...props }) { + const { token } = props + const initial = useRef(true) + + useEffect(() => { + initial.current = false + }, []) + + if (token[0] === 'string' && token[1].startsWith("'font-")) { + let [i, j] = token[1].match(/[0-9]+/g).map((x) => parseInt(x, 10)) + + return ( + + {"'"} + + {themes[theme].fontStacks[i][j]} + + {"'"} + + ) + } + + if (token[0] === 'string' && token[1].startsWith("'color-")) { + const [, name, shade] = token[1].substr(1, token[1].length - 2).split('-') + const color = tailwindColors[themes[theme].colors[name]][shade] + + return ( + + {"'"} + + {color} + + {"'"} + + ) + } + + if (token[0] === '__SECONDARY_COLOR__') { + let name = Object.keys(themes[theme].colors)[1] + return token[1].split('__SECONDARY_COLOR__').map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {name} + + ) + ) + } + + return +} diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js new file mode 100644 index 000000000..dc76c96c0 --- /dev/null +++ b/src/components/.ZH/home/DarkMode.js @@ -0,0 +1,194 @@ +import { useState } from 'react' +import { Switch } from '@headlessui/react' +import { + Paragraph, + IconContainer, + Caption, + BigText, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { CodeWindow } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/dark-mode.png' +import { addClassTokens } from '@/utils/addClassTokens' +import { Token } from '@/components/Code' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { code, tokens } from '../../samples/dark-mode.html?highlight' + +function Sun(props) { + return ( + + ) +} + +function Moon(props) { + return ( + + ) +} + +function DarkModeSwitch({ enabled, onChange }) { + return ( + + {enabled ? 'Enable' : 'Disable'} dark mode + + + + + + + + ) +} + +export function DarkMode() { + const [enabled, setEnabled] = useState(false) + + return ( +
    +
    + + + + Dark mode + + Now with Dark Mode. + + + Don’t want to be one of those websites that blinds people when they open it on their phone + at 2am? Enable dark mode in your configuration file then throw{' '} + dark: in front of any color utility to apply it when dark mode is + active. Works for background colors, text colors, border colors, and even gradients. + + + Learn more, dark mode + +
    + + +
    /g, '
    '), + }} + /> +
    + } + right={ + + + + } + /> + + ) +} + +function DarkModeToken({ token, parentTypes, enabled, children }) { + if (token[0] === 'class') { + if (token[1].startsWith('dark:')) { + return ( + + {children} + + ) + } + if (token[1].startsWith('(light)')) { + return ( + + {token[1].replace(/^\(light\)/, '')} + + ) + } + } + + return ( + + {children} + + ) +} diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js new file mode 100644 index 000000000..b934bf95a --- /dev/null +++ b/src/components/.ZH/home/EditorTools.js @@ -0,0 +1,425 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { motion } from 'framer-motion' +import { Fragment, useEffect, useState } from 'react' +import iconUrl from '@/img/icons/home/editor-tools.png' +import { useInView } from 'react-intersection-observer' +import colors from 'tailwindcss/colors' +import dlv from 'dlv' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/editor-tools.html?highlight' +import clsx from 'clsx' + +const problems = [ + ["'flex' applies the same CSS property as 'block'.", 'cssConflict [1, 20]'], + ["'block' applies the same CSS property as 'flex'.", 'cssConflict [1, 54]'], +] + +const completions = [ + // + ['sm:', '@media (min-width: 640px)'], + ['md:'], + ['lg:'], + ['xl:'], + ['focus:'], + ['group-hover:'], + ['hover:'], + ['container'], + ['space-y-0'], + ['space-x-0'], + ['space-y-1'], + ['space-x-1'], + // + ['bg-fixed', 'background-position: fixed;'], + ['bg-local'], + ['bg-scroll'], + ['bg-clip-border'], + ['bg-clip-padding'], + ['bg-clip-content'], + ['bg-clip-text'], + ['bg-transparent', 'background-color: transparent;'], + ['bg-current'], + ['bg-black', '#000'], + ['bg-white', '#fff'], + ['bg-gray-50', colors.gray[50]], + // + ['bg-teal-50', `background-color: ${colors.teal[50]};`, colors.teal[50]], + ['bg-teal-100', `background-color: ${colors.teal[100]};`, colors.teal[100]], + ['bg-teal-200', `background-color: ${colors.teal[200]};`, colors.teal[200]], + ['bg-teal-300', `background-color: ${colors.teal[300]};`, colors.teal[300]], + ['bg-teal-400', `background-color: ${colors.teal[400]};`, colors.teal[400]], + ['bg-teal-500', undefined, colors.teal[500]], + ['bg-teal-600', undefined, colors.teal[600]], + ['bg-teal-700', undefined, colors.teal[700]], + ['bg-teal-800', undefined, colors.teal[800]], + ['bg-teal-900', undefined, colors.teal[900]], + ['bg-top'], +] + +function CompletionDemo() { + const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.content === '__CONFLICT__') { + return ( + + w-full{' '} + flex{' '} + items-center justify-between{' '} + block{' '} + p-6 space-x-6 + + ) + } + + if (token.content === '__COMPLETION__') { + return + } + + if ( + token.types[token.types.length - 1] === 'attr-value' && + tokens[tokenIndex - 3].content === 'class' + ) { + return ( + + {token.content.split(' ').map((c, i) => { + const space = i === 0 ? '' : ' ' + if (/^(bg|text|border)-/.test(c)) { + const color = dlv(colors, c.replace(/^(bg|text|border)-/, '').split('-')) + if (color) { + return ( + + {space} + + {c} + + ) + } + } + return space + c + })} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + ) +} + +function Completion({ inView }) { + const [typed, setTyped] = useState('') + const [selectedCompletionIndex, setSelectedCompletionIndex] = useState(0) + const [stage, setStage] = useState(-1) + + useEffect(() => { + if (inView) { + setStage(0) + } + }, [inView]) + + useEffect(() => { + if (typed === ' bg-t') { + let i = 0 + let id = window.setInterval(() => { + if (i === 5) { + setStage(1) + setTyped('') + setSelectedCompletionIndex(0) + return window.clearInterval(id) + } + i++ + setSelectedCompletionIndex(i) + }, 300) + return () => window.clearInterval(id) + } + }, [typed]) + + useEffect(() => { + let id + if (stage === 1) { + id = window.setTimeout(() => { + setStage(2) + }, 2000) + } else if (stage === 2 || stage === 3 || stage === 4 || stage === 5) { + id = window.setTimeout(() => { + setStage(stage + 1) + }, 300) + } else if (stage === 6) { + id = window.setTimeout(() => { + setStage(-1) + setStage(0) + }, 2000) + } + return () => { + window.clearTimeout(id) + } + }, [stage]) + + return ( + + + + text-teal-600 + {stage >= 1 && stage < 2 && ' '} + + {stage >= 1 && stage < 2 && } + {stage >= 0 && + stage < 2 && + ' bg-t' + .split('') + .filter((char) => (stage >= 1 && stage < 6 ? char !== ' ' : true)) + .map((char, i) => ( + + setTyped(typed + char)} + > + {char} + + + ))} + {stage === 1 && 'eal-400'} + {(stage < 2 || stage === 6) && } + {stage >= 2 && stage <= 5 && ( + + {stage < 5 && ' '} + {stage < 5 && } + {stage >= 4 && } + {stage === 5 && ( + <> + +   + ​ + + + + )} + = 4 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + bg- + + {stage === 3 && } + = 3 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + teal- + + {stage === 2 && } + = 2 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + 400 + + + )} + {typed && ( + +
    +
    +
      + {completions + .filter((completion) => completion[0].startsWith(typed.trim())) + .slice(0, 12) + .map((completion, i) => ( +
    • + + {completion[2] ? ( + + ) : ( + + + + )} + + + {completion[0].split(new RegExp(`(^${typed.trim()})`)).map((part, j) => + part ? ( + j % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + ) : null + )} + + {i === selectedCompletionIndex && completion[1] ? ( + + {completion[1]} + + ) : null} +
      • + ))} +
    +
    +
    +     + )} +     + ) +} + +function ColorDecorator({ color }) { + return ( + + ) +} + +export function EditorTools() { + return ( +
    +
    + + + + Editor tools + World-class IDE integration. + +

    + Worried about remembering all of these class names? The Tailwind CSS IntelliSense + extension for VS Code has you covered. +

    +

    + Get intelligent autocomplete suggestions, linting, class definitions and more, all + within your editor and with no configuration required. +

    +     + + Learn more, editor setup + +
    + + + +
    +
    + + + + + + + + + + +
    +
    + +
    +

    Problems

    +
      + {problems.map((problem, i) => ( +
    • + + + + +

      {problem[0]}

      +

      +  {problem[1]} +

      +
      • + ))} +
    +
    +
    +
    +     + + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/Footer.js b/src/components/.ZH/home/Footer.js new file mode 100644 index 000000000..a1bd81282 --- /dev/null +++ b/src/components/.ZH/home/Footer.js @@ -0,0 +1,54 @@ +import Link from 'next/link' +import { documentationNav } from '@/navs/documentation' +import { Logo } from '@/components/Logo' + +const footerNav = [ + { + 'Getting Started': documentationNav['Getting Started'], + 'Core Concepts': documentationNav['Core Concepts'], + }, + { + Customization: documentationNav['Customization'], + Community: [ + { title: 'GitHub', href: 'https://github.com/tailwindlabs/tailwindcss' }, + { title: 'Discord', href: '/discord' }, + { title: 'Twitter', href: 'https://twitter.com/tailwindcss' }, + { title: 'YouTube', href: 'https://www.youtube.com/tailwindlabs' }, + ], + }, +] + +export function Footer() { + return ( +
    +
    +
    + {footerNav.map((sections) => ( +
    + {Object.entries(sections).map(([title, items]) => ( +
    +

    {title}

    + +
    + ))} +
    + ))} +
    +
    + +
    +
    +
    + ) +} diff --git a/src/components/.ZH/home/Hero.js b/src/components/.ZH/home/Hero.js new file mode 100644 index 000000000..073228426 --- /dev/null +++ b/src/components/.ZH/home/Hero.js @@ -0,0 +1,488 @@ +import { CodeWindow } from '@/components/CodeWindow' +import { Token } from '@/components/Code' +import { AnimateSharedLayout, motion, useAnimation } from 'framer-motion' +import { useEffect, useRef, useState } from 'react' +import clsx from 'clsx' +import { fit } from '@/utils/fit' +import { debounce } from 'debounce' +import { useMedia } from '@/hooks/useMedia' +import { wait } from '@/utils/wait' +import { createInViewPromise } from '@/utils/createInViewPromise' +import { tokens, code } from '../../samples/hero.html?highlight' +import colors from 'tailwindcss/colors' + +const CHAR_DELAY = 75 +const GROUP_DELAY = 1000 +const TRANSITION = { duration: 0.5 } + +function getRange(text, options = {}) { + return { start: code.indexOf(text), end: code.indexOf(text) + text.length, ...options } +} + +const ranges = [ + getRange(' p-8'), + getRange(' rounded-full'), + getRange(' mx-auto'), + getRange(' font-medium'), + getRange(' class="font-medium"'), + getRange(' class="text-sky-500"'), + getRange(' class="text-gray-700"'), + getRange(' text-center'), + getRange('md:flex '), + getRange(' md:p-0'), + getRange(' md:p-8', { immediate: true }), + getRange(' md:rounded-none'), + getRange(' md:w-48'), + getRange(' md:h-auto'), + getRange(' md:text-left'), +] + +function getRangeIndex(index, ranges) { + for (let i = 0; i < ranges.length; i++) { + const rangeArr = Array.isArray(ranges[i]) ? ranges[i] : [ranges[i]] + for (let j = 0; j < rangeArr.length; j++) { + if (index >= rangeArr[j].start && index < rangeArr[j].end) { + return [i, index - rangeArr[j].start, index === rangeArr[j].end - 1] + } + } + } + return [-1] +} + +function Words({ children, bolder = false, layout, transition }) { + return children.split(' ').map((word, i) => ( + + {bolder ? ( + <> + + {word}{' '} + + {word} + + ) : ( + word + ' ' + )} + + )) +} + +function augment(tokens, index = 0) { + for (let i = 0; i < tokens.length; i++) { + if (Array.isArray(tokens[i])) { + const _type = tokens[i][0] + const children = tokens[i][1] + if (Array.isArray(children)) { + index = augment(children, index) + } else { + const str = children + const result = [] + for (let j = 0; j < str.length; j++) { + const [rangeIndex, indexInRange, isLast] = getRangeIndex(index, ranges) + if (rangeIndex > -1) { + result.push([`char:${rangeIndex}:${indexInRange}${isLast ? ':last' : ''}`, str[j]]) + } else { + if (typeof result[result.length - 1] === 'string') { + result[result.length - 1] += str[j] + } else { + result.push(str[j]) + } + } + index++ + } + if (!(result.length === 1 && typeof result[0] === 'string')) { + tokens[i].splice(1, 1, result) + } + } + } else { + const str = tokens[i] + const result = [] + for (let j = 0; j < str.length; j++) { + const [rangeIndex, indexInRange, isLast] = getRangeIndex(index, ranges) + if (rangeIndex > -1) { + result.push([`char:${rangeIndex}:${indexInRange}${isLast ? ':last' : ''}`, str[j]]) + } else { + if (typeof result[result.length - 1] === 'string') { + result[result.length - 1] += str[j] + } else { + result.push(str[j]) + } + } + index++ + } + tokens.splice(i, 1, ...result) + i += result.length - 1 + } + } + return index +} + +augment(tokens) + +export function Hero() { + const containerRef = useRef() + const [step, setStep] = useState(-1) + const [state, setState] = useState({ group: -1, char: -1 }) + const cursorControls = useAnimation() + const [wide, setWide] = useState(false) + const [finished, setFinished] = useState(false) + const supportsMd = useMedia('(min-width: 640px)') + const [isMd, setIsMd] = useState(false) + const [containerRect, setContainerRect] = useState() + const md = supportsMd && isMd + const mounted = useRef(true) + const inViewRef = useRef() + const imageRef = useRef() + + const layout = !finished + + useEffect(() => { + return () => (mounted.current = false) + }, []) + + useEffect(() => { + let current = true + + const { promise: inViewPromise, disconnect } = createInViewPromise(inViewRef.current, { + threshold: 0.5, + }) + + const promises = [ + wait(1000), + inViewPromise, + new Promise((resolve) => { + if ('requestIdleCallback' in window) { + window.requestIdleCallback(resolve) + } else { + window.setTimeout(resolve, 0) + } + }), + new Promise((resolve) => { + if (imageRef.current.complete) { + resolve() + } else { + imageRef.current.addEventListener('load', resolve) + } + }), + ] + + Promise.all(promises).then(() => { + if (current) { + setState({ group: 0, char: 0 }) + } + }) + + return () => { + current = false + disconnect() + } + }, []) + + useEffect(() => { + if (step === 14) { + let id = window.setTimeout(() => { + setFinished(true) + }, 1000) + return () => { + window.clearTimeout(id) + } + } + }, [step]) + + useEffect(() => { + if (!finished) return + let count = 0 + cursorControls.start({ opacity: 0.5 }) + const id = window.setInterval(() => { + if (count === 2) { + return window.clearInterval(id) + } + count++ + cursorControls.start({ opacity: 1, scale: 0.9, transition: { duration: 0.25 } }).then(() => { + setWide((wide) => !wide) + cursorControls.start({ + opacity: count === 2 ? 0 : 0.5, + scale: 1, + transition: { duration: 0.25, delay: 0.6 }, + }) + }) + }, 2000) + return () => { + window.clearInterval(id) + } + }, [finished]) + + useEffect(() => { + if (finished) { + const id = window.setTimeout(() => { + setIsMd(wide) + }, 250) + return () => window.clearTimeout(id) + } + }, [wide, finished]) + + useEffect(() => { + const observer = new window.ResizeObserver( + debounce(() => { + if (containerRef.current) { + setContainerRect(containerRef.current.getBoundingClientRect()) + } + }, 500) + ) + observer.observe(containerRef.current) + return () => { + observer.disconnect() + } + }, []) + + return ( + + + + = 8 && md, + 'p-8': step >= 0, + 'text-center': (step >= 7 && !md) || (step < 14 && md), + })} + > + + + + + + = 1 && step < 11) || (step >= 11 && !md && !finished) + ? { borderRadius: 96 / 2 } + : { borderRadius: 0 }), + }} + transition={TRANSITION} + className={clsx( + 'relative z-10 overflow-hidden flex-none', + step >= 10 && md ? '-m-8 mr-8' : step >= 2 ? 'mx-auto' : undefined, + step >= 12 && md ? 'w-48' : 'w-24', + step >= 13 && md ? 'h-auto' : 'h-24' + )} + > + = 13 && md + ? fit(192, containerRect.height, 384, 512) + : step >= 12 && md + ? fit(192, 96, 384, 512) + : fit(96, 96, 384, 512) + } + /> + + = 10 && md ? '' : 'pt-6'} + transition={TRANSITION} + > + + = 3} layout={layout} transition={TRANSITION}> + “Tailwind CSS is the only framework that I've seen scale on large teams. It’s + easy to customize, adapts to any design, and the build size is tiny.” + + + = 7 && !md) || (step < 14 && md) ? 'items-center' : 'items-start' + }`} + style={{ + ...(step >= 4 ? { fontWeight: 500 } : { fontWeight: 400 }), + }} + transition={TRANSITION} + > + = 5 ? { color: colors.sky[500] } : { color: '#000' }), + }} + transition={TRANSITION} + > + Sarah Dayan + + = 6 ? { color: colors.gray[700] } : { color: '#000' }), + }} + transition={TRANSITION} + > + Staff Engineer, Algolia + + + + + + + + } + right={ + + ({ ...state, char: charIndex + 1 })) + }, + async onGroupComplete(groupIndex) { + if (!mounted.current) return + setStep(groupIndex) + + if (groupIndex === 7) { + if (!supportsMd) return + await cursorControls.start({ opacity: 0.5, transition: { delay: 1 } }) + if (!mounted.current) return + setWide(true) + setIsMd(true) + await cursorControls.start({ opacity: 0, transition: { delay: 0.5 } }) + } + + if (!mounted.current) return + + if (ranges[groupIndex + 1] && ranges[groupIndex + 1].immediate) { + setState({ char: 0, group: groupIndex + 1 }) + } else { + window.setTimeout(() => { + if (!mounted.current) return + setState({ char: 0, group: groupIndex + 1 }) + }, GROUP_DELAY) + } + }, + }} + /> + + } + /> + ) +} + +function AnimatedToken({ isActiveToken, onComplete, children }) { + const [visible, setVisible] = useState(false) + + useEffect(() => { + if (visible) { + onComplete() + } + }, [visible]) + + useEffect(() => { + if (isActiveToken) { + let id = window.setTimeout(() => { + setVisible(true) + }, CHAR_DELAY) + return () => { + window.clearTimeout(id) + } + } + }, [isActiveToken]) + + return ( + <> + {children} + {isActiveToken && } + + ) +} + +function HeroToken({ currentChar, onCharComplete, currentGroup, onGroupComplete, ...props }) { + const { token } = props + + if (token[0].startsWith('char:')) { + const [, groupIndex, indexInGroup] = token[0].split(':').map((x) => parseInt(x, 10)) + + return ( + { + if (token[0].endsWith(':last')) { + onGroupComplete(groupIndex) + } else { + onCharComplete(indexInGroup) + } + }} + {...props} + /> + ) + } + + return +} + +function Layout({ left, right, pin = 'left' }) { + return ( +
    +
    +
    {right}
    +
    +
    +
    +
    {left}
    +
    +
    +
    + ) +} diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js new file mode 100644 index 000000000..38220231d --- /dev/null +++ b/src/components/.ZH/home/MobileFirst.js @@ -0,0 +1,336 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { motion, useTransform, useMotionValue } from 'framer-motion' +import { useEffect, useRef, useState } from 'react' +import iconUrl from '@/img/icons/home/mobile-first.png' +import { addClassTokens2 } from '@/utils/addClassTokens' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import { lines } from '../../pages/examples/mobile-first-demo' + +addClassTokens2(lines) + +const MIN_WIDTH = 400 + +function BrowserWindow({ size, onChange }) { + let x = useMotionValue(0) + let constraintsRef = useRef() + let handleRef = useRef() + let iframeRef = useRef() + let iframePointerEvents = useMotionValue('auto') + + useEffect(() => { + function onMessage(e) { + if (e.source === iframeRef.current.contentWindow) { + onChange(e.data) + } + } + + window.addEventListener('message', onMessage) + + return () => { + window.removeEventListener('message', onMessage) + } + }, []) + + useIsomorphicLayoutEffect(() => { + let observer = new window.ResizeObserver(() => { + let width = constraintsRef.current.offsetWidth - handleRef.current.offsetWidth + if (x.get() > width) { + x.set(width) + } + }) + observer.observe(constraintsRef.current) + return () => { + observer.disconnect() + } + }, []) + + useEffect(() => { + handleRef.current.onselectstart = () => false + }, []) + + return ( +
    + x + MIN_WIDTH) }} + > +
    +
    +
    +
    +
    +
    +
    + {size !== undefined && ( + <> + + + + + + + + )} +
    +
    +
    + + + + workcation.com +
    +
    + {size !== undefined && ( +
    + + + +
    + )} +
    +
    +
    + + + +
    Tailwind UI - Official Tailwind CSS Components
    +
    +
    + + + + +
    Workcation - Find a trip that suits you
    +
    +
    + + + + +
    + Headless UI – Unstyled, fully accessible UI components +
    +
    +
    +
    +
    + +
    +
    + +
    + { + document.documentElement.classList.add('dragging-ew') + iframePointerEvents.set('none') + }} + onDragEnd={() => { + document.documentElement.classList.remove('dragging-ew') + iframePointerEvents.set('auto') + }} + > +
    + +
    +
    + ) +} + +function Marker({ label, active, className }) { + return ( +
    +
    +
    +
    +
    +
    + {label} +
    +
    + ) +} + +export function MobileFirst() { + let [size, setSize] = useState() + + return ( +
    +
    + + + + Mobile-first + Responsive everything. + +

    + Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you + build responsive designs right in your HTML instead. +

    +

    + Throw a screen size in front of literally any utility class and watch it magically apply + at a specific breakpoint. +

    +     + + Learn more, responsive design + +
    +
    +
    + + + + + +
    +
    + +
    + +
    + + + {lines.map((tokens, lineIndex) => ( +
    + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'class') { + let isSm = token.content.startsWith('sm:') + let isMd = token.content.startsWith('md:') + let isLg = token.content.startsWith('lg:') + + if (isSm || isMd || isLg) { + let faded = + size === undefined || + (size === 'sm' && (isMd || isLg)) || + (size === 'md' && isLg) + let highlighted = + (size === 'sm' && isSm) || + (size === 'md' && isMd) || + (size === 'lg' && isLg) + + return ( + + {token.content} + + ) + } + } + return ( + + {token.content} + + ) + })} +
    + ))} +     +     + + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js new file mode 100644 index 000000000..755f29d54 --- /dev/null +++ b/src/components/.ZH/home/ModernFeatures.js @@ -0,0 +1,251 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/modern-features.png' +import { Fragment, useState } from 'react' +import { AnimatePresence, motion } from 'framer-motion' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines as gridSample } from '../../samples/grid.html?highlight' +import { lines as transformsSample } from '../../samples/transforms.html?highlight' +import { lines as filtersSample } from '../../samples/filters.html?highlight' + +const lines = { + 'CSS Grid': gridSample, + Transforms: transformsSample, + Filters: filtersSample, +} + +const tabs = { + 'CSS Grid': (selected) => ( + <> + + + ), + Transforms: (selected) => ( + <> + + + ), + Filters: (selected) => ( + <> + + + + + ), +} + +function Block({ src, filter, ...props }) { + return ( + +
    + +
    +     + ) +} + +export function ModernFeatures() { + const [feature, setFeature] = useState('CSS Grid') + + const animate = (transforms, grid) => { + if (feature === 'Transforms') { + return { + animate: transforms, + } + } + return { + animate: grid, + } + } + + return ( +
    +
    + + + + Modern features + + Cutting-edge is our comfort zone. + + +

    + Tailwind is unapologetically modern, and takes advantage of all the latest and greatest + CSS features to make the developer experience as enjoyable as possible. +

    +

    + We've got first-class CSS grid support, composable transforms and gradients powered by + CSS variables, support for modern state selectors like{' '} + :focus-visible, and tons more. +

    +     + + Learn more, grid template columns + +
    + +
    +
    + +
    + + + + + + + +
    +
    + } + right={ + + + + + {lines[feature].map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'attr-value') { + return ( + + {token.content.split(/\[([^\]]+)\]/).map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + )} + + ) + } + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + + + } + /> + + ) +} diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js new file mode 100644 index 000000000..e25367c51 --- /dev/null +++ b/src/components/.ZH/home/Performance.js @@ -0,0 +1,351 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { TabBar } from '@/components/TabBar' +import iconUrl from '@/img/icons/home/performance.png' +import { Fragment, useCallback, useEffect, useRef, useState } from 'react' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines as html } from '../../samples/performance.html?highlight' +import { lines as css } from '../../samples/performance.txt?highlight=css' +import { useInView } from 'react-intersection-observer' +import { animate } from 'framer-motion' + +const START_DELAY = 500 +const CLASS_DELAY = 1000 +const CHAR_DELAY = 75 +const SAVE_DELAY = 50 +const BUILD_DELAY = 100 + +function Typing({ classes, rules, onStartedClass, onFinishedClass }) { + let [text, setText] = useState('') + + useEffect(() => { + let newText = classes.substr(0, text.length + 1) + let isSpace = newText.endsWith(' ') + let isEnd = text.length + 1 > classes.length + let isEndOfClass = isSpace || isEnd + if (isEndOfClass) { + onFinishedClass(newText.split(' ').filter(Boolean).length - 1) + } + let handle = window.setTimeout( + () => { + if (newText.endsWith(' ') || newText.length === 1) { + onStartedClass() + } + setText(newText) + }, + isSpace ? CLASS_DELAY : CHAR_DELAY + ) + return () => { + window.clearTimeout(handle) + } + }, [classes, text, onStartedClass, onFinishedClass]) + + return text.split(' ').map((cls, index) => ( + + {index !== 0 && ' '} + + {cls} + + + )) +} + +export function Performance() { + let [visibleRules, setVisibleRules] = useState([]) + let [saved, setSaved] = useState(true) + let [lastFinishedClass, setLastFinishedClass] = useState(-1) + let [active, setActive] = useState(false) + let scrollRef = useRef() + let { ref: typingRef, inView: typingInView } = useInView({ threshold: 1 }) + let { ref: containerRef, inView: containerInView } = useInView({ threshold: 0 }) + + useEffect(() => { + if (typingInView && !active) { + let handle = window.setTimeout(() => setActive(true), START_DELAY) + return () => { + window.clearTimeout(handle) + } + } + }, [active, typingInView]) + + useEffect(() => { + if (!containerInView && active) { + setActive(false) + setVisibleRules([]) + setSaved(true) + setLastFinishedClass(-1) + } + }, [active, containerInView]) + + let rules = [] + let chunk = [] + for (let line of css) { + chunk.push(line) + let empty = line.every(({ content }) => content.trim() === '') + if (empty) { + rules.push(chunk) + chunk = [] + } + } + + rules = rules.filter((_, i) => visibleRules.includes(i)) + + let onStartedClass = useCallback(() => { + setSaved(false) + }, []) + + useEffect(() => { + if (lastFinishedClass < 0) return + let handle1 = window.setTimeout(() => setSaved(true), SAVE_DELAY) + let handle2 = window.setTimeout( + () => + setVisibleRules( + [ + [0], + [0, 1], + [0, 1, 3], + [0, 1, 3, 4], + [0, 1, 3, 4, 5], + [0, 1, 2, 3, 4, 5], + [0, 1, 2, 3, 4, 5, 6], + ][lastFinishedClass] + ), + SAVE_DELAY + BUILD_DELAY + ) + return () => { + window.clearTimeout(handle1) + window.clearTimeout(handle2) + } + }, [lastFinishedClass]) + + return ( +
    +
    + + + + Performance + It's tiny — never ship unused CSS again. + + Tailwind automatically removes all unused CSS when building for production, which means + your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind + projects ship less than 10kB of CSS to the client. + + + Learn more, optimizing for production + +
    + +
    +
    + + + + + + + + + + + + + {html.map((tokens, lineIndex) => ( +
    +
    + {lineIndex + 1} +
    +
    + {tokens.map((token, tokenIndex) => { + if (token.content === '__CLASSES__') { + return ( + + {active && ( + + )} + + + ) + } + return ( + + {token.content} + + ) + })} +
    +
    + ))} +     +
    +
    + + + + + + + + + {rules.map((rule) => ( + content.trim()).content} + rule={rule} + scrollRef={scrollRef} + /> + ))} + +
    +
    +
    + + + + + + + + +
    +
    +
    + } + /> +
    + ) +} + +function Terminal({ rules }) { + let scrollRef = useRef() + + useEffect(() => { + let top = scrollRef.current.scrollHeight - scrollRef.current.offsetHeight + + if (CSS.supports('scroll-behavior', 'smooth')) { + scrollRef.current.scrollTo({ top }) + } else { + animate(scrollRef.current.scrollTop, top, { + onUpdate: (top) => scrollRef.current.scrollTo({ top }), + }) + } + }, [rules.length]) + + return ( +
    + + + + 
    +        
+          
    
+            npx tailwindcss -o
+            --output build.css --content index.html{' '}
+            -w --watch
+          
    
+          {rules.map((_rule, index) => (
+            
    
+              
+                Rebuilding... Done in {[5, 6, 5, 7, 4, 5][index % 6]}ms.
+              
+            
    
+          ))}
+            
+
    +
    + ) +} + +function Rule({ rule, scrollRef }) { + let ref = useRef() + + useEffect(() => { + let top = + ref.current.offsetTop - scrollRef.current.offsetHeight / 2 + ref.current.offsetHeight / 2 + + if (CSS.supports('scroll-behavior', 'smooth')) { + scrollRef.current.scrollTo({ top }) + } else { + animate(scrollRef.current.scrollTop, top, { + onUpdate: (top) => scrollRef.current.scrollTo({ top }), + }) + } + }, [scrollRef]) + + return ( +
    + {rule.map((tokens, lineIndex) => { + let contentIndex = tokens.findIndex(({ content }) => content.trim()) + if (contentIndex === -1) { + return '\n' + } + return ( + + {tokens.slice(0, contentIndex).map((token) => token.content)} + + {tokens.slice(contentIndex).map((token, tokenIndex) => { + return ( + + {token.content} + + ) + })} + + {'\n'} + + ) + })} +
    + ) +} diff --git a/src/components/.ZH/home/ReadyMadeComponents.js b/src/components/.ZH/home/ReadyMadeComponents.js new file mode 100644 index 000000000..9be87475f --- /dev/null +++ b/src/components/.ZH/home/ReadyMadeComponents.js @@ -0,0 +1,91 @@ +import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' +import iconUrl from '@/img/icons/home/ready-made-components.png' +import { useInView } from 'react-intersection-observer' +import { motion } from 'framer-motion' +import { GridLockup } from '../GridLockup' + +function AnimatedImage({ animate = false, delay = 0, ...props }) { + return ( + + ) +} + +const w = 1213 +const h = 675 + +const getStyle = (x, y, width) => ({ + top: `${(y / h) * 100}%`, + left: `${(x / w) * 100}%`, + width: `${(width / w) * 100}%`, +}) + +const images = [ + { src: require('@/img/tailwindui/0.png').default, x: 27, y: 24, width: 236 }, + { src: require('@/img/tailwindui/1.png').default, x: 287, y: 0, width: 567 }, + { src: require('@/img/tailwindui/2.png').default, x: 878, y: 47, width: 308 }, + { src: require('@/img/tailwindui/3.jpg').default, x: 0, y: 289, width: 472 }, + { src: require('@/img/tailwindui/4.jpg').default, x: 496, y: 289, width: 441 }, + { src: require('@/img/tailwindui/5.png').default, x: 961, y: 289, width: 252 }, +] + +export function ReadyMadeComponents() { + const { ref: inViewRef, inView } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( +
    +
    + + + + Ready-made components + + Move even faster with Tailwind UI. + + + Tailwind UI is a collection of beautiful, fully responsive UI components, designed and + developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples + to choose from, and is guaranteed to help you find the perfect starting point for what you + want to build. + + + Learn more + +
    + +
    +
    + {images.map(({ src, x, y, width }, index) => ( + + ))} +
    +
    +
    + } + /> + + ) +} diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js new file mode 100644 index 000000000..9dab162c5 --- /dev/null +++ b/src/components/.ZH/home/StateVariants.js @@ -0,0 +1,293 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/state-variants.png' +import { addClassTokens2 } from '@/utils/addClassTokens' +import { useEffect, useRef, useState } from 'react' +import { usePrevious } from '@/hooks/usePrevious' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/state-variants.html?highlight' +import { animate } from 'framer-motion' + +const projects = [ + { title: 'API Integration', category: 'Engineering' }, + { title: 'New Benefits Plan', category: 'Human Resources' }, + { title: 'Onboarding Emails', category: 'Customer Success' }, +] + +const faces = [ + 'photo-1531123897727-8f129e1688ce', + 'photo-1494790108377-be9c29b29330', + 'photo-1552374196-c4e7ffc6e126', + 'photo-1546525848-3ce03ca516f6', + 'photo-1544005313-94ddf0286df2', + 'photo-1517841905240-472988babdf9', + 'photo-1506794778202-cad84cf45f1d', + 'photo-1500648767791-00dcc994a43e', + 'photo-1534528741775-53994a69daeb', + 'photo-1502685104226-ee32379fefbe', + 'photo-1546525848-3ce03ca516f6', + 'photo-1502685104226-ee32379fefbe', + 'photo-1494790108377-be9c29b29330', + 'photo-1506794778202-cad84cf45f1d', + 'photo-1534528741775-53994a69daeb', +] + +addClassTokens2(lines) + +const lineRanges = { + 'new-btn-hover': [4, 9], + 'input-focus': [15, 15], + 'item-hover': [20, 39], + 'new-hover': [42, 47], +} + +export function StateVariants() { + const [states, setStates] = useState([]) + const prevStates = usePrevious(states) + const codeContainerRef = useRef() + const linesContainerRef = useRef() + + function scrollTo(rangeOrRanges) { + let ranges = Array.isArray(rangeOrRanges) ? rangeOrRanges : [rangeOrRanges] + if (ranges.length === 0) return + let linesSorted = ranges.flat().sort((a, b) => a - b) + let minLine = linesSorted[0] + let maxLine = linesSorted[linesSorted.length - 1] + let $lines = linesContainerRef.current.children + let containerHeight = codeContainerRef.current.offsetHeight + let top = $lines[minLine].offsetTop + let height = $lines[maxLine].offsetTop + $lines[maxLine].offsetHeight - top + + top = top - containerHeight / 2 + height / 2 + + if (CSS.supports('scroll-behavior', 'smooth')) { + codeContainerRef.current.scrollTo({ top }) + } else { + animate(codeContainerRef.current.scrollTop, top, { + onUpdate: (top) => codeContainerRef.current.scrollTo({ top }), + }) + } + } + + useEffect(() => { + if (prevStates && prevStates.length > states.length) { + scrollTo(states.map((state) => lineRanges[state])) + } else if (states.length) { + scrollTo(lineRanges[states[states.length - 1]]) + } + }, [states, prevStates]) + + return ( +
    +
    + + + + State variants + + Hover and focus states? We got ’em. + + + Want to style something on hover? Stick hover: at the beginning + of the class you want to add. Works for focus,{' '} + active, disabled,{' '} + focus-within, focus-visible, and even + fancy states we invented ourselves like group-hover. + + + Learn more, handling hover, focus, and other states + +
    + +
    +
    +
    +

    Projects

    +
    { + setStates((states) => [...states, 'new-btn-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'new-btn-hover')) + }} + > + + + + New +
    +
    +
    + + + + { + setStates((states) => [...states, 'input-focus']) + }} + onBlur={() => { + setStates((states) => states.filter((x) => x !== 'input-focus')) + // resetScroll() + }} + type="text" + aria-label="Filter projects" + placeholder="Filter projects..." + className="w-full text-sm leading-6 text-gray-900 placeholder-gray-400 rounded-md py-2 pl-10 ring-1 ring-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
    +
    +
      + {projects.map((project, i, a) => ( +
    • { + setStates((states) => [...states, 'item-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'item-hover')) + }} + > +
      +
      +
      Title
      +
      + {project.title} +
      +
      +
      +
      Category
      +
      {project.category}
      +
      +
      +
      Users
      +
      + {Array.from({ length: 5 }).map((_, j) => ( + + ))} +
      +
      +
      +
      • + ))} +
    • +
      { + setStates((states) => [...states, 'new-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'new-hover')) + }} + > + + + + New project +
      +
      • +
    +
    +
    + } + right={ + + +
    0 })} + > + {lines.map((tokens, lineIndex) => ( +
    = lineRanges['new-btn-hover'][0] && + lineIndex <= lineRanges['new-btn-hover'][1]) || + (states.includes('input-focus') && + lineIndex >= lineRanges['input-focus'][0] && + lineIndex <= lineRanges['input-focus'][1]) || + (states.includes('item-hover') && + lineIndex >= lineRanges['item-hover'][0] && + lineIndex <= lineRanges['item-hover'][1]) || + (states.includes('new-hover') && + lineIndex >= lineRanges['new-hover'][0] && + lineIndex <= lineRanges['new-hover'][1]) + ? 'not-mono' + : '' + } + > + {tokens.map((token, tokenIndex) => { + if ( + token.types[token.types.length - 1] === 'class' && + token.content.startsWith('(') + ) { + const [, state] = token.content.match(/^\(([^)]+)\)/) + return ( + + {token.content.substr(token.content.indexOf(')') + 1)} + + ) + } + return ( + + {token.content} + + ) + })} +
    + ))} +
    +     +     + } + /> + + ) +} diff --git a/src/components/.ZH/home/common.js b/src/components/.ZH/home/common.js new file mode 100644 index 000000000..931f835c7 --- /dev/null +++ b/src/components/.ZH/home/common.js @@ -0,0 +1,135 @@ +import clsx from 'clsx' +import { Button } from '../Button' + +export function IconContainer({ as: Component = 'div', color, className = '', ...props }) { + return ( + + ) +} + +export function Caption({ className = '', ...props }) { + return

    +} + +export function BigText({ className = '', ...props }) { + return ( +

    + ) +} + +export function Paragraph({ as: Component = 'p', className = '', ...props }) { + return +} + +export function Link({ className, ...props }) { + return

    + } + {...props} + > + + {children} + + + ) +} + +export function ContentsLayout({ children, meta, classes, tableOfContents, section }) { + const router = useRouter() + const toc = [ + ...(classes ? [{ title: 'Quick reference', slug: 'class-reference', children: [] }] : []), + ...tableOfContents, + ] + + const { currentSection, registerHeading, unregisterHeading } = useTableOfContents(toc) + let { prev, next } = usePrevNext() + + return ( +
    + + + {classes ? ( + <> + +
    + {children} +
    + + ) : ( +
    + {children} +
    + )} +     + + + +
    + {toc.length > 0 && ( + + )} +
    +
    + ) +} diff --git a/src/layouts/.ZH/DocumentationLayout.js b/src/layouts/.ZH/DocumentationLayout.js new file mode 100644 index 000000000..73022b005 --- /dev/null +++ b/src/layouts/.ZH/DocumentationLayout.js @@ -0,0 +1,29 @@ +import { SidebarLayout } from '@/layouts/.ZH/SidebarLayout' +import Head from 'next/head' +import { useRouter } from 'next/router' +import socialSquare from '@/img/social-square.jpg' +import { Title } from '@/components/Title' +import { documentationNav } from '@/navs/.ZH/documentation' + +export function DocumentationLayout(props) { + let router = useRouter() + + return ( + <> + + {props.layoutProps.meta.metaTitle || props.layoutProps.meta.title} + + + + + + + + ) +} + +DocumentationLayout.nav = documentationNav diff --git a/src/layouts/.ZH/InstallationLayout.js b/src/layouts/.ZH/InstallationLayout.js new file mode 100644 index 000000000..817dbc2f0 --- /dev/null +++ b/src/layouts/.ZH/InstallationLayout.js @@ -0,0 +1,156 @@ +import { BasicLayout } from '@/layouts/BasicLayout' +import clsx from 'clsx' +import { useRouter } from 'next/router' +import Link from 'next/link' +import { IconContainer } from '@/components/home/common' + +let tabs = { + 'Tailwind CLI': '/docs/installation', + 'Using PostCSS': '/docs/installation/using-postcss', + 'Framework Guides': '/docs/installation/framework-guides', + 'Play CDN': '/docs/installation/play-cdn', +} + +let readNext = [ + { + title: 'Utility-First Fundamentals', + href: '/docs/utility-first', + body: () => ( +

    + Using a utility-first workflow to build complex components from a constrained set of + primitive utilities. +

    + ), + image: require('@/img/icons/home/utility-first.png').default, + }, + { + title: 'Responsive Design', + href: '/docs/responsive-design', + body: () => ( +

    + Build fully responsive user interfaces that adapt to any screen size using responsive + modifiers. +

    + ), + image: require('@/img/icons/home/mobile-first.png').default, + }, + { + title: 'Hover, Focus & Other States', + href: '/docs/hover-focus-and-other-states', + body: () => ( +

    + Style elements in interactive states like hover, focus, and more using conditional + modifiers. +

    + ), + image: require('@/img/icons/home/state-variants.png').default, + }, + { + title: 'Dark Mode', + href: '/docs/dark-mode', + body: () => ( +

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    + ), + image: require('@/img/icons/home/dark-mode.png').default, + }, + { + title: 'Reusing Styles', + href: '/docs/reusing-styles', + body: () => ( +

    + Manage duplication and keep your projects maintainable by creating reusable abstractions. +

    + ), + image: require('@/img/icons/home/component-driven.png').default, + }, + { + title: 'Customizing the Framework', + href: '/docs/adding-custom-styles', + body: () => ( +

    Customize the framework to match your brand and extend it with your own custom styles.

    + ), + image: require('@/img/icons/home/customization.png').default, + }, +] + +export function InstallationLayout({ children }) { + let router = useRouter() + + return ( + +
    +
    +

    安裝

    +

    + Get started with Tailwind CSS +

    +

    + Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any + other templates for class names, generating the corresponding styles and then writing + them to a static CSS file. +

    +

    + It's fast, flexible, and reliable — with zero-runtime. +

    +
    +
    +
    +
    +

    Installation

    +
    +
    +
      + {Object.entries(tabs).map(([name, href]) => ( +
    • + + + {name} + + +
      • + ))} +
    +
    +
    +
    + {children} +
    + +
    +

    What to read next

    +
    +

    + Get familiar with some of the core concepts that make Tailwind CSS different from + writing traditional CSS. +

    +
    +
      + {readNext.map((item) => ( +
    • + + + +
      +

      + + {item.title} + +

      +
      + +
      +
      +
      • + ))} +
    +
    +     + ) +} diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js new file mode 100644 index 000000000..9a45861db --- /dev/null +++ b/src/layouts/.ZH/SidebarLayout.js @@ -0,0 +1,425 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' +import { createContext, forwardRef, useRef } from 'react' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import clsx from 'clsx' +import { SearchButton } from '@/components/.ZH/Search' +import { Dialog } from '@headlessui/react' + +export const SidebarContext = createContext() + +const NavItem = forwardRef(({ href, children, isActive, isPublished, fallbackHref }, ref) => { + return ( +
  • + + + {children} + + +
    • + ) +}) + +/** + * Find the nearst scrollable ancestor (or self if scrollable) + * + * Code adapted and simplified from the smoothscroll polyfill + * + * + * @param {Element} el + */ +function nearestScrollableContainer(el) { + /** + * indicates if an element can be scrolled + * + * @param {Node} el + */ + function isScrollable(el) { + const style = window.getComputedStyle(el) + const overflowX = style['overflowX'] + const overflowY = style['overflowY'] + const canScrollY = el.clientHeight < el.scrollHeight + const canScrollX = el.clientWidth < el.scrollWidth + + const isScrollableY = canScrollY && (overflowY === 'auto' || overflowY === 'scroll') + const isScrollableX = canScrollX && (overflowX === 'auto' || overflowX === 'scroll') + + return isScrollableY || isScrollableX + } + + while (el !== document.body && isScrollable(el) === false) { + el = el.parentNode || el.host + } + + return el +} + +function Nav({ nav, children, fallbackHref }) { + const router = useRouter() + const activeItemRef = useRef() + const previousActiveItemRef = useRef() + const scrollRef = useRef() + + useIsomorphicLayoutEffect(() => { + function updatePreviousRef() { + previousActiveItemRef.current = activeItemRef.current + } + + if (activeItemRef.current) { + if (activeItemRef.current === previousActiveItemRef.current) { + updatePreviousRef() + return + } + + updatePreviousRef() + + const scrollable = nearestScrollableContainer(scrollRef.current) + + const scrollRect = scrollable.getBoundingClientRect() + const activeItemRect = activeItemRef.current.getBoundingClientRect() + + const top = activeItemRef.current.offsetTop + const bottom = top - scrollRect.height + activeItemRect.height + + if (scrollable.scrollTop > top || scrollable.scrollTop < bottom) { + scrollable.scrollTop = top - scrollRect.height / 2 + activeItemRect.height / 2 + } + } + }, [router.pathname]) + + return ( + + ) +} + +const TopLevelAnchor = forwardRef( + ({ children, href, className, icon, isActive, onClick, shadow }, ref) => { + return ( +
  • + +
    + + {icon} + +
    + {children} +     +
    • + ) + } +) + +function TopLevelLink({ href, as, ...props }) { + if (/^https?:\/\//.test(href)) { + return + } + + return ( + + + + ) +} + +function TopLevelNav() { + let { pathname } = useRouter() + + return ( + <> + + + + + } + > + {/* Documentation */} + 技術文件 + + + + + + + } + > + {/* Components */} + 元件庫 + + + + + + } + > + {/* Screencasts */} + 教學影片 + + + + + + + } + > + {/* Playground */} + 遊樂場 + + + + + + + } + > + {/* Resources */} + 資源 + + + + + + + + } + > + {/* Community */} + 社群 + + + ) +} + +function Wrapper({ allowOverflow, children }) { + return
    {children}
    +} + +export function SidebarLayout({ + children, + navIsOpen, + setNavIsOpen, + nav, + sidebar, + fallbackHref, + layoutProps: { allowOverflow = true } = {}, +}) { + return ( + + +
    +
    + +
    +
    {children}
    +
    +     + setNavIsOpen(false)} + className="fixed z-50 inset-0 overflow-y-auto lg:hidden" + > + +
    + + +
    +     +     + ) +} From c964d4c728611ddf0ab614aa212d27cff7e264b9 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:31:59 +0800 Subject: [PATCH 04/48] backup to .EN --- src/pages/.EN/_app.EN.js | 115 ++++++++++++ src/pages/.EN/brand.mdx | 55 ++++++ src/pages/.EN/index.EN.js | 194 ++++++++++++++++++++ src/pages/.EN/resources.js | 358 +++++++++++++++++++++++++++++++++++++ 4 files changed, 722 insertions(+) create mode 100644 src/pages/.EN/_app.EN.js create mode 100644 src/pages/.EN/brand.mdx create mode 100644 src/pages/.EN/index.EN.js create mode 100644 src/pages/.EN/resources.js diff --git a/src/pages/.EN/_app.EN.js b/src/pages/.EN/_app.EN.js new file mode 100644 index 000000000..891ff6890 --- /dev/null +++ b/src/pages/.EN/_app.EN.js @@ -0,0 +1,115 @@ +import '../css/fonts.css' +import '../css/main.css' +import 'focus-visible' +import { useState, useEffect, Fragment } from 'react' +import { Header } from '@/components/Header' +import { Title } from '@/components/Title' +import Router from 'next/router' +import ProgressBar from '@badrap/bar-of-progress' +import Head from 'next/head' +import socialCardLarge from '@/img/social-card-large.jpg' +import { ResizeObserver } from '@juggle/resize-observer' +import 'intersection-observer' +import { SearchProvider } from '@/components/Search' + +if (typeof window !== 'undefined' && !('ResizeObserver' in window)) { + window.ResizeObserver = ResizeObserver +} + +const progress = new ProgressBar({ + size: 2, + color: '#38bdf8', + className: 'bar-of-progress', + delay: 100, +}) + +// this fixes safari jumping to the bottom of the page +// when closing the search modal using the `esc` key +if (typeof window !== 'undefined') { + progress.start() + progress.finish() +} + +Router.events.on('routeChangeStart', () => progress.start()) +Router.events.on('routeChangeComplete', () => progress.finish()) +Router.events.on('routeChangeError', () => progress.finish()) + +export default function App({ Component, pageProps, router }) { + let [navIsOpen, setNavIsOpen] = useState(false) + + useEffect(() => { + if (!navIsOpen) return + function handleRouteChange() { + setNavIsOpen(false) + } + Router.events.on('routeChangeComplete', handleRouteChange) + return () => { + Router.events.off('routeChangeComplete', handleRouteChange) + } + }, [navIsOpen]) + + const Layout = Component.layoutProps?.Layout || Fragment + const layoutProps = Component.layoutProps?.Layout + ? { layoutProps: Component.layoutProps, navIsOpen, setNavIsOpen } + : {} + const showHeader = router.pathname !== '/' + const meta = Component.layoutProps?.meta || {} + const description = + meta.metaDescription || meta.description || 'Documentation for the Tailwind CSS framework.' + + if (router.pathname.startsWith('/examples/')) { + return + } + + let section = + meta.section || + Object.entries(Component.layoutProps?.Layout?.nav ?? {}).find(([, items]) => + items.find(({ href }) => href === router.pathname) + )?.[0] + + return ( + <> + {meta.metaTitle || meta.title} + + + + + + + + + + + + + + + + {showHeader && ( +
    setNavIsOpen(isOpen)} + title={meta.title} + section={section} + /> + )} + + + + + + ) +} diff --git a/src/pages/.EN/brand.mdx b/src/pages/.EN/brand.mdx new file mode 100644 index 000000000..8bc54c824 --- /dev/null +++ b/src/pages/.EN/brand.mdx @@ -0,0 +1,55 @@ +--- +title: "Brand" +description: "Tailwind CSS brand assets and usage guidelines." +--- + +export const Layout = require('@/layouts/DocumentationLayout').DocumentationLayout +export default require('@/layouts/ContentsLayout').ContentsLayout + +## Trademark Usage Agreement + +The Tailwind name and logos are trademarks of Tailwind Labs Inc. + +You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc. Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted. + +This includes naming a product or service in a way that emphasizes the Tailwind brand, like "Tailwind Themes" or "Tailwind Studio", as well as in domain names like "tailwindkits.com". + +Instead, you must use your own brand name in a way that clearly distinguishes it from Tailwind CSS. Examples that are permitted include "ComponentStudio for Tailwind CSS" or "UtilityThemes: Templates for Tailwind CSS". + +Additionally, you may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent. + +--- + +## Assets + +These assets are provided for use in situations like articles and video tutorials. They should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc. + +### Mark + + + +Download mark + +### Logotype + + + +Download logotype diff --git a/src/pages/.EN/index.EN.js b/src/pages/.EN/index.EN.js new file mode 100644 index 000000000..581d0a7af --- /dev/null +++ b/src/pages/.EN/index.EN.js @@ -0,0 +1,194 @@ +import { Testimonials } from '@/components/Testimonials' +import { DarkMode } from '@/components/home/DarkMode' +import { ConstraintBased } from '@/components/home/ConstraintBased' +import { BuildAnything } from '@/components/home/BuildAnything' +import { Performance } from '@/components/home/Performance' +import { MobileFirst } from '@/components/home/MobileFirst' +import { StateVariants } from '@/components/home/StateVariants' +import { ComponentDriven } from '@/components/home/ComponentDriven' +import { Customization } from '@/components/home/Customization' +import { ModernFeatures } from '@/components/home/ModernFeatures' +import { EditorTools } from '@/components/home/EditorTools' +import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' +import { SearchButton } from '@/components/Search' +import { Hero } from '@/components/home/Hero' +import { Logo } from '@/components/Logo' +import { Footer } from '@/components/home/Footer' +import NextLink from 'next/link' +import Head from 'next/head' +import { NavItems, NavPopover } from '@/components/Header' + +function Header() { + return ( +
    +
    +
    + +
    +
    +
    + +
    + + Search + + +
    + +
    + +
    +
    +
    +

    + Rapidly build modern websites without ever leaving your HTML. +

    +

    + A utility-first CSS framework packed with classes like{' '} + flex,{' '} + pt-4,{' '} + text-center and{' '} + rotate-90 that can be + composed to build any design, directly in your markup. +

    +
    + + + Get started + + + + {({ actionKey }) => ( + <> + + Quick search... + {actionKey && ( + + + {actionKey[0]} + {' '} + K + + )} + + )} + +
    +
    +
    + +
    + ) +} + +export default function Home() { + return ( + <> + + + + Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. + +
    +
    +
    +

    + “Best practices” don’t actually work. +

    +
    +
    +

    + I’ve written{' '} + + a few thousand words + {' '} + on why traditional “semantic class names” are the reason CSS is hard to maintain, + but the truth is you’re never going to believe me until you actually try it. If you + can suppress the urge to retch long enough to give it a chance, I really think + you’ll wonder how you ever worked with CSS any other way. +

    +
    +
    + +
    +
    Adam Wathan
    +
    Creator of Tailwind CSS
    +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + +
    +
    + + ) +} diff --git a/src/pages/.EN/resources.js b/src/pages/.EN/resources.js new file mode 100644 index 000000000..7b85c4153 --- /dev/null +++ b/src/pages/.EN/resources.js @@ -0,0 +1,358 @@ +import { DocumentationLayout } from '@/layouts/DocumentationLayout' +import { Button } from '@/components/Button' +import clsx from 'clsx' +import { BasicLayout } from '@/layouts/BasicLayout' +import { ReactComponent as DiscordIcon } from '@/img/icons/discord.svg' +import { ReactComponent as GitHubIcon } from '@/img/icons/github.svg' + +function CardGroup({ children, className }) { + return ( +
      + {children} +
    + ) +} + +function Card({ title, superTitle, href, color, body, image, button }) { + return ( +
  • +
    +

    + {button ? ( + <> + {superTitle} + {title} + + ) : ( + + {superTitle} + {title} + + )} +

    +
    {body}
    + {button && ( + + )} +
    + +
    • + ) +} + +function Icon({ children, className }) { + return ( +
    +
    {children}
    +
    + ) +} + +export default function Resources() { + return ( + +
    +

    Resources

    +

    + Everything else you need to build awesome Tailwind CSS websites +

    +

    + We think Tailwind is an amazing CSS framework, but you need more than just a CSS framework + to produce visually awesome work. +

    +
    + +
    +
    +

    + Design resources +

    +
    +

    + Design is hard so we made a few resources to help you with it. These resources are a + great way to help you with your designs and a great way to support the development of + the framework. +

    +
    + +
      + {[ + { + title: 'Refactoring UI', + description: 'Learn UI Design', + images: [ + require('@/img/resources/refactoringui-small@75.jpg').default, + require('@/img/resources/refactoringui@75.jpg').default, + ], + color: 'text-blue-500', + href: 'https://refactoringui.com', + body: ( + <> +

      + Refactoring UI is a design-for-developers book + video series put together by + Adam Wathan and Steve Schoger. It covers literally everything we know about + making things look awesome. +

      +

      + Almost 10,000 people have picked it up so far and have all sorts of awesome + things to say about how it helped them improve their work. +

      + + ), + }, + { + title: 'Tailwind UI', + description: 'Beautiful UI components, crafted by the creators of Tailwind CSS', + images: [ + require('@/img/resources/tailwindui-small@75.jpg').default, + require('@/img/resources/tailwindui@75.jpg').default, + ], + color: 'text-sky-500', + href: 'https://tailwindui.com', + body: ( + <> +

      + Tailwind UI is a collection of professionally designed, pre-built, fully + responsive HTML snippets you can drop into your Tailwind projects. +

      +

      + There are currently over 550 components available in three different + categories (Marketing, Application UI and E-commerce) and we’re always adding + more. +

      + + ), + }, + ].map(({ title, description, images, color, body, href }) => ( +
    • +
      +

      {title}

      +

      + {description} +

      +
      {body}
      + +
      +
      +
      + + + + +
      +
      +
      • + ))} +
    +
    + +
    +

    + Additional resources +

    +
    +

    + Tailwind isn’t the only open-source project we maintain. We’ve made a few other + resources to help you with your design and development workflow. +

    +
    + + + {[ + { + superTitle: 'Headless UI', + title: 'Completely unstyled, fully accessible UI components', + body: ( +

    + Completely unstyled, fully accessible UI components, designed to integrate + beautifully with Tailwind CSS. +

    + ), + href: 'https://headlessui.dev', + image: require('@/img/resources/headlessui@75.jpg').default, + color: 'text-indigo-500', + }, + { + superTitle: 'Heroicons', + title: 'Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.', + body: ( +

    + A set of 450+ free MIT-licensed SVG icons. Available as basic SVG icons and via + first-party React and Vue libraries. +

    + ), + href: 'https://heroicons.com', + image: require('@/img/resources/heroicons@75.jpg').default, + color: 'text-purple-500', + }, + { + superTitle: 'Hero Patterns', + title: 'Seamless SVG background patterns by the makers of Tailwind CSS.', + body: ( +

    + A collection of over 100 free MIT-licensed high-quality SVG patterns for you to + use in your web projects. +

    + ), + href: 'https://heropatterns.com', + image: require('@/img/resources/heropatterns@75.jpg').default, + color: 'text-cyan-500', + }, + ].map((card) => ( + + Learn more, {card.title} + + } + {...card} + /> + ))} +     +
    + +
    +

    Screencasts

    +
    +

    + Head over to our official YouTube channel and dive into dozens of videos that will + teach you everything from Tailwind basics to advanced concepts. +

    +
    + + + {[ + { + superTitle: 'Fundamentals', + title: 'Translating a Custom Design System to Tailwind CSS', + body: ( +

    + Learn how to configure Tailwind to create your own utility framework tuned + specifically for your project. +

    + ), + href: 'https://www.youtube.com/watch?v=cZc4Jn5nK3k', + image: require('@/img/resources/translating-design-system@75.jpg').default, + color: 'text-sky-500', + }, + { + superTitle: 'Fundamentals', + title: 'Adding Tailwind CSS to an Existing Project', + body: ( +

    + Learn how to add Tailwind CSS to an existing project without running into naming + collisions or specificity issues. +

    + ), + href: 'https://www.youtube.com/watch?v=oG6XPy1t1KA', + image: require('@/img/resources/existing-project@75.jpg').default, + color: 'text-pink-500', + }, + { + superTitle: 'How we’d build it', + title: + 'Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js', + body: ( +

    + Fetch products from a Shopify store using the GraphQL API and assemble the pages + using Tailwind UI. +

    + ), + href: 'https://www.youtube.com/watch?v=xNMYz74zNHM', + image: require('@/img/resources/ecommerce-store@75.jpg').default, + color: 'text-indigo-500', + }, + ].map((card) => ( + + ))} +     + + +
    + +
    +

    + Connect and contribute +

    +
    +

    + Whether you're a beginner or an advanced user, getting involved in the Tailwind + community is a great way to connect with like-minded folks who are building awesome + things with the framework. +

    +
    + +
      + {[ + { + title: 'Discord', + href: '/discord', + description: + 'Join over 10,000 members on the Discord group to chat about Tailwind and other related topics.', + icon: ( + + + + ), + }, + { + title: 'GitHub Discussions', + href: 'https://github.com/tailwindlabs/tailwindcss/discussions', + description: + 'Have an issue with your project? Connect with other members of the Tailwind community to get some assistance.', + icon: ( + + + + ), + }, + ].map(({ title, href, description, icon }) => ( +
    • +
      +

      + + {title} + +

      +

      {description}

      +
      +
      + {icon} +
      +
      • + ))} +
    +
    +
    +     + ) +} + +Resources.layoutProps = { + meta: { + title: 'Resources', + }, + Layout: DocumentationLayout, +} From bd1eba82c21e196c896d2069459bb01e19ec9d24 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:32:16 +0800 Subject: [PATCH 05/48] copy to navs/.ZH --- src/navs/.ZH/documentation.js | 247 ++++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 src/navs/.ZH/documentation.js diff --git a/src/navs/.ZH/documentation.js b/src/navs/.ZH/documentation.js new file mode 100644 index 000000000..6e1f8f44a --- /dev/null +++ b/src/navs/.ZH/documentation.js @@ -0,0 +1,247 @@ +import { createPageList } from '@/utils/createPageList' + +const pages = createPageList( + require.context(`../../pages/docs/.ZH/?meta=title,shortTitle,published`, false, /\.mdx$/), + 'docs' +) + +// const pages_of_installation = createPageList( +// require.context(`../../pages/docs/.ZH/installation/?meta=title,shortTitle,published`, false, /\.js$/), +// 'docs/installation' +// ) + +export const documentationNav = { + '起手式': [ + { + title: '安裝', + // href: '/docs/installation', + href: '/docs/.ZH/installation', + match: /^\/docs\/installation/, + }, + // pages_of_installation['index'], + // TODO: Add these pages + // pages['tailwind-cli'], + // { title: 'Play CDN', href: '#' }, + pages['editor-setup'], + pages['using-with-preprocessors'], + pages['optimizing-for-production'], + pages['browser-support'], + pages['upgrade-guide'], + ], + '核心概念': [ + pages['utility-first'], + // TODO: Maybe write this page + // pages['writing-your-html'], + pages['hover-focus-and-other-states'], + pages['responsive-design'], + pages['dark-mode'], + pages['reusing-styles'], + pages['adding-custom-styles'], + pages['functions-and-directives'], + ], + '客製化': [ + pages['configuration'], + pages['content-configuration'], + // TODO: Remove + redirect to v2 + // pages['just-in-time-mode'], + pages['theme'], + pages['screens'], + pages['customizing-colors'], + pages['customizing-spacing'], + // TODO: Redirect to v2 + // pages['configuring-variants'], + pages['plugins'], + pages['presets'], + ], + '基礎樣式': [pages['preflight']], + '排版': [ + pages['aspect-ratio'], + pages['container'], + pages['columns'], + pages['break-after'], + pages['break-before'], + pages['break-inside'], + pages['box-decoration-break'], + pages['box-sizing'], + pages['display'], + pages['float'], + pages['clear'], + pages['isolation'], + pages['object-fit'], + pages['object-position'], + pages['overflow'], + pages['overscroll-behavior'], + pages['position'], + pages['top-right-bottom-left'], + pages['visibility'], + pages['z-index'], + ], + 'Flexbox & Grid': [ + pages['flex-basis'], + pages['flex-direction'], + pages['flex-wrap'], + pages['flex'], + pages['flex-grow'], + pages['flex-shrink'], + pages['order'], + pages['grid-template-columns'], + pages['grid-column'], + pages['grid-template-rows'], + pages['grid-row'], + pages['grid-auto-flow'], + pages['grid-auto-columns'], + pages['grid-auto-rows'], + pages['gap'], + pages['justify-content'], + pages['justify-items'], + pages['justify-self'], + pages['align-content'], + pages['align-items'], + pages['align-self'], + pages['place-content'], + pages['place-items'], + pages['place-self'], + ], + Spacing: [pages['padding'], pages['margin'], pages['space']], + Sizing: [ + pages['width'], + pages['min-width'], + pages['max-width'], + pages['height'], + pages['min-height'], + pages['max-height'], + ], + Typography: [ + pages['font-family'], + pages['font-size'], + pages['font-smoothing'], + pages['font-style'], + pages['font-weight'], + pages['font-variant-numeric'], + pages['letter-spacing'], + pages['line-height'], + pages['list-style-type'], + pages['list-style-position'], + pages['text-align'], + pages['text-color'], + pages['text-decoration'], + pages['text-decoration-color'], + pages['text-decoration-style'], + pages['text-decoration-thickness'], + pages['text-underline-offset'], + pages['text-transform'], + pages['text-overflow'], + pages['text-indent'], + pages['vertical-align'], + pages['whitespace'], + pages['word-break'], + pages['content'], + ], + Backgrounds: [ + pages['background-attachment'], + pages['background-clip'], + pages['background-color'], + pages['background-origin'], + pages['background-position'], + pages['background-repeat'], + pages['background-size'], + pages['background-image'], + pages['gradient-color-stops'], + ], + Borders: [ + pages['border-radius'], + pages['border-width'], + pages['border-color'], + pages['border-style'], + pages['divide-width'], + pages['divide-color'], + pages['divide-style'], + pages['outline-width'], + pages['outline-color'], + pages['outline-style'], + pages['outline-offset'], + pages['ring-width'], + pages['ring-color'], + pages['ring-offset-width'], + pages['ring-offset-color'], + ], + Effects: [ + pages['box-shadow'], + pages['box-shadow-color'], + pages['opacity'], + pages['mix-blend-mode'], + pages['background-blend-mode'], + ], + Filters: [ + pages['blur'], + pages['brightness'], + pages['contrast'], + pages['drop-shadow'], + pages['grayscale'], + pages['hue-rotate'], + pages['invert'], + pages['saturate'], + pages['sepia'], + pages['backdrop-blur'], + pages['backdrop-brightness'], + pages['backdrop-contrast'], + pages['backdrop-grayscale'], + pages['backdrop-hue-rotate'], + pages['backdrop-invert'], + pages['backdrop-opacity'], + pages['backdrop-saturate'], + pages['backdrop-sepia'], + ], + Tables: [pages['border-collapse'], pages['table-layout']], + 'Transitions & Animation': [ + pages['transition-property'], + pages['transition-duration'], + pages['transition-timing-function'], + pages['transition-delay'], + pages['animation'], + ], + Transforms: [ + pages['scale'], + pages['rotate'], + pages['translate'], + pages['skew'], + pages['transform-origin'], + ], + Interactivity: [ + pages['accent-color'], + pages['appearance'], + pages['cursor'], + pages['caret-color'], + pages['pointer-events'], + pages['resize'], + pages['scroll-behavior'], + pages['scroll-margin'], + pages['scroll-padding'], + pages['scroll-snap-align'], + pages['scroll-snap-stop'], + pages['scroll-snap-type'], + pages['touch-action'], + pages['user-select'], + pages['will-change'], + ], + SVG: [pages['fill'], pages['stroke'], pages['stroke-width']], + Accessibility: [pages['screen-readers']], + 'Official Plugins': [ + { + title: 'Typography', + href: 'https://github.com/tailwindlabs/tailwindcss-typography', + }, + { + title: 'Forms', + href: 'https://github.com/tailwindlabs/tailwindcss-forms', + }, + { + title: 'Aspect Ratio', + href: 'https://github.com/tailwindlabs/tailwindcss-aspect-ratio', + }, + { + title: 'Line Clamp', + href: 'https://github.com/tailwindlabs/tailwindcss-line-clamp', + }, + ], +} From cc8ef460260dca300e22d8518f7fadee83d77165 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:33:35 +0800 Subject: [PATCH 06/48] translate and re-import from .ZH --- src/pages/_app.js | 6 ++-- src/pages/brand.mdx | 4 +-- src/pages/index.js | 70 +++++++++++++++++++++++++++++++----------- src/pages/resources.js | 2 +- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/pages/_app.js b/src/pages/_app.js index 891ff6890..a5550204c 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -2,7 +2,8 @@ import '../css/fonts.css' import '../css/main.css' import 'focus-visible' import { useState, useEffect, Fragment } from 'react' -import { Header } from '@/components/Header' +// import { Header } from '@/components/Header' +import { Header } from '@/components/.ZH/Header' import { Title } from '@/components/Title' import Router from 'next/router' import ProgressBar from '@badrap/bar-of-progress' @@ -10,7 +11,8 @@ import Head from 'next/head' import socialCardLarge from '@/img/social-card-large.jpg' import { ResizeObserver } from '@juggle/resize-observer' import 'intersection-observer' -import { SearchProvider } from '@/components/Search' +// import { SearchProvider } from '@/components/Search' +import { SearchProvider } from '@/components/.ZH/Search' if (typeof window !== 'undefined' && !('ResizeObserver' in window)) { window.ResizeObserver = ResizeObserver diff --git a/src/pages/brand.mdx b/src/pages/brand.mdx index 8bc54c824..efa819570 100644 --- a/src/pages/brand.mdx +++ b/src/pages/brand.mdx @@ -3,8 +3,8 @@ title: "Brand" description: "Tailwind CSS brand assets and usage guidelines." --- -export const Layout = require('@/layouts/DocumentationLayout').DocumentationLayout -export default require('@/layouts/ContentsLayout').ContentsLayout +export const Layout = require('@/layouts/.ZH/DocumentationLayout').DocumentationLayout +export default require('@/layouts/.ZH/ContentsLayout').ContentsLayout ## Trademark Usage Agreement diff --git a/src/pages/index.js b/src/pages/index.js index 581d0a7af..2f058772d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,13 +10,14 @@ import { Customization } from '@/components/home/Customization' import { ModernFeatures } from '@/components/home/ModernFeatures' import { EditorTools } from '@/components/home/EditorTools' import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' -import { SearchButton } from '@/components/Search' +// import { SearchButton } from '@/components/Search' +import { SearchButton } from '@/components/.ZH/Search' import { Hero } from '@/components/home/Hero' import { Logo } from '@/components/Logo' import { Footer } from '@/components/home/Footer' import NextLink from 'next/link' import Head from 'next/head' -import { NavItems, NavPopover } from '@/components/Header' +import { NavItems, NavPopover } from '@/components/.ZH/Header' function Header() { return ( @@ -68,22 +69,38 @@ function Header() {

    - Rapidly build modern websites without ever leaving your HTML. + {/* Rapidly build modern websites without ever leaving your HTML. */} + 不用離開HTML，你還是可以極速建立最潮的網站。

    - A utility-first CSS framework packed with classes like{' '} - flex,{' '} + {/* A utility-first CSS framework packed with classes like{' '} */} + {/* flex,{' '} pt-4,{' '} text-center and{' '} rotate-90 that can be - composed to build any design, directly in your markup. + composed to build any design, directly in your markup. */} + 一個功能優先的 CSS 框架，集結了像是 {' '} + flex、{' '} + pt-4、{' '} + text-center 以及 {' '} + rotate-90 等 class， + 讓你可以直接將其組合起來並且建構出任意的設計。

    -
    - + {/*
    */} +
    + {/* Get started - + */} +
    + 心動。不如... + + + 馬上行動 + + +
    {({ actionKey }) => ( <> @@ -101,7 +118,8 @@ function Header() { - Quick search... + {/* Quick search... */} + 快速搜尋... {actionKey && ( @@ -128,25 +146,29 @@ export default function Home() { - Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. + {/* Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. */} + Tailwind CSS - 不用離開HTML，你還是可以極速建立最潮的網站

    - “Best practices” don’t actually work. + {/* “Best practices” don’t actually work. */} + 實際上，「最佳做法」是沒用的。

    - I’ve written{' '} + {/* I’ve written{' '} + 幾千個字 + + 就只為了說明讓 CSS 變得難以維護的原因，其實就是傳統的「語意化 class 名稱」。 + 但在你實際嘗試之前，你絕對不會認同我說的話。 + 如果你能不嫌棄地給它一個機會， + 我相信你絕對會想知道怎麼透過其他的方式使用 CSS。

    @@ -168,7 +201,8 @@ export default function Home() { />
    Adam Wathan
    -
    Creator of Tailwind CSS
    + {/*
    Creator of Tailwind CSS
    */} +
    Tailwind CSS 作者
    @@ -191,4 +225,4 @@ export default function Home() {
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js index 4f289a740..3a39a0167 100644 --- a/src/components/.ZH/home/ConstraintBased.js +++ b/src/components/.ZH/home/ConstraintBased.js @@ -1,16 +1,21 @@ import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/constraint-based.png' import defaultConfig from 'defaultConfig' import { AnimatePresence, motion } from 'framer-motion' import { useState } from 'react' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '../../GridLockup' import clsx from 'clsx' -import { lines as sizingSample } from '../../samples/sizing.html?highlight' -import { lines as colorsSample } from '../../samples/colors.html?highlight' -import { lines as typographySample } from '../../samples/typography.html?highlight' -import { lines as shadowsSample } from '../../samples/shadows.html?highlight' +// import { lines as sizingSample } from '../../samples/sizing.html?highlight' +// import { lines as colorsSample } from '../../samples/colors.html?highlight' +// import { lines as typographySample } from '../../samples/typography.html?highlight' +// import { lines as shadowsSample } from '../../samples/shadows.html?highlight' +import { lines as sizingSample } from '../../../samples/sizing.html?highlight' +import { lines as colorsSample } from '../../../samples/colors.html?highlight' +import { lines as typographySample } from '../../../samples/typography.html?highlight' +import { lines as shadowsSample } from '../../../samples/shadows.html?highlight' const tokens = { Sizing: sizingSample, @@ -272,18 +277,23 @@ export function ConstraintBased() { - Constraint-based + {/* Constraint-based */} + 以約束 (Constraint) 為基底 - An API for your design system. + 為您設計系統而生的 API - Utility classes help you work within the constraints of a system instead of littering your + {/* Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design - system. + system. */} + 功能性 class 可以約束您的系統，而不是在樣式表中填上亂七八糟的數值。 + 它們讓顏色、間距、文字版式、陰影，以及其他的一切都能井然有序的保持一致性， + 締造精良的設計系統。 - Learn more, utility-first fundamentals + {/* Learn more, utility-first fundamentals */} + 了解詳情，功能優先的基本原則
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js index 05d03c520..90833f555 100644 --- a/src/components/.ZH/home/Customization.js +++ b/src/components/.ZH/home/Customization.js @@ -7,20 +7,27 @@ import { Widont, themeTabs, } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/customization.png' import { useEffect, useRef, useState } from 'react' import tailwindColors from 'tailwindcss/colors' import { AnimatePresence, motion } from 'framer-motion' -import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' -import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' -import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' -import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' -import { Token } from '../Code' +// import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' +// import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' +// import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' +// import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' +import { font as pallyVariable } from '../../../fonts/generated/Pally-Variable.module.css' +import { font as sourceSerifProRegular } from '../../../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../../../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as synonymVariable } from '../../../fonts/generated/Synonym-Variable.module.css' +// import { Token } from '../Code' +import { Token } from '@/components/Code' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { tokens } from '../../samples/customization.js?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '../../GridLockup' +// import { tokens } from '../../samples/customization.js?highlight' +import { tokens } from '../../../samples/customization.js?highlight' const defaultSampleBody = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.' @@ -93,23 +100,30 @@ export function Customization() { - Customization + {/* Customization */} + 客製化 - Extend it, tweak it, change it. + {/* Extend it, tweak it, change it. */} + 延伸、微調和改變， 隨你喜好。

    - Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally + {/* Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally everything can be customized — from the color palette to the spacing scale to the box - shadows to the mouse cursor. + shadows to the mouse cursor. */} + Tailwind 包含了一組專門設計、可以直接使用的預設值， + 但是其實從色票、間距、陰影到滑鼠游標，任何東西，都是可以自訂的。

    - Use the tailwind.config.js file to craft your own design system, then let Tailwind - transform it into your own custom CSS framework. + {/* Use the tailwind.config.js file to craft your own design system, then let Tailwind + transform it into your own custom CSS framework. */} + 用 tailwind.config.js 設定檔來創造自己的設計系統， + 讓 Tailwind 來把它轉換成屬於你客製化的 CSS 框架。

    - Learn more, configuration + {/* Learn more, configuration */} + 了解詳情，關於配置的部分
    -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js index dc76c96c0..50c1d07b6 100644 --- a/src/components/.ZH/home/DarkMode.js +++ b/src/components/.ZH/home/DarkMode.js @@ -14,8 +14,10 @@ import iconUrl from '@/img/icons/home/dark-mode.png' import { addClassTokens } from '@/utils/addClassTokens' import { Token } from '@/components/Code' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { code, tokens } from '../../samples/dark-mode.html?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' +// import { code, tokens } from '../../samples/dark-mode-zh.html?highlight' +import { code, tokens } from '../../../samples/.ZH/dark-mode.html?highlight' function Sun(props) { return ( @@ -66,7 +68,8 @@ function DarkModeSwitch({ enabled, onChange }) { : 'bg-cyan-500 text-cyan-200 focus-visible:ring-cyan-600' )} > - {enabled ? 'Enable' : 'Disable'} dark mode + {/* {enabled ? 'Enable' : 'Disable'} dark mode */} + {enabled ? '開啟' : '關閉'}深色模式 - Dark mode + {/* Dark mode */} + 深色模式 - Now with Dark Mode. + {/* Now with Dark Mode. */} + 現在，有深色模式了 - Don’t want to be one of those websites that blinds people when they open it on their phone + {/* Don’t want to be one of those websites that blinds people when they open it on their phone at 2am? Enable dark mode in your configuration file then throw{' '} dark: in front of any color utility to apply it when dark mode is - active. Works for background colors, text colors, border colors, and even gradients. + active. Works for background colors, text colors, border colors, and even gradients. */} + 不想讓在凌晨兩點用手機打開你網站時的用戶眼睛被閃瞎嗎？ + 在設定文件中開啟深色模式並在任何顏色功能前加上{' '} + dark: ，這麼一來，當深色模式開啟時， + 背景顏色、文字顏色、邊框顏色甚至是漸層色都能發生變化。 - Learn more, dark mode + {/* Learn more, dark mode */} + 了解更多關於深色模式的內容
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js index b934bf95a..35390700e 100644 --- a/src/components/.ZH/home/EditorTools.js +++ b/src/components/.ZH/home/EditorTools.js @@ -6,8 +6,10 @@ import iconUrl from '@/img/icons/home/editor-tools.png' import { useInView } from 'react-intersection-observer' import colors from 'tailwindcss/colors' import dlv from 'dlv' -import { GridLockup } from '../GridLockup' -import { lines } from '../../samples/editor-tools.html?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' +// import { lines } from '../../samples/editor-tools.html?highlight' +import { lines } from '../../../samples/editor-tools.html?highlight' import clsx from 'clsx' const problems = [ @@ -312,20 +314,26 @@ export function EditorTools() { - Editor tools - World-class IDE integration. + {/* Editor tools */} + 編輯器插件 + {/* World-class IDE integration. */} + 世界級的 IDE 整合

    - Worried about remembering all of these class names? The Tailwind CSS IntelliSense - extension for VS Code has you covered. + {/* Worried about remembering all of these class names? The Tailwind CSS IntelliSense + extension for VS Code has you covered. */} + 擔心記不住所有的 class 名稱嗎？ + Tailwind CSS IntelliSense 這個 VS Code 擴充套件可以掩護你！

    - Get intelligent autocomplete suggestions, linting, class definitions and more, all - within your editor and with no configuration required. + {/* Get intelligent autocomplete suggestions, linting, class definitions and more, all + within your editor and with no configuration required. */} + 智慧的語法建議、整理以及 class 定義等，全部在你的編輯器裡，而且還不用設定。

    - Learn more, editor setup + {/* Learn more, editor setup */} + 閱讀更多關於編輯器的設定
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Footer.js b/src/components/.ZH/home/Footer.js index a1bd81282..ae4c544a6 100644 --- a/src/components/.ZH/home/Footer.js +++ b/src/components/.ZH/home/Footer.js @@ -1,7 +1,14 @@ import Link from 'next/link' -import { documentationNav } from '@/navs/documentation' +import { documentationNav } from '@/navs/.ZH/documentation' import { Logo } from '@/components/Logo' +const chineseNames = { + 'Getting Started': "起手式", + 'Core Concepts': "核心概念", + 'Customization': "客製化", + 'Community': "社群", +} + const footerNav = [ { 'Getting Started': documentationNav['Getting Started'], @@ -30,7 +37,8 @@ export function Footer() { > {Object.entries(sections).map(([title, items]) => (
    -

    {title}

    + {/*

    {title}

    */} +

    {chineseNames[title]? chineseNames[title]: title}

      {items.map((item) => (
    • @@ -51,4 +59,4 @@ export function Footer() {
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Hero.js b/src/components/.ZH/home/Hero.js index 073228426..22da9d324 100644 --- a/src/components/.ZH/home/Hero.js +++ b/src/components/.ZH/home/Hero.js @@ -8,7 +8,8 @@ import { debounce } from 'debounce' import { useMedia } from '@/hooks/useMedia' import { wait } from '@/utils/wait' import { createInViewPromise } from '@/utils/createInViewPromise' -import { tokens, code } from '../../samples/hero.html?highlight' +// import { tokens, code } from '../../samples/hero.html?highlight' +import { tokens, code } from '../../../samples/.ZH/hero.html?highlight' import colors from 'tailwindcss/colors' const CHAR_DELAY = 75 @@ -335,8 +336,11 @@ export function Hero() { > = 3} layout={layout} transition={TRANSITION}> - “Tailwind CSS is the only framework that I've seen scale on large teams. It’s - easy to customize, adapts to any design, and the build size is tiny.” + {/* “Tailwind CSS is the only framework that I've seen scale on large teams. It’s + easy to customize, adapts to any design, and the build size is tiny.” */} + 「Tailwind CSS 是我見過唯一一個可以在大型團隊中 + 擴展開來的框架。它可以輕鬆的客製化、 + 適應任何設計，而且建置後又很輕巧。」 - Staff Engineer, Algolia + {/* Staff Engineer, Algolia */} + Algolia 的主管工程師 @@ -485,4 +490,4 @@ function Layout({ left, right, pin = 'left' }) {
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js index 38220231d..b622aefe0 100644 --- a/src/components/.ZH/home/MobileFirst.js +++ b/src/components/.ZH/home/MobileFirst.js @@ -5,9 +5,11 @@ import { useEffect, useRef, useState } from 'react' import iconUrl from '@/img/icons/home/mobile-first.png' import { addClassTokens2 } from '@/utils/addClassTokens' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' -import { lines } from '../../pages/examples/mobile-first-demo' +// import { lines } from '../../pages/examples/mobile-first-demo' +import { lines } from '../../../pages/examples/mobile-first-demo' addClassTokens2(lines) @@ -144,7 +146,8 @@ function BrowserWindow({ size, onChange }) { d="M8.5 0C6.233 0 4.817 1.111 4.25 3.334c.85-1.112 1.842-1.528 2.975-1.25.647.158 1.109.618 1.62 1.127C9.68 4.041 10.643 5 12.75 5c2.267 0 3.683-1.111 4.25-3.333-.85 1.111-1.841 1.528-2.975 1.25-.647-.159-1.109-.619-1.62-1.128C11.57.96 10.607 0 8.5 0ZM4.25 5C1.983 5 .567 6.111 0 8.334c.85-1.112 1.842-1.528 2.975-1.25.647.158 1.109.618 1.62 1.127C5.43 9.041 6.393 10 8.5 10c2.267 0 3.684-1.11 4.25-3.333-.85 1.111-1.842 1.528-2.975 1.25-.647-.159-1.109-.619-1.62-1.128C7.32 5.96 6.357 5 4.25 5Z" /> -
    Tailwind UI - Official Tailwind CSS Components
    + {/*
    Tailwind UI - Official Tailwind CSS Components
    */} +
    兔兔教 X Tailwind CSS Taiwan
    -
    Workcation - Find a trip that suits you
    + {/*
    Workcation - Find a trip that suits you
    */} +
    Workcation - 找到適合你的旅行
    @@ -168,6 +172,7 @@ function BrowserWindow({ size, onChange }) { />
    + {/* Headless UI – Unstyled, fully accessible UI components */} Headless UI – Unstyled, fully accessible UI components
    @@ -250,20 +255,26 @@ export function MobileFirst() { - Mobile-first - Responsive everything. + {/* Mobile-first */} + 以行動裝置為主 + {/* Responsive everything. */} + 一切，都能是響應式的

    - Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you - build responsive designs right in your HTML instead. + {/* Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you + build responsive designs right in your HTML instead. */} + CSS 裡，有一堆令人頭痛又複雜的 media query 語法， + 所以 Tailwind 讓你直接在 HTML 建構出響應式設計。

    - Throw a screen size in front of literally any utility class and watch it magically apply - at a specific breakpoint. + {/* Throw a screen size in front of literally any utility class and watch it magically apply + at a specific breakpoint. */} + 將 {'"螢幕尺寸"'} 擺在任何功能性 class 前面，看看它在特定斷點時如何神奇的變化。

    - Learn more, responsive design + {/* Learn more, responsive design */} + 快去看看，關於響應式設計的一切
    @@ -333,4 +344,4 @@ export function MobileFirst() { /> ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js index 755f29d54..37b0d105f 100644 --- a/src/components/.ZH/home/ModernFeatures.js +++ b/src/components/.ZH/home/ModernFeatures.js @@ -7,16 +7,20 @@ import { Widont, InlineCode, } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/modern-features.png' import { Fragment, useState } from 'react' import { AnimatePresence, motion } from 'framer-motion' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines as gridSample } from '../../samples/grid.html?highlight' -import { lines as transformsSample } from '../../samples/transforms.html?highlight' -import { lines as filtersSample } from '../../samples/filters.html?highlight' +// import { GridLockup } from '../GridLockup' +// import { lines as gridSample } from '../../samples/grid.html?highlight' +// import { lines as transformsSample } from '../../samples/transforms.html?highlight' +// import { lines as filtersSample } from '../../samples/filters.html?highlight' +import { GridLockup } from '@/components/GridLockup' +import { lines as gridSample } from '../../../samples/grid.html?highlight' +import { lines as transformsSample } from '../../../samples/transforms.html?highlight' +import { lines as filtersSample } from '../../../samples/filters.html?highlight' const lines = { 'CSS Grid': gridSample, @@ -111,23 +115,29 @@ export function ModernFeatures() { - Modern features + {/* Modern features */} + 現代趨勢 - Cutting-edge is our comfort zone. + {/* Cutting-edge is our comfort zone. */} + 我們，只活在尖端。

    - Tailwind is unapologetically modern, and takes advantage of all the latest and greatest - CSS features to make the developer experience as enjoyable as possible. + {/* Tailwind is unapologetically modern, and takes advantage of all the latest and greatest + CSS features to make the developer experience as enjoyable as possible. */} + Tailwind 很潮。因為它具備最新最棒的 CSS 特色，只為了讓你的開發過程輕鬆愉快。

    - We've got first-class CSS grid support, composable transforms and gradients powered by + {/* We've got first-class CSS grid support, composable transforms and gradients powered by CSS variables, support for modern state selectors like{' '} - :focus-visible, and tons more. + :focus-visible, and tons more. */} + 我們用 CSS 變數提供一流的 CSS 網格、組合式變形，和漸層，也支援像是{' '} + :focus-visible 這種的現代狀態選擇器，以及更多其他功能。

    - Learn more, grid template columns + {/* Learn more, grid template columns */} + 去了解網格排版的相關內容
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js index e25367c51..928977078 100644 --- a/src/components/.ZH/home/Performance.js +++ b/src/components/.ZH/home/Performance.js @@ -4,9 +4,12 @@ import { TabBar } from '@/components/TabBar' import iconUrl from '@/img/icons/home/performance.png' import { Fragment, useCallback, useEffect, useRef, useState } from 'react' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines as html } from '../../samples/performance.html?highlight' -import { lines as css } from '../../samples/performance.txt?highlight=css' +// import { GridLockup } from '../GridLockup' +// import { lines as html } from '../../samples/performance.html?highlight' +// import { lines as css } from '../../samples/performance.txt?highlight=css' +import { GridLockup } from '@/components/GridLockup' +import { lines as html } from '../../../samples/.ZH/performance.html?highlight' +import { lines as css } from '../../../samples/performance.txt?highlight=css' import { useInView } from 'react-intersection-observer' import { animate } from 'framer-motion' @@ -130,15 +133,20 @@ export function Performance() { - Performance - It's tiny — never ship unused CSS again. + {/* Performance */} + 效能 + {/* It's tiny — never ship unused CSS again. */} + 輕巧微小 - 不再傳送任何用不到的 CSS - Tailwind automatically removes all unused CSS when building for production, which means + {/* Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind - projects ship less than 10kB of CSS to the client. + projects ship less than 10kB of CSS to the client. */} + Tailwind 會在生產環境建置時自動移除未使用的 CSS，這代表著你最後的 CSS 內容量會盡其所能的最小化。 + 事實上，大部分的 Tailwind 專案只會對客戶端傳送小於 10kB 的 CSS。 - Learn more, optimizing for production + {/* Learn more, optimizing for production */} + 繼續閱讀關於生產環境優化的部分
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ReadyMadeComponents.js b/src/components/.ZH/home/ReadyMadeComponents.js index 9be87475f..135ec78cd 100644 --- a/src/components/.ZH/home/ReadyMadeComponents.js +++ b/src/components/.ZH/home/ReadyMadeComponents.js @@ -2,7 +2,8 @@ import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/comp import iconUrl from '@/img/icons/home/ready-made-components.png' import { useInView } from 'react-intersection-observer' import { motion } from 'framer-motion' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' function AnimatedImage({ animate = false, delay = 0, ...props }) { return ( @@ -43,18 +44,23 @@ export function ReadyMadeComponents() { - Ready-made components + {/* Ready-made components */} + 現成的元件 - Move even faster with Tailwind UI. + {/* Move even faster with Tailwind UI. */} + 用 Tailwind UI 快速前進 - Tailwind UI is a collection of beautiful, fully responsive UI components, designed and + {/* Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you - want to build. + want to build. */} + Tailwind UI 集結了我們以及所有 Tailwind CSS 的創作者所設計研發的漂亮且完全響應式的 UI 元件。 + 那裏有數百個現成的範例讓你選擇，而且保證你能找到心目中想建構的完美起點。 - Learn more + {/* Learn more */} + 了解詳情
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js index 9dab162c5..b11ce417a 100644 --- a/src/components/.ZH/home/StateVariants.js +++ b/src/components/.ZH/home/StateVariants.js @@ -13,14 +13,19 @@ import { addClassTokens2 } from '@/utils/addClassTokens' import { useEffect, useRef, useState } from 'react' import { usePrevious } from '@/hooks/usePrevious' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines } from '../../samples/state-variants.html?highlight' +// import { GridLockup } from '../GridLockup' +// import { lines } from '../../samples/state-variants-zh.html?highlight' +import { GridLockup } from '@/components/GridLockup' +import { lines } from '../../../samples/.ZH/state-variants.html?highlight' import { animate } from 'framer-motion' const projects = [ - { title: 'API Integration', category: 'Engineering' }, - { title: 'New Benefits Plan', category: 'Human Resources' }, - { title: 'Onboarding Emails', category: 'Customer Success' }, + // { title: 'API Integration', category: 'Engineering' }, + // { title: 'New Benefits Plan', category: 'Human Resources' }, + // { title: 'Onboarding Emails', category: 'Customer Success' }, + { title: 'API 整合', category: '工程' }, + { title: '薪資調整方案', category: '人資' }, + { title: '求職信', category: '顧客成功案例' }, ] const faces = [ @@ -92,19 +97,26 @@ export function StateVariants() { - State variants + {/* State variants */} + 狀態變化 - Hover and focus states? We got ’em. + {/* Hover and focus states? We got ’em. */} + 想要 hover 和 focus 的狀態？ 我們準備給你。 - Want to style something on hover? Stick hover: at the beginning + {/* Want to style something on hover? Stick hover: at the beginning of the class you want to add. Works for focus,{' '} active, disabled,{' '} focus-within, focus-visible, and even - fancy states we invented ourselves like group-hover. + fancy states we invented ourselves like group-hover. */} + 想要在滑鼠停留時有不同的樣式嗎？那就在你想用的 class 前面加上 hover:！ + 同樣，你也能加上 focus、active、 + disabled、focus-within、 + focus-visible ，甚至是我們自己發明的超酷炫狀態 group-hover。 - Learn more, handling hover, focus, and other states + {/* Learn more, handling hover, focus, and other states */} + 了解關於 hover、focus 以及其他狀態的詳細說明
    -

    Projects

    + {/*

    Projects

    */} +

    專案

    { @@ -128,7 +141,8 @@ export function StateVariants() { - New + {/* New */} + 建立
    @@ -154,7 +168,8 @@ export function StateVariants() { }} type="text" aria-label="Filter projects" - placeholder="Filter projects..." + // placeholder="Filter projects..." + placeholder="搜尋專案..." className="w-full text-sm leading-6 text-gray-900 placeholder-gray-400 rounded-md py-2 pl-10 ring-1 ring-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
    @@ -176,17 +191,20 @@ export function StateVariants() { >
    -
    Title
    + {/*
    Title
    */} +
    標題
    {project.title}
    -
    Category
    + {/*
    Category
    */} +
    分類
    {project.category}
    -
    Users
    + {/*
    Users
    */} +
    用戶
    {Array.from({ length: 5 }).map((_, j) => ( - New project + {/* New project */} + 建立專案
    @@ -290,4 +309,4 @@ export function StateVariants() { /> ) -} +} \ No newline at end of file From 19b9777fbb4f3aa0b7b6d4c9f42822de99f84b35 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:12:43 +0800 Subject: [PATCH 15/48] add pages/ZH --- src/pages/ZH/brand.mdx | 55 + src/pages/ZH/docs/accent-color.mdx | 96 ++ src/pages/ZH/docs/adding-base-styles.mdx | 100 ++ src/pages/ZH/docs/adding-custom-styles.mdx | 517 +++++++ src/pages/ZH/docs/adding-new-utilities.mdx | 190 +++ src/pages/ZH/docs/align-content.mdx | 181 +++ src/pages/ZH/docs/align-items.mdx | 134 ++ src/pages/ZH/docs/align-self.mdx | 134 ++ src/pages/ZH/docs/animation.mdx | 307 ++++ src/pages/ZH/docs/appearance.mdx | 56 + src/pages/ZH/docs/aspect-ratio.mdx | 87 ++ src/pages/ZH/docs/backdrop-blur.mdx | 111 ++ src/pages/ZH/docs/backdrop-brightness.mdx | 111 ++ src/pages/ZH/docs/backdrop-contrast.mdx | 110 ++ src/pages/ZH/docs/backdrop-grayscale.mdx | 99 ++ src/pages/ZH/docs/backdrop-hue-rotate.mdx | 121 ++ src/pages/ZH/docs/backdrop-invert.mdx | 100 ++ src/pages/ZH/docs/backdrop-opacity.mdx | 110 ++ src/pages/ZH/docs/backdrop-saturate.mdx | 110 ++ src/pages/ZH/docs/backdrop-sepia.mdx | 100 ++ src/pages/ZH/docs/background-attachment.mdx | 93 ++ src/pages/ZH/docs/background-blend-mode.mdx | 34 + src/pages/ZH/docs/background-clip.mdx | 71 + src/pages/ZH/docs/background-color.mdx | 131 ++ src/pages/ZH/docs/background-image.mdx | 77 + src/pages/ZH/docs/background-origin.mdx | 53 + src/pages/ZH/docs/background-position.mdx | 158 ++ src/pages/ZH/docs/background-repeat.mdx | 76 + src/pages/ZH/docs/background-size.mdx | 102 ++ src/pages/ZH/docs/blur.mdx | 118 ++ src/pages/ZH/docs/border-collapse.mdx | 136 ++ src/pages/ZH/docs/border-color.mdx | 185 +++ src/pages/ZH/docs/border-radius.mdx | 188 +++ src/pages/ZH/docs/border-style.mdx | 72 + src/pages/ZH/docs/border-width.mdx | 163 ++ src/pages/ZH/docs/box-decoration-break.mdx | 67 + src/pages/ZH/docs/box-shadow-color.mdx | 93 ++ src/pages/ZH/docs/box-shadow.mdx | 128 ++ src/pages/ZH/docs/box-sizing.mdx | 150 ++ src/pages/ZH/docs/break-after.mdx | 37 + src/pages/ZH/docs/break-before.mdx | 37 + src/pages/ZH/docs/break-inside.mdx | 37 + src/pages/ZH/docs/brightness.mdx | 118 ++ src/pages/ZH/docs/browser-support.mdx | 48 + src/pages/ZH/docs/caret-color.mdx | 70 + src/pages/ZH/docs/clear.mdx | 136 ++ src/pages/ZH/docs/columns.mdx | 210 +++ src/pages/ZH/docs/configuration.mdx | 440 ++++++ src/pages/ZH/docs/container.mdx | 146 ++ src/pages/ZH/docs/content-configuration.mdx | 510 +++++++ src/pages/ZH/docs/content.mdx | 129 ++ src/pages/ZH/docs/contrast.mdx | 117 ++ src/pages/ZH/docs/cursor.mdx | 88 ++ src/pages/ZH/docs/customizing-colors.mdx | 365 +++++ src/pages/ZH/docs/customizing-spacing.mdx | 79 + src/pages/ZH/docs/dark-mode.mdx | 126 ++ src/pages/ZH/docs/display.mdx | 311 ++++ src/pages/ZH/docs/divide-color.mdx | 114 ++ src/pages/ZH/docs/divide-style.mdx | 51 + src/pages/ZH/docs/divide-width.mdx | 152 ++ src/pages/ZH/docs/drop-shadow.mdx | 113 ++ src/pages/ZH/docs/editor-setup.mdx | 33 + src/pages/ZH/docs/fill.mdx | 56 + src/pages/ZH/docs/flex-basis.mdx | 103 ++ src/pages/ZH/docs/flex-direction.mdx | 104 ++ src/pages/ZH/docs/flex-grow.mdx | 119 ++ src/pages/ZH/docs/flex-shrink.mdx | 119 ++ src/pages/ZH/docs/flex-wrap.mdx | 90 ++ src/pages/ZH/docs/flex.mdx | 167 +++ src/pages/ZH/docs/float.mdx | 99 ++ src/pages/ZH/docs/font-family.mdx | 113 ++ src/pages/ZH/docs/font-size.mdx | 161 ++ src/pages/ZH/docs/font-smoothing.mdx | 50 + src/pages/ZH/docs/font-style.mdx | 50 + src/pages/ZH/docs/font-variant-numeric.mdx | 227 +++ src/pages/ZH/docs/font-weight.mdx | 106 ++ .../ZH/docs/functions-and-directives.mdx | 277 ++++ src/pages/ZH/docs/gap.mdx | 117 ++ src/pages/ZH/docs/gradient-color-stops.mdx | 170 +++ src/pages/ZH/docs/grayscale.mdx | 97 ++ src/pages/ZH/docs/grid-auto-columns.mdx | 63 + src/pages/ZH/docs/grid-auto-flow.mdx | 48 + src/pages/ZH/docs/grid-auto-rows.mdx | 63 + src/pages/ZH/docs/grid-column.mdx | 151 ++ src/pages/ZH/docs/grid-row.mdx | 139 ++ src/pages/ZH/docs/grid-template-columns.mdx | 83 ++ src/pages/ZH/docs/grid-template-rows.mdx | 83 ++ src/pages/ZH/docs/guides/create-react-app.js | 138 ++ src/pages/ZH/docs/guides/gatsby.js | 177 +++ src/pages/ZH/docs/guides/laravel.js | 162 ++ src/pages/ZH/docs/guides/nextjs.js | 146 ++ src/pages/ZH/docs/guides/nuxtjs.js | 199 +++ src/pages/ZH/docs/guides/vite.js | 159 ++ src/pages/ZH/docs/height.mdx | 147 ++ .../ZH/docs/hover-focus-and-other-states.mdx | 1328 +++++++++++++++++ src/pages/ZH/docs/hue-rotate.mdx | 128 ++ .../ZH/docs/installation/framework-guides.js | 100 ++ src/pages/ZH/docs/installation/index.js | 146 ++ src/pages/ZH/docs/installation/play-cdn.js | 153 ++ .../ZH/docs/installation/using-postcss.js | 169 +++ src/pages/ZH/docs/invert.mdx | 99 ++ src/pages/ZH/docs/isolation.mdx | 34 + src/pages/ZH/docs/justify-content.mdx | 144 ++ src/pages/ZH/docs/justify-items.mdx | 164 ++ src/pages/ZH/docs/justify-self.mdx | 172 +++ src/pages/ZH/docs/letter-spacing.mdx | 117 ++ src/pages/ZH/docs/line-height.mdx | 140 ++ src/pages/ZH/docs/list-style-position.mdx | 63 + src/pages/ZH/docs/list-style-type.mdx | 103 ++ src/pages/ZH/docs/margin.mdx | 173 +++ src/pages/ZH/docs/max-height.mdx | 83 ++ src/pages/ZH/docs/max-width.mdx | 124 ++ src/pages/ZH/docs/min-height.mdx | 61 + src/pages/ZH/docs/min-width.mdx | 59 + src/pages/ZH/docs/mix-blend-mode.mdx | 42 + src/pages/ZH/docs/object-fit.mdx | 119 ++ src/pages/ZH/docs/object-position.mdx | 156 ++ src/pages/ZH/docs/opacity.mdx | 83 ++ .../ZH/docs/optimizing-for-production.mdx | 38 + src/pages/ZH/docs/order.mdx | 81 + src/pages/ZH/docs/outline-color.mdx | 88 ++ src/pages/ZH/docs/outline-offset.mdx | 78 + src/pages/ZH/docs/outline-style.mdx | 82 + src/pages/ZH/docs/outline-width.mdx | 80 + src/pages/ZH/docs/overflow.mdx | 453 ++++++ src/pages/ZH/docs/overscroll-behavior.mdx | 72 + src/pages/ZH/docs/padding.mdx | 168 +++ src/pages/ZH/docs/place-content.mdx | 207 +++ src/pages/ZH/docs/place-items.mdx | 184 +++ src/pages/ZH/docs/place-self.mdx | 160 ++ src/pages/ZH/docs/play-cdn.mdx | 6 + src/pages/ZH/docs/plugins.mdx | 607 ++++++++ src/pages/ZH/docs/pointer-events.mdx | 76 + src/pages/ZH/docs/position.mdx | 303 ++++ src/pages/ZH/docs/preflight.mdx | 236 +++ src/pages/ZH/docs/presets.mdx | 260 ++++ src/pages/ZH/docs/resize.mdx | 81 + src/pages/ZH/docs/responsive-design.mdx | 128 ++ src/pages/ZH/docs/reusing-styles.mdx | 331 ++++ src/pages/ZH/docs/ring-color.mdx | 83 ++ src/pages/ZH/docs/ring-offset-color.mdx | 79 + src/pages/ZH/docs/ring-offset-width.mdx | 108 ++ src/pages/ZH/docs/ring-width.mdx | 143 ++ src/pages/ZH/docs/rotate.mdx | 142 ++ src/pages/ZH/docs/saturate.mdx | 118 ++ src/pages/ZH/docs/scale.mdx | 133 ++ src/pages/ZH/docs/screen-readers.mdx | 54 + src/pages/ZH/docs/screens.mdx | 267 ++++ src/pages/ZH/docs/scroll-behavior.mdx | 36 + src/pages/ZH/docs/scroll-margin.mdx | 128 ++ src/pages/ZH/docs/scroll-padding.mdx | 114 ++ src/pages/ZH/docs/scroll-snap-align.mdx | 207 +++ src/pages/ZH/docs/scroll-snap-stop.mdx | 149 ++ src/pages/ZH/docs/scroll-snap-type.mdx | 207 +++ src/pages/ZH/docs/sepia.mdx | 98 ++ src/pages/ZH/docs/skew.mdx | 146 ++ src/pages/ZH/docs/space.mdx | 186 +++ src/pages/ZH/docs/stroke-width.mdx | 71 + src/pages/ZH/docs/stroke.mdx | 58 + src/pages/ZH/docs/table-layout.mdx | 154 ++ src/pages/ZH/docs/tailwind-cli.mdx | 8 + src/pages/ZH/docs/text-align.mdx | 85 ++ src/pages/ZH/docs/text-color.mdx | 111 ++ src/pages/ZH/docs/text-decoration-color.mdx | 86 ++ src/pages/ZH/docs/text-decoration-style.mdx | 62 + .../ZH/docs/text-decoration-thickness.mdx | 82 + src/pages/ZH/docs/text-decoration.mdx | 76 + src/pages/ZH/docs/text-indent.mdx | 105 ++ src/pages/ZH/docs/text-overflow.mdx | 87 ++ src/pages/ZH/docs/text-transform.mdx | 64 + src/pages/ZH/docs/text-underline-offset.mdx | 88 ++ src/pages/ZH/docs/theme.mdx | 374 +++++ src/pages/ZH/docs/top-right-bottom-left.mdx | 174 +++ src/pages/ZH/docs/touch-action.mdx | 87 ++ src/pages/ZH/docs/transform-origin.mdx | 104 ++ src/pages/ZH/docs/transition-delay.mdx | 79 + src/pages/ZH/docs/transition-duration.mdx | 79 + src/pages/ZH/docs/transition-property.mdx | 80 + .../ZH/docs/transition-timing-function.mdx | 79 + src/pages/ZH/docs/translate.mdx | 147 ++ src/pages/ZH/docs/upgrade-guide.mdx | 409 +++++ src/pages/ZH/docs/user-select.mdx | 97 ++ .../ZH/docs/using-with-preprocessors.mdx | 393 +++++ src/pages/ZH/docs/utility-first.mdx | 229 +++ src/pages/ZH/docs/vertical-align.mdx | 146 ++ src/pages/ZH/docs/visibility.mdx | 64 + src/pages/ZH/docs/whitespace.mdx | 134 ++ src/pages/ZH/docs/width.mdx | 171 +++ src/pages/ZH/docs/will-change.mdx | 65 + src/pages/ZH/docs/word-break.mdx | 78 + src/pages/ZH/docs/z-index.mdx | 83 ++ src/pages/index.js | 31 +- 192 files changed, 26675 insertions(+), 16 deletions(-) create mode 100644 src/pages/ZH/brand.mdx create mode 100644 src/pages/ZH/docs/accent-color.mdx create mode 100644 src/pages/ZH/docs/adding-base-styles.mdx create mode 100644 src/pages/ZH/docs/adding-custom-styles.mdx create mode 100644 src/pages/ZH/docs/adding-new-utilities.mdx create mode 100644 src/pages/ZH/docs/align-content.mdx create mode 100644 src/pages/ZH/docs/align-items.mdx create mode 100644 src/pages/ZH/docs/align-self.mdx create mode 100644 src/pages/ZH/docs/animation.mdx create mode 100644 src/pages/ZH/docs/appearance.mdx create mode 100644 src/pages/ZH/docs/aspect-ratio.mdx create mode 100644 src/pages/ZH/docs/backdrop-blur.mdx create mode 100644 src/pages/ZH/docs/backdrop-brightness.mdx create mode 100644 src/pages/ZH/docs/backdrop-contrast.mdx create mode 100644 src/pages/ZH/docs/backdrop-grayscale.mdx create mode 100644 src/pages/ZH/docs/backdrop-hue-rotate.mdx create mode 100644 src/pages/ZH/docs/backdrop-invert.mdx create mode 100644 src/pages/ZH/docs/backdrop-opacity.mdx create mode 100644 src/pages/ZH/docs/backdrop-saturate.mdx create mode 100644 src/pages/ZH/docs/backdrop-sepia.mdx create mode 100644 src/pages/ZH/docs/background-attachment.mdx create mode 100644 src/pages/ZH/docs/background-blend-mode.mdx create mode 100644 src/pages/ZH/docs/background-clip.mdx create mode 100644 src/pages/ZH/docs/background-color.mdx create mode 100644 src/pages/ZH/docs/background-image.mdx create mode 100644 src/pages/ZH/docs/background-origin.mdx create mode 100644 src/pages/ZH/docs/background-position.mdx create mode 100644 src/pages/ZH/docs/background-repeat.mdx create mode 100644 src/pages/ZH/docs/background-size.mdx create mode 100644 src/pages/ZH/docs/blur.mdx create mode 100644 src/pages/ZH/docs/border-collapse.mdx create mode 100644 src/pages/ZH/docs/border-color.mdx create mode 100644 src/pages/ZH/docs/border-radius.mdx create mode 100644 src/pages/ZH/docs/border-style.mdx create mode 100644 src/pages/ZH/docs/border-width.mdx create mode 100644 src/pages/ZH/docs/box-decoration-break.mdx create mode 100644 src/pages/ZH/docs/box-shadow-color.mdx create mode 100644 src/pages/ZH/docs/box-shadow.mdx create mode 100644 src/pages/ZH/docs/box-sizing.mdx create mode 100644 src/pages/ZH/docs/break-after.mdx create mode 100644 src/pages/ZH/docs/break-before.mdx create mode 100644 src/pages/ZH/docs/break-inside.mdx create mode 100644 src/pages/ZH/docs/brightness.mdx create mode 100644 src/pages/ZH/docs/browser-support.mdx create mode 100644 src/pages/ZH/docs/caret-color.mdx create mode 100644 src/pages/ZH/docs/clear.mdx create mode 100644 src/pages/ZH/docs/columns.mdx create mode 100644 src/pages/ZH/docs/configuration.mdx create mode 100644 src/pages/ZH/docs/container.mdx create mode 100644 src/pages/ZH/docs/content-configuration.mdx create mode 100644 src/pages/ZH/docs/content.mdx create mode 100644 src/pages/ZH/docs/contrast.mdx create mode 100644 src/pages/ZH/docs/cursor.mdx create mode 100644 src/pages/ZH/docs/customizing-colors.mdx create mode 100644 src/pages/ZH/docs/customizing-spacing.mdx create mode 100644 src/pages/ZH/docs/dark-mode.mdx create mode 100644 src/pages/ZH/docs/display.mdx create mode 100644 src/pages/ZH/docs/divide-color.mdx create mode 100644 src/pages/ZH/docs/divide-style.mdx create mode 100644 src/pages/ZH/docs/divide-width.mdx create mode 100644 src/pages/ZH/docs/drop-shadow.mdx create mode 100644 src/pages/ZH/docs/editor-setup.mdx create mode 100644 src/pages/ZH/docs/fill.mdx create mode 100644 src/pages/ZH/docs/flex-basis.mdx create mode 100644 src/pages/ZH/docs/flex-direction.mdx create mode 100644 src/pages/ZH/docs/flex-grow.mdx create mode 100644 src/pages/ZH/docs/flex-shrink.mdx create mode 100644 src/pages/ZH/docs/flex-wrap.mdx create mode 100644 src/pages/ZH/docs/flex.mdx create mode 100644 src/pages/ZH/docs/float.mdx create mode 100644 src/pages/ZH/docs/font-family.mdx create mode 100644 src/pages/ZH/docs/font-size.mdx create mode 100644 src/pages/ZH/docs/font-smoothing.mdx create mode 100644 src/pages/ZH/docs/font-style.mdx create mode 100644 src/pages/ZH/docs/font-variant-numeric.mdx create mode 100644 src/pages/ZH/docs/font-weight.mdx create mode 100644 src/pages/ZH/docs/functions-and-directives.mdx create mode 100644 src/pages/ZH/docs/gap.mdx create mode 100644 src/pages/ZH/docs/gradient-color-stops.mdx create mode 100644 src/pages/ZH/docs/grayscale.mdx create mode 100644 src/pages/ZH/docs/grid-auto-columns.mdx create mode 100644 src/pages/ZH/docs/grid-auto-flow.mdx create mode 100644 src/pages/ZH/docs/grid-auto-rows.mdx create mode 100644 src/pages/ZH/docs/grid-column.mdx create mode 100644 src/pages/ZH/docs/grid-row.mdx create mode 100644 src/pages/ZH/docs/grid-template-columns.mdx create mode 100644 src/pages/ZH/docs/grid-template-rows.mdx create mode 100644 src/pages/ZH/docs/guides/create-react-app.js create mode 100644 src/pages/ZH/docs/guides/gatsby.js create mode 100644 src/pages/ZH/docs/guides/laravel.js create mode 100644 src/pages/ZH/docs/guides/nextjs.js create mode 100644 src/pages/ZH/docs/guides/nuxtjs.js create mode 100644 src/pages/ZH/docs/guides/vite.js create mode 100644 src/pages/ZH/docs/height.mdx create mode 100644 src/pages/ZH/docs/hover-focus-and-other-states.mdx create mode 100644 src/pages/ZH/docs/hue-rotate.mdx create mode 100644 src/pages/ZH/docs/installation/framework-guides.js create mode 100644 src/pages/ZH/docs/installation/index.js create mode 100644 src/pages/ZH/docs/installation/play-cdn.js create mode 100644 src/pages/ZH/docs/installation/using-postcss.js create mode 100644 src/pages/ZH/docs/invert.mdx create mode 100644 src/pages/ZH/docs/isolation.mdx create mode 100644 src/pages/ZH/docs/justify-content.mdx create mode 100644 src/pages/ZH/docs/justify-items.mdx create mode 100644 src/pages/ZH/docs/justify-self.mdx create mode 100644 src/pages/ZH/docs/letter-spacing.mdx create mode 100644 src/pages/ZH/docs/line-height.mdx create mode 100644 src/pages/ZH/docs/list-style-position.mdx create mode 100644 src/pages/ZH/docs/list-style-type.mdx create mode 100644 src/pages/ZH/docs/margin.mdx create mode 100644 src/pages/ZH/docs/max-height.mdx create mode 100644 src/pages/ZH/docs/max-width.mdx create mode 100644 src/pages/ZH/docs/min-height.mdx create mode 100644 src/pages/ZH/docs/min-width.mdx create mode 100644 src/pages/ZH/docs/mix-blend-mode.mdx create mode 100644 src/pages/ZH/docs/object-fit.mdx create mode 100644 src/pages/ZH/docs/object-position.mdx create mode 100644 src/pages/ZH/docs/opacity.mdx create mode 100644 src/pages/ZH/docs/optimizing-for-production.mdx create mode 100644 src/pages/ZH/docs/order.mdx create mode 100644 src/pages/ZH/docs/outline-color.mdx create mode 100644 src/pages/ZH/docs/outline-offset.mdx create mode 100644 src/pages/ZH/docs/outline-style.mdx create mode 100644 src/pages/ZH/docs/outline-width.mdx create mode 100644 src/pages/ZH/docs/overflow.mdx create mode 100644 src/pages/ZH/docs/overscroll-behavior.mdx create mode 100644 src/pages/ZH/docs/padding.mdx create mode 100644 src/pages/ZH/docs/place-content.mdx create mode 100644 src/pages/ZH/docs/place-items.mdx create mode 100644 src/pages/ZH/docs/place-self.mdx create mode 100644 src/pages/ZH/docs/play-cdn.mdx create mode 100644 src/pages/ZH/docs/plugins.mdx create mode 100644 src/pages/ZH/docs/pointer-events.mdx create mode 100644 src/pages/ZH/docs/position.mdx create mode 100644 src/pages/ZH/docs/preflight.mdx create mode 100644 src/pages/ZH/docs/presets.mdx create mode 100644 src/pages/ZH/docs/resize.mdx create mode 100644 src/pages/ZH/docs/responsive-design.mdx create mode 100644 src/pages/ZH/docs/reusing-styles.mdx create mode 100644 src/pages/ZH/docs/ring-color.mdx create mode 100644 src/pages/ZH/docs/ring-offset-color.mdx create mode 100644 src/pages/ZH/docs/ring-offset-width.mdx create mode 100644 src/pages/ZH/docs/ring-width.mdx create mode 100644 src/pages/ZH/docs/rotate.mdx create mode 100644 src/pages/ZH/docs/saturate.mdx create mode 100644 src/pages/ZH/docs/scale.mdx create mode 100644 src/pages/ZH/docs/screen-readers.mdx create mode 100644 src/pages/ZH/docs/screens.mdx create mode 100644 src/pages/ZH/docs/scroll-behavior.mdx create mode 100644 src/pages/ZH/docs/scroll-margin.mdx create mode 100644 src/pages/ZH/docs/scroll-padding.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-align.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-stop.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-type.mdx create mode 100644 src/pages/ZH/docs/sepia.mdx create mode 100644 src/pages/ZH/docs/skew.mdx create mode 100644 src/pages/ZH/docs/space.mdx create mode 100644 src/pages/ZH/docs/stroke-width.mdx create mode 100644 src/pages/ZH/docs/stroke.mdx create mode 100644 src/pages/ZH/docs/table-layout.mdx create mode 100644 src/pages/ZH/docs/tailwind-cli.mdx create mode 100644 src/pages/ZH/docs/text-align.mdx create mode 100644 src/pages/ZH/docs/text-color.mdx create mode 100644 src/pages/ZH/docs/text-decoration-color.mdx create mode 100644 src/pages/ZH/docs/text-decoration-style.mdx create mode 100644 src/pages/ZH/docs/text-decoration-thickness.mdx create mode 100644 src/pages/ZH/docs/text-decoration.mdx create mode 100644 src/pages/ZH/docs/text-indent.mdx create mode 100644 src/pages/ZH/docs/text-overflow.mdx create mode 100644 src/pages/ZH/docs/text-transform.mdx create mode 100644 src/pages/ZH/docs/text-underline-offset.mdx create mode 100644 src/pages/ZH/docs/theme.mdx create mode 100644 src/pages/ZH/docs/top-right-bottom-left.mdx create mode 100644 src/pages/ZH/docs/touch-action.mdx create mode 100644 src/pages/ZH/docs/transform-origin.mdx create mode 100644 src/pages/ZH/docs/transition-delay.mdx create mode 100644 src/pages/ZH/docs/transition-duration.mdx create mode 100644 src/pages/ZH/docs/transition-property.mdx create mode 100644 src/pages/ZH/docs/transition-timing-function.mdx create mode 100644 src/pages/ZH/docs/translate.mdx create mode 100644 src/pages/ZH/docs/upgrade-guide.mdx create mode 100644 src/pages/ZH/docs/user-select.mdx create mode 100644 src/pages/ZH/docs/using-with-preprocessors.mdx create mode 100644 src/pages/ZH/docs/utility-first.mdx create mode 100644 src/pages/ZH/docs/vertical-align.mdx create mode 100644 src/pages/ZH/docs/visibility.mdx create mode 100644 src/pages/ZH/docs/whitespace.mdx create mode 100644 src/pages/ZH/docs/width.mdx create mode 100644 src/pages/ZH/docs/will-change.mdx create mode 100644 src/pages/ZH/docs/word-break.mdx create mode 100644 src/pages/ZH/docs/z-index.mdx diff --git a/src/pages/ZH/brand.mdx b/src/pages/ZH/brand.mdx new file mode 100644 index 000000000..efa819570 --- /dev/null +++ b/src/pages/ZH/brand.mdx @@ -0,0 +1,55 @@ +--- +title: "Brand" +description: "Tailwind CSS brand assets and usage guidelines." +--- + +export const Layout = require('@/layouts/.ZH/DocumentationLayout').DocumentationLayout +export default require('@/layouts/.ZH/ContentsLayout').ContentsLayout + +## Trademark Usage Agreement + +The Tailwind name and logos are trademarks of Tailwind Labs Inc. + +You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc. Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted. + +This includes naming a product or service in a way that emphasizes the Tailwind brand, like "Tailwind Themes" or "Tailwind Studio", as well as in domain names like "tailwindkits.com". + +Instead, you must use your own brand name in a way that clearly distinguishes it from Tailwind CSS. Examples that are permitted include "ComponentStudio for Tailwind CSS" or "UtilityThemes: Templates for Tailwind CSS". + +Additionally, you may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent. + +--- + +## Assets + +These assets are provided for use in situations like articles and video tutorials. They should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc. + +### Mark + + + +Download mark + +### Logotype + + + +Download logotype diff --git a/src/pages/ZH/docs/accent-color.mdx b/src/pages/ZH/docs/accent-color.mdx new file mode 100644 index 000000000..f48cc3320 --- /dev/null +++ b/src/pages/ZH/docs/accent-color.mdx @@ -0,0 +1,96 @@ +--- +title: "Accent Color" +description: "Utilities for controlling the accented color of a form control." +--- + +import utilities from 'utilities?plugin=accentColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the accent color + +Use the `accent-{color}` utilities to change the accent color of an element. This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color. + + +
    + + +
    +     + +```html + + +``` + +### Changing the opacity + +While it's possible to control the opacity of the accent color using the color opacity modifier, the `rgba()` alpha value is only supported in Firefox at this time *(last tested November 2021)*. + +```html + Emerald +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + +Note, while it's possible to set an accent color using the `hover` and `active` modifiers, the resulting color will be slightly different than what you set, as browsers automatically adjust the brightness of the accent color for these two states. + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/adding-base-styles.mdx b/src/pages/ZH/docs/adding-base-styles.mdx new file mode 100644 index 000000000..f102eef7a --- /dev/null +++ b/src/pages/ZH/docs/adding-base-styles.mdx @@ -0,0 +1,100 @@ +--- +title: Adding Base Styles +description: Best practices for adding your own global base styles on top of Tailwind. +--- + +Base (or global) styles are the styles at the beginning of a stylesheet that set useful defaults for basic HTML elements like `` tags, headings, etc. or apply opinionated resets like the popular [box-sizing reset](https://www.paulirish.com/2012/box-sizing-border-box-ftw/). + +Tailwind includes a useful set of base styles out of the box that we call [Preflight](/docs/preflight), which is really just [modern-normalize](https://github.com/sindresorhus/modern-normalize) plus a thin layer of additional more opinionated styles. + +Preflight is a great starting point for most projects, but if you'd ever like to add your own additional base styles, here are some recommendations for doing it idiomatically. + +--- + +## Using classes in your HTML + +If you just want to apply some global styling to the `html` or `body` elements, consider just adding existing classes to those elements in your HTML instead of writing new CSS: + +```html + + + + + + + +``` + +--- + +## Using CSS + +If you want to apply some base styles to specific elements, the easiest way is to simply add them in your CSS. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } +} +``` + +By using the `@layer` directive, Tailwind will automatically move those styles to the same place as `@tailwind base` to avoid unintended specificity issues. + +Using the `@layer` directive will also instruct Tailwind to consider those styles for purging when purging the `base` layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. + +It's a good idea to use [@apply](/docs/functions-and-directives#apply) or [theme()](/docs/functions-and-directives#theme) to define these styles to avoid accidentally deviating from your design system. + +### @font-face rules + +You can use the same approach to add your `@font-face` rules for any custom fonts you're using: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + @font-face { + font-family: Proxima Nova; + font-weight: 400; + src: url(/fonts/proxima-nova/400-regular.woff) format("woff"); + } + @font-face { + font-family: Proxima Nova; + font-weight: 500; + src: url(/fonts/proxima-nova/500-medium.woff) format("woff"); + } +} +``` + +--- + +## Using a plugin + +You can also add base styles by [writing a plugin](/docs/plugins#adding-base-styles) and using the `addBase` function: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addBase, theme }) { + addBase({ + 'h1': { fontSize: theme('fontSize.2xl') }, + 'h2': { fontSize: theme('fontSize.xl') }, + 'h3': { fontSize: theme('fontSize.lg') }, + }) + }) + ] +} +``` + +Any styles added using `addBase` will be inserted into the `base` layer alongside Tailwind's other base styles. diff --git a/src/pages/ZH/docs/adding-custom-styles.mdx b/src/pages/ZH/docs/adding-custom-styles.mdx new file mode 100644 index 000000000..f7b1d9dd4 --- /dev/null +++ b/src/pages/ZH/docs/adding-custom-styles.mdx @@ -0,0 +1,517 @@ +--- +title: Adding Custom Styles +description: Best practices for adding your own custom styles to Tailwind. +--- + +import { TipGood, TipBad, TipCompat, TipInfo } from '@/components/Tip' + +Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you. + +Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework. + +This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins. + +## Customizing your theme + +If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations to the `theme` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + sm: '480px', + md: '768px', + lg: '976px', + xl: '1440px', + }, + colors: { + 'blue': '#1fb6ff', + 'pink': '#ff49db', + 'orange': '#ff7849', + 'green': '#13ce66', + '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', + } + } + } +} +``` + +Learn more about customizing your theme in the [Theme Configuration](/docs/theme) documentation. + +--- + +## Using arbitrary values + +While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect. + +When you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value: + +```html +
    + +
    +``` + +This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`: + +```html +
    + +
    +``` + +This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: + +```html +
    + +
    +``` + +### Arbitrary properties + +If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: + +```html +
    + +
    +``` + +This is _really_ like inline styles, but again with the benefit that you can use modifiers: + +```html +
    + +
    +``` + +This can be useful for things like CSS variables as well, especially when they need to change under different conditions: + +```html +
    + +
    +``` + +### Handling whitespace + +When an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time: + +```html +
    + +
    +``` + +In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs: + +```html +
    + +
    +``` + +In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space: + +```html +
    + +
    +``` + +### Resolving ambiguities + +Many utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`. + +When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: + +```html + +
    ...
    + + +
    ...
    +``` + +Sometimes it really is ambiguous though, for example when using CSS variables: + +```html +
    ...
    +``` + +In these situations, you can "hint" the underlying type to Tailwind by adding a [CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) before the value: + +```html + +
    ...
    + + +
    ...
    +``` + +--- + +## Using CSS and @layer + +When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +.my-custom-style { + /* ... */ +} +``` + +For more power, you can also use the `@layer` directive to add styles to Tailwind's `base`, `components`, and `utilities` layers: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .my-custom-style { + /* ... */ + } +} +``` + + +
    + Why does Tailwind group styles into "layers"? + +In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity: + +```css +.btn { + background: blue; + /* ... */ +} + +.bg-black { + background: black; +} +``` + +Here, both buttons will be black since `.bg-black` comes after `.btn` in the CSS: + +```html + + +``` + +To manage this, Tailwind organizes the styles it generates into three different "layers" — a concept popularized by [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/#what-is-itcss). + +- The `base` layer is for things like reset rules or default styles applied to plain HTML elements. +- The `components` layer is for class-based styles that you want to be able to override with utilities. +- The `utilities` layer is for small, single-purpose classes that should always take precedence over any other styles. + +Being explicit about this makes it easier to understand how your styles will interact with each other, and using the `@layer` directive lets you control the final declaration order while still organizing your actual code in whatever way you like. + +
    + +The `@layer` directive helps you control declaration order by automatically relocating your styles to the corresponding `@tailwind` directive, and also enables features like [modifiers](#using-modifiers-with-custom-css) and [tree-shaking](#removing-unused-custom-css) for your own custom CSS. + +### Adding base styles + +If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements: + +```html + + + + +``` + +This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file. + +If you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } + /* ... */ +} +``` + +Use the [`theme`](/docs/functions-and-directives#theme) function or [`@apply`](/docs/functions-and-directives#apply) directive when adding custom base styles if you want to refer to any of the values defined in your [theme](/docs/theme). + +### Adding component classes + +Use the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes. + +Traditionally these would be classes like `card`, `btn`, `badge` — that kind of thing. + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .card { + background-color: theme('colors.white'); + border-radius: theme('borderRadius.lg'); + padding: theme('spacing.6'); + box-shadow: theme('boxShadow.xl'); + } + /* ... */ +} +``` + +By defining component classes in the `components` layer, you can still use utility classes to override them when necessary: + +```html + +
    + +
    +``` + +Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [Reusing Styles](/docs/reusing-styles) for our recommendations. + +The `components` layer is also a good place to put custom styles for any third-party components you're using: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .select2-dropdown { + @apply rounded-b-lg shadow-md; + } + .select2-search { + @apply border border-gray-300 rounded; + } + .select2-results__group { + @apply text-lg font-bold text-gray-900; + } + /* ... */ +} +``` + +Use the [`theme`](/docs/functions-and-directives#theme) function or [`@apply`](/docs/functions-and-directives#apply) directive when adding custom component styles if you want to refer to any of the values defined in your [theme](/docs/theme). + +### Adding custom utilities + +Add any of your own custom utility classes to Tailwind's `utilities` layer: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .content-auto { + content-visibility: auto; + } +} +``` + +This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box. + +### Using modifiers with custom CSS + +Any custom styles you add to Tailwind with `@layer` will automatically support Tailwind's modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more. + +```css CSS +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .content-auto { + content-visibility: auto; + } +} +``` + +```html HTML +
    + +
    +``` + +Learn more about how these modifiers work in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +### Removing unused custom CSS + +Any custom styles you add to the `base`, `components`, or `utilities` layers will only be included in your compiled CSS if those styles are actually used in your HTML. + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + /* This won't be included in your compiled CSS unless you actually use it */ + .card { + /* ... */ + } +} +``` + +If you want to add some custom CSS that should always be included, add it to your stylesheet without using the `@layer` directive: + +```css main.css +@tailwind base; +@tailwind components; + +/* This will always be included in your compiled CSS */ +.card { + /* ... */ +} + +@tailwind utilities; +``` + +Make sure to put your custom styles where they need to go to get the precedence behavior you want. In the example above, we've added the `.card` class before `@tailwind utilities` to make sure utilities can still override it. + +### Using multiple CSS files + +If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you'll see errors about using `@layer` without the corresponding `@tailwind` directive. + +The easiest way to do this is using the [postcss-import](https://github.com/postcss/postcss-import) plugin: + +```diff-js postcss.config.js + module.exports = { + plugins: { ++ 'postcss-import': {}, + tailwindcss: {}, + autoprefixer: {}, + } + } +``` + +Learn more in our [build-time imports](/docs/using-with-preprocessors#build-time-imports) documentation. + +### Layers and per-component CSS + +Component frameworks like Vue and Svelte support adding per-component styles within a ` +``` + +This is because under-the-hood, frameworks like Vue and Svelte are processing every single ` +``` + +You lose the ability to control the precedence of your styles, but unfortunately that's totally out of our control because of how these tools work. + +Our recommendation is that you just don't use component styles like this at all and instead use Tailwind the way it's intended to be used — as a single global stylesheet where you use the classes directly in your HTML: + +Use Tailwind's utilities instead of component styles + +```html Card.svelte +
    + +
    +``` + + +--- + +## Writing plugins + +You can also add custom styles to your project using Tailwind's plugin system instead of using a CSS file: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + // ... + plugins: [ + plugin(function ({ addBase, addComponents, addUtilities, theme }) { + addBase({ + 'h1': { + fontSize: theme('fontSize.2xl'), + } + 'h2': { + fontSize: theme('fontSize.xl'), + } + }) + addComponents({ + '.card': { + backgroundColor: theme('colors.white'); + borderRadius: theme('borderRadius.lg'); + padding: theme('spacing.6'); + boxShadow: theme('boxShadow.xl'); + } + }) + + addUtilities({ + '.content-auto': { + contentVisibility: 'auto', + } + }) + }) + ] +} +``` + +Learn more about writing your own plugins in the [Plugins](/docs/plugins) documentation. diff --git a/src/pages/ZH/docs/adding-new-utilities.mdx b/src/pages/ZH/docs/adding-new-utilities.mdx new file mode 100644 index 000000000..9f56f69ed --- /dev/null +++ b/src/pages/ZH/docs/adding-new-utilities.mdx @@ -0,0 +1,190 @@ +--- +title: Adding New Utilities +description: Extending Tailwind with your own custom utility classes. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you may run into situations where you need to add a few of your own. + +Deciding on the best way to extend a framework can be paralyzing, so here are some best practices to help you add your own utilities in the most idiomatic way possible. + +--- + +## Using CSS + +The easiest way to add your own utilities to Tailwind is to simply add them to your CSS. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .scroll-snap-none { + scroll-snap-type: none; + } + .scroll-snap-x { + scroll-snap-type: x; + } + .scroll-snap-y { + scroll-snap-type: y; + } +} +``` + +By using the `@layer` directive, Tailwind will automatically move those styles to the same place as `@tailwind utilities` to avoid unintended specificity issues. + +Using the `@layer` directive will also instruct Tailwind to consider those styles for purging when purging the `utilities` layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. + +### Generating responsive variants + +If you'd like to generate [responsive variants](/docs/responsive-design) of your own utilities based on the breakpoints defined in your `tailwind.config.js` file, wrap your utilities in the `@variants` directive and add `responsive` to the list of variants: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants responsive { + .scroll-snap-none { + scroll-snap-type: none; + } + .scroll-snap-x { + scroll-snap-type: x; + } + .scroll-snap-y { + scroll-snap-type: y; + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different breakpoints: + +```html + +
    +``` + +Learn more about responsive utilities in the [responsive design documentation](/docs/responsive-design). + +### Generating dark mode variants + +If you'd like to generate [dark mode variants](/docs/dark-mode) of your own utilities, first make sure `darkMode` is set to either `media` or `class` in your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + darkMode: 'media' + // ... +} +``` + +Next, wrap your utilities in the `@variants` directive and add `dark` to the list of variants: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants dark { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different states: + +```html +
    +``` + +Learn more about dark mode utilities in the [dark mode documentation](/docs/dark-mode). + +### Generating state variants + +If you'd like to create [state variants](/docs/hover-focus-and-other-states) for your own utilities, wrap your utilities in the `@variants` directive and list the variants you'd like to enable: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants hover, focus { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different states: + +```html +
    +``` + +State variants are generated in the same order you list them in the `@variants` directive, so if you'd like one variant to take precedence over another, make sure you list that one last: + +```css +/* Focus will take precedence over hover */ +@variants hover, focus { + .filter-grayscale { + filter: grayscale(100%); + } + /* ... */ +} + +/* Hover will take precedence over focus */ +@variants focus, hover { + .filter-grayscale { + filter: grayscale(100%); + } + /* ... */ +} +``` + +Learn more about state variants in the [state variants documentation](/docs/hover-focus-and-other-states). + +--- + +## Using a plugin + +In addition to adding new utility classes directly in your CSS files, you can also add utilities to Tailwind by writing your own plugin: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities }) { + const newUtilities = { + '.filter-none': { + filter: 'none', + }, + '.filter-grayscale': { + filter: 'grayscale(100%)', + }, + } + + addUtilities(newUtilities, ['responsive', 'hover']) + }) + ] +} + +``` + +This can be a good choice if you want to publish your custom utilities as a library or make it easier to share them across multiple projects. + +Learn more in the [utility plugin documentation](/docs/plugins#adding-utilities). diff --git a/src/pages/ZH/docs/align-content.mdx b/src/pages/ZH/docs/align-content.mdx new file mode 100644 index 000000000..a4b59e918 --- /dev/null +++ b/src/pages/ZH/docs/align-content.mdx @@ -0,0 +1,181 @@ +--- +title: "Align Content" +description: "Utilities for controlling how rows are positioned in multi-row flex and grid containers." +--- + +import utilities from 'utilities?plugin=alignContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `content-start` to pack rows in a container against the start of the cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Center + +Use `content-center` to pack rows in a container in the center of the cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### End + +Use `content-end` to pack rows in a container against the end of the cross axis: + + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space between + +Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space around + +Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space evenly + +Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/align-items.mdx b/src/pages/ZH/docs/align-items.mdx new file mode 100644 index 000000000..b5a10534f --- /dev/null +++ b/src/pages/ZH/docs/align-items.mdx @@ -0,0 +1,134 @@ +--- +title: "Align Items" +description: "Utilities for controlling how flex and grid items are positioned along a container's cross axis." +--- + +import utilities from 'utilities?plugin=alignItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Stretch + +Use `items-stretch` to stretch items to fill the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Start + +Use `items-start` to align items to the start of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `items-center` to align items along the center of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `items-end` to align items to the end of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Baseline + +Use `items-baseline` to align items along the container's cross axis such that all of their baselines align: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/align-self.mdx b/src/pages/ZH/docs/align-self.mdx new file mode 100644 index 000000000..e9cd72250 --- /dev/null +++ b/src/pages/ZH/docs/align-self.mdx @@ -0,0 +1,134 @@ +--- +title: "Align Self" +description: "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis." +--- + +import utilities from 'utilities?plugin=alignSelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `self-auto` to align an item based on the value of the container's `align-items` property: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Start + +Use `self-start` to align an item to the start of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `self-center` to align an item along the center of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `self-end` to align an item to the end of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Stretch + +Use `self-stretch` to stretch an item to fill the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/animation.mdx b/src/pages/ZH/docs/animation.mdx new file mode 100644 index 000000000..f765ce7ab --- /dev/null +++ b/src/pages/ZH/docs/animation.mdx @@ -0,0 +1,307 @@ +--- +title: "Animation" +description: "Utilities for animating elements with CSS animations." +--- + +import redent from 'redent' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + scroll: true, + custom: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    Class
    +     		+
    Properties
    +
    + animate-none + + animation: none; +
    + animate-spin + + {redent(` + animation: spin 1s linear infinite;\n + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + `).trim()} +
    + animate-ping + + {redent(` + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n + @keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } + } + `).trim()} +
    + animate-pulse + + {redent(` + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n + @keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: .5; + } + } + `).trim()} +
    + animate-bounce + + {redent(` + animation: bounce 1s infinite;\n + @keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + } + `).trim()} +
    + ), +} + +## Basic usage + +### Spin + +Add the `animate-spin` utility to add a linear spin animation to elements like loading indicators. + + +
    + +
    +     + +```html + +``` + +### Ping + +Add the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges. + + +
    + + + + + + + +
    +     + +```html + + + + +``` + +### Pulse + +Add the `animate-pulse` utility to make an element gently fade in and out — useful for things like skeleton loaders. + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` + +### Bounce + +Add the `animate-bounce` utility to make an element bounce up and down — useful for things like "scroll down" indicators. + + +
    +
    + + + +
    +
    +     + +```html + + + +``` + +### Prefers-reduced-motion + +For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants: + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +Animations by their very nature tend to be highly project-specific. **The animations we include by default are best thought of as helpful examples**, and you're encouraged to customize your animations to better suit your needs. + +By default, Tailwind provides utilities for four different example animations, as well as the `animate-none` utility. You can customize these values by editing `theme.animation` or `theme.extend.animation` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ animation: { ++ 'spin-slow': 'spin 3s linear infinite', ++ } + } + } + } +``` + +To add new animation `@keyframes`, use the `keyframes` section of your theme configuration: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ keyframes: { ++ wiggle: { ++ '0%, 100%': { transform: 'rotate(-3deg)' }, ++ '50%': { transform: 'rotate(3deg)' }, ++ } ++ } + } + } + } +``` + +You can then reference these keyframes by name in the `animation` section of your theme configuration: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ animation: { ++ wiggle: 'wiggle 1s ease-in-out infinite', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/appearance.mdx b/src/pages/ZH/docs/appearance.mdx new file mode 100644 index 000000000..e7b63f3ee --- /dev/null +++ b/src/pages/ZH/docs/appearance.mdx @@ -0,0 +1,56 @@ +--- +title: "Appearance" +description: "Utilities for suppressing native form control styling." +--- + +import utilities from 'utilities?plugin=appearance' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Removing default element appearance + +Use `appearance-none` to reset any browser specific styling on an element. This utility is often used when creating [custom form components](/docs/examples/forms). + + +
    +
    + +
    + Default browser styles applied +
    +
    +
    + +
    + Default styles removed +
    +
    +
    +     + +```html + + + +``` diff --git a/src/pages/ZH/docs/aspect-ratio.mdx b/src/pages/ZH/docs/aspect-ratio.mdx new file mode 100644 index 000000000..2e2e12d62 --- /dev/null +++ b/src/pages/ZH/docs/aspect-ratio.mdx @@ -0,0 +1,87 @@ +--- +title: "Aspect Ratio" +description: "Utilities for controlling the aspect ratio of an element." +--- + +import utilities from 'utilities?plugin=aspectRatio' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the aspect ratio + +Use the `aspect-{ratio}` utilities to set the desired aspect ratio of an element. + + + + + +```html + +``` + +Tailwind doesn't include a large set of aspect ratio values out of the box since it's easier to just use arbitrary values. See the [arbitrary values](#arbitrary-values) section for more information. + +### Browser support + +The `aspect-{ratio}` utilities use the native `aspect-ratio` CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind's [aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) plugin is a good alternative. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides a minimal set of `aspect-ratio` utilities. You can customize these values by editing `theme.aspectRatio` or `theme.extend.aspectRatio` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { + aspectRatio: { ++ '4/3': '4 / 3', + }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/backdrop-blur.mdx b/src/pages/ZH/docs/backdrop-blur.mdx new file mode 100644 index 000000000..d4651f9f1 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-blur.mdx @@ -0,0 +1,111 @@ +--- +title: "Backdrop Blur" +description: "Utilities for applying backdrop blur filters to an element." +--- + +import utilities from 'utilities?plugin=backdropBlur' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + filterRules: ([utility]) => utility !== '.backdrop-blur-0', + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-blur'], + } + }, +} + +## Basic usage + +### Blurring behind an element + +Use the `backdrop-blur-{amount?}` utilities to control an element’s backdrop blur. + + +
    +
    +
    +

    backdrop-blur-sm

    +
    +
    + +
    +
    +
    +
    +

    backdrop-blur-md

    +
    +
    + +
    +
    +
    +
    +

    backdrop-blur-xl

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-blur` utilities. You can customize these values by editing `theme.backdropBlur` or `theme.extend.backdropBlur` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropBlur: { ++ xs: '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-brightness.mdx b/src/pages/ZH/docs/backdrop-brightness.mdx new file mode 100644 index 000000000..084a6d281 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-brightness.mdx @@ -0,0 +1,111 @@ +--- +title: "Backdrop Brightness" +description: "Utilities for applying backdrop brightness filters to an element." +--- + +import utilities from 'utilities?plugin=backdropBrightness' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-brightness'], + } + }, +} + +## Basic usage + +### Controlling backdrop brightness + +Use the `backdrop-brightness-{amount?}` utilities to control an element's backdrop brightness. + + +
    +
    +
    +

    backdrop-brightness-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-brightness-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-brightness-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-brightness` utilities. You can customize these values by editing `theme.backdropBrightness` or `theme.extend.backdropBrightness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropBrightness: { ++ 25: '.25', ++ 175: '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-contrast.mdx b/src/pages/ZH/docs/backdrop-contrast.mdx new file mode 100644 index 000000000..9f63e5e47 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-contrast.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Contrast" +description: "Utilities for applying backdrop contrast filters to an element." +--- + +import utilities from 'utilities?plugin=backdropContrast' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-contrast'], + } + }, +} + +## Basic usage + +### Controlling backdrop contrast + +Use the `backdrop-contrast-{amount?}` utilities to control an element's backdrop contrast. + + +
    +
    +
    +

    backdrop-contrast-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-contrast-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-contrast-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-contrast` utilities. You can customize these values by editing `theme.backdropContrast` or `theme.extend.backdropContrast` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropContrast: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-grayscale.mdx b/src/pages/ZH/docs/backdrop-grayscale.mdx new file mode 100644 index 000000000..92499a751 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-grayscale.mdx @@ -0,0 +1,99 @@ +--- +title: "Backdrop Grayscale" +description: "Utilities for applying backdrop grayscale filters to an element." +--- + +import utilities from 'utilities?plugin=backdropGrayscale' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-grayscale'], + } + }, +} + +## Basic usage + +### Making an element grayscale + +Use the `backdrop-grayscale` and `backdrop-grayscale-0` utilities to control whether an element's backdrop should be rendered as grayscale or in full color. + + +
    +
    +
    +

    backdrop-grayscale-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-grayscale

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-grayscale` utilities. You can customize these values by editing `theme.backdropGrayscale` or `theme.extend.backdropGrayscale` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropGrayscale: { ++ 50: '.5', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-hue-rotate.mdx b/src/pages/ZH/docs/backdrop-hue-rotate.mdx new file mode 100644 index 000000000..199892d3b --- /dev/null +++ b/src/pages/ZH/docs/backdrop-hue-rotate.mdx @@ -0,0 +1,121 @@ +--- +title: "Backdrop Hue Rotate" +description: "Utilities for applying backdrop hue-rotate filters to an element." +--- + +import utilities from 'utilities?plugin=backdropHueRotate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-hue-rotate'], + } + }, +} + +## Basic usage + +### Rotating the backdrop's hue + +Use the `backdrop-hue-rotate-{amount}` utilities to rotate the hue of an element's backdrop. + + +
    +
    +
    +

    backdrop-hue-rotate-90

    +
    +
    + +
    +
    +
    +
    +

    backdrop-hue-rotate-180

    +
    +
    + +
    +
    +
    +
    +

    -backdrop-hue-rotate-60

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Using negative values + +To use a negative backdrop hue rotate value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-hue-rotate` utilities. You can customize these values by editing `theme.backdropHueRotate` or `theme.extend.backdropHueRotate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropHueRotate: { ++ '-270': '-270deg', ++ 270: '270deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-invert.mdx b/src/pages/ZH/docs/backdrop-invert.mdx new file mode 100644 index 000000000..9b16e5a25 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-invert.mdx @@ -0,0 +1,100 @@ +--- +title: "Backdrop Invert" +description: "Utilities for applying backdrop invert filters to an element." +--- + +import utilities from 'utilities?plugin=backdropInvert' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-invert'], + } + }, +} + +## Basic usage + +### Inverting an element's backdrop + +Use the `backdrop-invert` and `backdrop-invert-0` utilities to control whether an element should be rendered with inverted backdrop colors or normally. + + +
    +
    +
    +

    backdrop-invert-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-invert

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-invert` utilities. You can customize these values by editing `theme.backdropInvert` or `theme.extend.backdropInvert` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropInvert: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-opacity.mdx b/src/pages/ZH/docs/backdrop-opacity.mdx new file mode 100644 index 000000000..422a73229 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-opacity.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Opacity" +description: "Utilities for applying backdrop opacity filters to an element." +--- + +import utilities from 'utilities?plugin=backdropOpacity' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-opacity'], + } + }, +} + +## Basic usage + +### Controlling opacity of backdrop filters + +Use the `backdrop-opacity-{amount}` utilities to control the opacity of other backdrop filters applied to an element. + + +
    +
    +
    +

    backdrop-opacity-10

    +
    +
    + +
    +
    +
    +
    +

    backdrop-opacity-60

    +
    +
    + +
    +
    +
    +
    +

    backdrop-opacity-95

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-opacity` utilities. You can customize these values by editing `theme.backdropOpacity` or `theme.extend.backdropOpacity` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropOpacity: { ++ 15: '.15', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-saturate.mdx b/src/pages/ZH/docs/backdrop-saturate.mdx new file mode 100644 index 000000000..fb3cd06dd --- /dev/null +++ b/src/pages/ZH/docs/backdrop-saturate.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Saturate" +description: "Utilities for applying backdrop saturation filters to an element." +--- + +import utilities from 'utilities?plugin=backdropSaturate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-saturate'], + } + }, +} + +## Basic usage + +### Changing backdrop saturation + +Use the `saturate-{amount}` utilities to control an element's backdrop saturation. + + +
    +
    +
    +

    backdrop-saturate-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-saturate-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-saturate-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-saturate` utilities. You can customize these values by editing `theme.backdropSaturate` or `theme.extend.backdropSaturate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropSaturate: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-sepia.mdx b/src/pages/ZH/docs/backdrop-sepia.mdx new file mode 100644 index 000000000..f6ed92b71 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-sepia.mdx @@ -0,0 +1,100 @@ +--- +title: "Backdrop Sepia" +description: "Utilities for applying backdrop sepia filters to an element." +--- + +import utilities from 'utilities?plugin=backdropSepia' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-sepia'], + } + }, +} + +## Basic usage + +### Adding backdrop sepia filters + +Use the `backdrop-sepia` and `backdrop-sepia-0` utilities to control whether an element's backdrop should be rendered as sepia or in full color. + + +
    +
    +
    +

    backdrop-sepia-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-sepia

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-sepia` utilities. You can customize these values by editing `theme.backdropSepia` or `theme.extend.backdropSepia` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropSepia: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-attachment.mdx b/src/pages/ZH/docs/background-attachment.mdx new file mode 100644 index 000000000..e90b5f914 --- /dev/null +++ b/src/pages/ZH/docs/background-attachment.mdx @@ -0,0 +1,93 @@ +--- +title: "Background Attachment" +description: "Utilities for controlling how a background image behaves when scrolling." +--- + +import utilities from 'utilities?plugin=backgroundAttachment' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Fixed + +Use `bg-fixed` to fix the background image relative to the viewport. + + +
    +
    +
    +
    +
    My trip to the summit
    +
    November 16, 2021 · 4 min read
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +

    Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +
    +
    +
    +     + +```html +
    +``` + +### Local + +Use `bg-local` to scroll the background image with the container and the viewport. + + +
    +
    +
    +
    +
    +

    "Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day."

    +
    — Newman
    +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Scroll + +Use `bg-scroll` to scroll the background image with the viewport, but not with the container. + + +
    +
    +
    +
    +
    +

    "Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day."

    +
    — Newman
    +
    +
    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-blend-mode.mdx b/src/pages/ZH/docs/background-blend-mode.mdx new file mode 100644 index 000000000..6666a69b2 --- /dev/null +++ b/src/pages/ZH/docs/background-blend-mode.mdx @@ -0,0 +1,34 @@ +--- +title: "Background Blend Mode" +description: "Utilities for controlling how an element's background image should blend with its background color." +--- + +import utilities from 'utilities?plugin=backgroundBlendMode' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background blend mode + +Use the `bg-blend-{mode}` utilities to control how an element's background image(s) should blend with its background color. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-clip.mdx b/src/pages/ZH/docs/background-clip.mdx new file mode 100644 index 000000000..1ebc95614 --- /dev/null +++ b/src/pages/ZH/docs/background-clip.mdx @@ -0,0 +1,71 @@ +--- +title: "Background Clip" +description: "Utilities for controlling the bounding box of an element's background." +--- + +import utilities from 'utilities?plugin=backgroundClip' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background clip + +Use the `bg-clip-{keyword}` utilities to control the bounding box of an element's background. + + +
    +
    +

    bg-clip-border

    +
    +
    +
    +

    bg-clip-padding

    +
    +
    +
    +

    bg-clip-content

    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +### Cropping to text + +Use `bg-clip-text` to crop an element's background to match the shape of the text. Useful for effects where you want a background image to be visible through the text. + + +
    + + Hello world + +
    +     + +```html +
    + + Hello world + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-color.mdx b/src/pages/ZH/docs/background-color.mdx new file mode 100644 index 000000000..a6867d600 --- /dev/null +++ b/src/pages/ZH/docs/background-color.mdx @@ -0,0 +1,131 @@ +--- +title: "Background Color" +description: "Utilities for controlling an element's background color." +--- + +import utilities from 'utilities?plugin=backgroundColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-bg-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-bg-opacity)', '') + }) + return properties + }, + preview: (css) => ( + +
    + + ), +} + +## Basic usage + +### Setting the background color + +Control the background color of an element using the `bg-{color}` utilities. + + +
    + +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's background color using the color opacity modifier. + + +
    +
    +

    bg-sky-500

    + +
    +
    +

    bg-sky-500/75

    + +
    +
    +

    bg-sky-500/50

    + +
    +
    +     + +```html + + + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + +
    +     + +```html + +``` + +     + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-image.mdx b/src/pages/ZH/docs/background-image.mdx new file mode 100644 index 000000000..c69e28d23 --- /dev/null +++ b/src/pages/ZH/docs/background-image.mdx @@ -0,0 +1,77 @@ +--- +title: "Background Image" +description: "Utilities for controlling an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundImage' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Linear gradients + +To give an element a linear gradient background, use one of the `bg-gradient-{direction}` utilities, in combination with the [gradient color stop](/docs/gradient-color-stops) utilities. + + +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes background image utilities for creating linear gradient backgrounds in eight directions. + +You can add your own background images by editing the `theme.backgroundImage` section of your `tailwind.config.js` file: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backgroundImage: { ++ 'hero-pattern': "url('/img/hero-pattern.svg')", ++ 'footer-texture': "url('/img/footer-texture.png')", ++ } + } + } + } +``` + +These don't just have to be gradients — they can be any background images you need. + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-origin.mdx b/src/pages/ZH/docs/background-origin.mdx new file mode 100644 index 000000000..33b9bccca --- /dev/null +++ b/src/pages/ZH/docs/background-origin.mdx @@ -0,0 +1,53 @@ +--- +title: "Background Origin" +description: "Utilities for controlling how an element's background is positioned relative to borders, padding, and content." +--- + +import utilities from 'utilities?plugin=backgroundOrigin' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background origin + +Use `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` to control where an element's background is rendered. + + +
    +
    +
    +

    bg-origin-border

    +
    +
    +
    +

    bg-origin-padding

    +
    +
    +
    +

    bg-origin-content

    +
    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-position.mdx b/src/pages/ZH/docs/background-position.mdx new file mode 100644 index 000000000..2cc03ca0e --- /dev/null +++ b/src/pages/ZH/docs/background-position.mdx @@ -0,0 +1,158 @@ +--- +title: "Background Position" +description: "Utilities for controlling the position of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundPosition' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background position + +Use the `bg-{side}` utilities to control the position of an element's background image. + + +
    +
    +
    +

    bg-left-top

    +
    +
    + +
    +
    +
    +

    bg-top

    +
    +
    + +
    +
    +
    +

    bg-right-top

    +
    +
    + +
    +
    +
    +

    bg-left

    +
    +
    + +
    +
    +
    +

    bg-center

    +
    +
    + +
    +
    +
    +

    bg-right

    +
    +
    + +
    +
    +
    +

    bg-left-bottom

    +
    +
    + +
    +
    +
    +

    bg-bottom

    +
    +
    + +
    +
    +
    +

    bg-right-bottom

    +
    +
    + +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html +
    +``` + +     + + +### Breakpoints and media queries + + + +```html +
    +``` + +     + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `theme.backgroundPosition` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + backgroundPosition: { + bottom: 'bottom', ++ 'bottom-4': 'center bottom 1rem', + center: 'center', + left: 'left', +- 'left-bottom': 'left bottom', +- 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', ++ 'top-4': 'center top 1rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-repeat.mdx b/src/pages/ZH/docs/background-repeat.mdx new file mode 100644 index 000000000..ef8f747ea --- /dev/null +++ b/src/pages/ZH/docs/background-repeat.mdx @@ -0,0 +1,76 @@ +--- +title: "Background Repeat" +description: "Utilities for controlling the repetition of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundRepeat' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Repeat + +Use `bg-repeat` to repeat the background image both vertically and horizontally. + + +
    +
    +     + +```html +
    +``` + +### No Repeat + +Use `bg-no-repeat` when you don't want to repeat the background image. + + +
    +
    +     + +```html +
    +``` + +### Repeat Horizontally + +Use `bg-repeat-x` to repeat the background image only horizontally. + + +
    +
    +     + +```html +
    +``` + +### Repeat Vertically + +Use `bg-repeat-y` to repeat the background image only vertically. + + +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-size.mdx b/src/pages/ZH/docs/background-size.mdx new file mode 100644 index 000000000..3f86b3e0a --- /dev/null +++ b/src/pages/ZH/docs/background-size.mdx @@ -0,0 +1,102 @@ +--- +title: "Background Size" +description: "Utilities for controlling the background size of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundSize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `bg-auto` to display the background image at its default size. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Cover + +Use `bg-cover` to scale the background image until it fills the background layer. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Contain + +Use `bg-contain` to scale the background image to the outer edges without cropping or stretching. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `theme.backgroundSize` section of your config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + backgroundSize: { + 'auto': 'auto', + 'cover': 'cover', + 'contain': 'contain', ++ '50%': '50%', ++ '16': '4rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/blur.mdx b/src/pages/ZH/docs/blur.mdx new file mode 100644 index 000000000..eda1d636f --- /dev/null +++ b/src/pages/ZH/docs/blur.mdx @@ -0,0 +1,118 @@ +--- +title: "Blur" +description: "Utilities for applying blur filters to an element." +--- + +import utilities from 'utilities?plugin=blur' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + filterRules: ([utility]) => utility !== '.blur-0', + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-blur'], + } + }, +} + +## Basic usage + +### Blurring elements + +Use the `blur-{amount?}` utilities to blur an element. + + +
    +
    +
    +

    blur-none

    +
    + +
    +
    +
    +
    +

    blur-sm

    +
    + +
    +
    +
    +
    +

    blur-lg

    +
    + +
    +
    +
    +
    +

    blur-2xl

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `blur` utilities. You can customize these values by editing `theme.blur` or `theme.extend.blur` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ blur: { ++ xs: '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-collapse.mdx b/src/pages/ZH/docs/border-collapse.mdx new file mode 100644 index 000000000..a64adfc0c --- /dev/null +++ b/src/pages/ZH/docs/border-collapse.mdx @@ -0,0 +1,136 @@ +--- +title: "Border Collapse" +description: "Utilities for controlling whether table borders should collapse or be separated." +--- + +import utilities from 'utilities?plugin=borderCollapse' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Collapse + +Use `border-collapse` to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level `` tag. + + +
    +
    + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +
    + + +```html + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +``` + +### Separate + +Use `border-separate` to force each cell to display its own separate borders. + + +
    + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/border-color.mdx b/src/pages/ZH/docs/border-color.mdx new file mode 100644 index 000000000..b99688e9f --- /dev/null +++ b/src/pages/ZH/docs/border-color.mdx @@ -0,0 +1,185 @@ +--- +title: "Border Color" +description: "Utilities for controlling the color of an element's borders." +--- + +import utilities from 'utilities?plugin=borderColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-border-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-border-opacity)', '') + }) + return properties + }, + preview: (css, { utility, className }) => ( + +
    + + ), +} + +## Basic usage + +### Setting the border color + +Control the border color of an element using the `border-{color}` utilities. + + +
    + + This field is required. +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's border color using the color opacity modifier. + + +
    +
    +

    border-indigo-500/100

    +
    +
    +
    +

    border-indigo-500/75

    +
    +
    +
    +

    border-indigo-500/50

    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    +``` + +### Individual sides + +Use the `border-{side}-{color}` utilities to set the border color for one side of an element. + + +
    +
    +

    border-t-indigo-500

    +
    +
    +
    +

    border-r-indigo-500

    +
    +
    +
    +

    border-b-indigo-500

    +
    +
    +
    +

    border-l-indigo-500

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Horizontal and vertical sides + +Use the `border-{x|y}-{color}` utilities to set the border color on two sides of an element at the same time. + + +
    +
    +

    border-x-indigo-500

    +
    +
    +
    +

    border-y-indigo-500

    +
    +
    +
    +     + +```html +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + +
    +     + +```html + +``` + +     + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-radius.mdx b/src/pages/ZH/docs/border-radius.mdx new file mode 100644 index 000000000..335e5e2c7 --- /dev/null +++ b/src/pages/ZH/docs/border-radius.mdx @@ -0,0 +1,188 @@ +--- +title: "Border Radius" +description: "Utilities for controlling the border radius of an element." +--- + +import utilities from 'utilities?plugin=borderRadius' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Rounded corners + +Use utilities like `.rounded-sm`, `.rounded`, or `.rounded-lg` to apply different border radius sizes to an element. + + +
    +
    +

    rounded

    +
    +
    +
    +

    rounded-md

    +
    +
    +
    +

    rounded-lg

    +
    +
    +
    +

    rounded-full

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Pill buttons + +Use the `rounded-full` utility to create pill buttons. + + +
    +
    +

    rounded-full

    + +
    +
    +     + +```html + +``` + +### No rounding + +Use `rounded-none` to remove an existing border radius from an element. + +This is most commonly used to remove a border radius that was applied at a smaller breakpoint. + + +
    +
    +

    rounded-none

    + +
    +
    +     + +```html + +``` + +### Rounding sides separately + +Use `rounded-{t|r|b|l}{-size?}` to only round one side of an element. + + +
    +
    +

    rounded-t-lg

    +
    +
    +
    +

    rounded-r-lg

    +
    +
    +
    +

    rounded-b-lg

    +
    +
    +
    +

    rounded-l-lg

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +## Rounding corners separately + +Use `rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element. + + +
    +
    +

    rounded-tl-lg

    +
    +
    +
    +

    rounded-tr-lg

    +
    +
    +
    +

    rounded-br-lg

    +
    +
    +
    +

    rounded-bl-lg

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderRadius: { + 'none': '0', +- 'sm': '0.125rem', +- DEFAULT: '0.25rem', ++ DEFAULT: '4px', +- 'md': '0.375rem', +- 'lg': '0.5rem', +- 'full': '9999px', ++ 'large': '12px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-style.mdx b/src/pages/ZH/docs/border-style.mdx new file mode 100644 index 000000000..837604fba --- /dev/null +++ b/src/pages/ZH/docs/border-style.mdx @@ -0,0 +1,72 @@ +--- +title: "Border Style" +description: "Utilities for controlling the style of an element's borders." +--- + +import utilities from 'utilities?plugin=borderStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the border style + +Use `border-{style}` to control an element's border style. + + +
    +
    +

    border-solid

    + +
    +
    +

    border-dashed

    + +
    +
    +

    border-dotted

    + +
    +
    +

    border-double

    + +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### No style + +Use `border-none` to remove an existing border style from an element. + +This is most commonly used to remove a border style that was applied at a smaller breakpoint. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/border-width.mdx b/src/pages/ZH/docs/border-width.mdx new file mode 100644 index 000000000..e10136fac --- /dev/null +++ b/src/pages/ZH/docs/border-width.mdx @@ -0,0 +1,163 @@ +--- +title: "Border Width" +description: "Utilities for controlling the width of an element's borders." +--- + +import utilities from 'utilities?plugin=borderWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### All sides + +Use the `border`, `.border-0`, `.border-2`, `.border-4`, or `.border-8` utilities to set the border width for all sides of an element. + + +
    +
    +

    border

    +
    +
    +
    +

    border-2

    +
    +
    +
    +

    border-4

    +
    +
    +
    +

    border-8

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Individual sides + +Use the `border-{side}`, `.border-{side}-0`, `.border-{side}-2`, `.border-{side}-4`, or `.border-{side}-8` utilities to set the border width for one side of an element. + + +
    +
    +

    border-t-4

    +
    +
    +
    +

    border-r-4

    +
    +
    +
    +

    border-b-4

    +
    +
    +
    +

    border-l-4

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Horizontal and vertical sides + +Use the `border-{x|y}-{width}` utilities to set the border width on two sides of an element at the same time. + + +
    +
    +

    border-x-4

    +
    +
    +
    +

    border-y-4

    +
    +
    +
    +     + +```html +
    +
    +``` + +### Between elements + +You can also add borders between child elements using the `divide-{x/y}-{width}` and `divide-{color}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +Learn more in the [Divide Width](/docs/divide-width) and [Divide Color](/docs/divide-color) documentation. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides five `border-width` utilities, and the same number of utilities per side (horizontal, vertical, top, right, bottom, and left). You change, add, or remove these by editing the `theme.borderWidth` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-decoration-break.mdx b/src/pages/ZH/docs/box-decoration-break.mdx new file mode 100644 index 000000000..2bccd5d0f --- /dev/null +++ b/src/pages/ZH/docs/box-decoration-break.mdx @@ -0,0 +1,67 @@ +--- +title: "Box Decoration Break" +description: "Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages." +--- + +import utilities from 'utilities?plugin=boxDecorationBreak' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'box-decoration-clone': {'box-decoration-break': 'clone'}, + 'box-decoration-slice': {'box-decoration-break': 'slice'}, + }, +} + +## Basic usage + +### Setting the box decoration break + +Use the `box-decoration-slice` and `box-decoration-clone` utilities to control whether properties like background, border, border-image, box-shadow, clip-page, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks. + + +
    +
    +

    box-decoration-slice

    +
    + + Hello
    + World +     +
    +
    +
    +

    box-decoration-clone

    +
    + + Hello
    + World +     +
    +
    +
    +     + +```html + + Hello
    + World +     + + Hello
    + World +     +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/box-shadow-color.mdx b/src/pages/ZH/docs/box-shadow-color.mdx new file mode 100644 index 000000000..0aa0abe1d --- /dev/null +++ b/src/pages/ZH/docs/box-shadow-color.mdx @@ -0,0 +1,93 @@ +--- +title: "Box Shadow Color" +description: "Utilities for controlling the color of a box shadow." +--- + +import utilities from 'utilities?plugin=boxShadowColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + filterProperties: (property) => property !== '--tw-shadow', +} + +## Basic usage + +### Setting the box shadow color + +Use the `shadow-{color}` utilities to change the color of an existing box shadow. By default colored shadows have an opacity of 100%, but you can adjust this using the opacity modifier. + + +
    +
    +

    shadow-cyan-500/50

    + +
    +
    +

    shadow-blue-500/50

    + +
    +
    +

    shadow-indigo-500/50

    + +
    +
    +     + +```html + + + +``` + +### Using shadows on colored backgrounds + +When using shadows on a colored background, colored shadows can often look more natural than the default black-based shadows, which tend to appear gray and washed-out. + + +
    +
    +

    Default shadow

    + +
    +
    +

    Colored shadow

    + +
    +
    +     + +```html + + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-shadow.mdx b/src/pages/ZH/docs/box-shadow.mdx new file mode 100644 index 000000000..c508b256c --- /dev/null +++ b/src/pages/ZH/docs/box-shadow.mdx @@ -0,0 +1,128 @@ +--- +title: "Box Shadow" +description: "Utilities for controlling the box shadow of an element." +--- + +import utilities from 'utilities?plugin=boxShadow' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'box-shadow': properties['--tw-shadow'], + } + }, +} + +## Basic usage + +### Adding an outer shadow + +Use the `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, or `shadow-2xl` utilities to apply different sized outer box shadows to an element. + + +
    +
    +
    +

    shadow-md

    +
    +
    +
    +

    shadow-lg

    +
    +
    +
    +

    shadow-xl

    +
    +
    +
    +

    shadow-2xl

    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Adding an inner shadow + +Use the `shadow-inner` utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells. + + +
    +
    +

    shadow-inner

    +
    +
    +
    +     + +```html +
    +``` + +### Removing the shadow + +Use `shadow-none` to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint. + + +
    +
    +

    shadow-none

    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can customize these values by editing `theme.boxShadow` or `theme.extend.boxShadow` in your `tailwind.config.js` file. + +If a `DEFAULT` shadow is provided, it will be used for the non-suffixed `shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `shadow-2` utility. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ boxShadow: { ++ '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-sizing.mdx b/src/pages/ZH/docs/box-sizing.mdx new file mode 100644 index 000000000..059bf1a4c --- /dev/null +++ b/src/pages/ZH/docs/box-sizing.mdx @@ -0,0 +1,150 @@ +--- +title: "Box Sizing" +description: "Utilities for controlling how the browser should calculate an element's total size." +--- + +import utilities from 'utilities?plugin=boxSizing' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Including borders and padding + +Use `box-border` to set an element's `box-sizing` to `border-box`, telling the browser to include the element's borders and padding when you give it a height or width. + +This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px. + +Tailwind makes this the default for all elements in our [preflight base styles](/docs/preflight). + + +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +### Excluding borders and padding + +Use `box-content` to set an element's `box-sizing` to `content-box`, telling the browser to add borders and padding on top of the element's specified width or height. + +This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px. + + +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-after.mdx b/src/pages/ZH/docs/break-after.mdx new file mode 100644 index 000000000..0d6a00a82 --- /dev/null +++ b/src/pages/ZH/docs/break-after.mdx @@ -0,0 +1,37 @@ +--- +title: "Break After" +description: "Utilities for controlling how a column or page should break after an element." +--- + +import utilities from 'utilities?plugin=breakAfter' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-after behavior + +Use the `break-after-{value}` utilities to control how a column or page break should behave after an element. For example, use the `break-after-column` utility to force a column break after an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-before.mdx b/src/pages/ZH/docs/break-before.mdx new file mode 100644 index 000000000..34ff6f10a --- /dev/null +++ b/src/pages/ZH/docs/break-before.mdx @@ -0,0 +1,37 @@ +--- +title: "Break Before" +description: "Utilities for controlling how a column or page should break before an element." +--- + +import utilities from 'utilities?plugin=breakBefore' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-before behavior + +Use the `break-before-{value}` utilities to control how a column or page break should behave before an element. For example, use the `break-before-column` utility to force a column break before an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-inside.mdx b/src/pages/ZH/docs/break-inside.mdx new file mode 100644 index 000000000..f359d2b8b --- /dev/null +++ b/src/pages/ZH/docs/break-inside.mdx @@ -0,0 +1,37 @@ +--- +title: "Break Inside" +description: "Utilities for controlling how a column or page should break within an element." +--- + +import utilities from 'utilities?plugin=breakInside' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-inside behavior + +Use the `break-inside-{value}` utilities to control how a column or page break should behave within an element. For example, use the `break-inside-avoid-column` utility to avoid a column break within an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/brightness.mdx b/src/pages/ZH/docs/brightness.mdx new file mode 100644 index 000000000..aee0431d3 --- /dev/null +++ b/src/pages/ZH/docs/brightness.mdx @@ -0,0 +1,118 @@ +--- +title: "Brightness" +description: "Utilities for applying brightness filters to an element." +--- + +import utilities from 'utilities?plugin=brightness' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-brightness'], + } + }, +} + +## Basic usage + +### Changing element brightness + +Use the `brightness-{amount?}` utilities to control an element's brightness. + + +
    +
    +
    +

    brightness-50

    +
    + +
    +
    +
    +
    +

    brightness-100

    +
    + +
    +
    +
    +
    +

    brightness-125

    +
    + +
    +
    +
    +
    +

    brightness-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `brightness` utilities. You can customize these values by editing `theme.brightness` or `theme.extend.brightness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ brightness: { ++ 25: '.25', ++ 175: '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/browser-support.mdx b/src/pages/ZH/docs/browser-support.mdx new file mode 100644 index 000000000..2446248bb --- /dev/null +++ b/src/pages/ZH/docs/browser-support.mdx @@ -0,0 +1,48 @@ +--- +title: Browser Support +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11. + +While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren't yet supported by all browsers, for example the `:focus-visible` pseudo-class and `backdrop-filter` utilities. + +Since Tailwind is such a low-level framework, it's easy to avoid these features if you can't use them by simply not using the utility or modifier that's not supported, much like how you just wouldn't use those CSS features in your CSS. + +The [Can I Use](https://caniuse.com/?search=focus-visible) database is a great resource when you're unsure about the support for an unfamiliar CSS feature. + +--- + +## Vendor Prefixes + +Many CSS properties require vendor prefixes to be understood by browsers, for example `background-clip: text` needs the `-webkit` prefix to work in most browsers: + +```css +.bg-clip-text { + background-clip: text; + -webkit-background-clip: text; +} +``` + +If you're using the Tailwind CLI tool, vendor prefixes like this will be added automatically. + +If not, we recommend that you use [Autoprefixer](https://github.com/postcss/autoprefixer), which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support. + +To use it, install it via npm: + +```shell +npm install autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +```js +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +To learn more about specifying which browsers you need to support, check out [Browserslist](https://github.com/browserslist/browserslist) which is the standard way to define target browsers in front-end tooling. diff --git a/src/pages/ZH/docs/caret-color.mdx b/src/pages/ZH/docs/caret-color.mdx new file mode 100644 index 000000000..935c6213f --- /dev/null +++ b/src/pages/ZH/docs/caret-color.mdx @@ -0,0 +1,70 @@ +--- +title: "Caret Color" +description: "Utilities for controlling the color of the text input cursor." +--- + +import utilities from 'utilities?plugin=caretColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the caret color + +Use the `caret-{color}` utilities to change the color of the text input cursor. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/clear.mdx b/src/pages/ZH/docs/clear.mdx new file mode 100644 index 000000000..feedd6f5b --- /dev/null +++ b/src/pages/ZH/docs/clear.mdx @@ -0,0 +1,136 @@ +--- +title: "Clear" +description: "Utilities for controlling the wrapping of content around an element." +--- + +import utilities from 'utilities?plugin=clear' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Clearing left-floated elements + +Use `clear-left` to position an element below any preceding left-floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Clearing right-floated elements + +Use `clear-right` to position an element below any preceding right-floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Clearing all floated elements + +Use `clear-both` to position an element below all preceding floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Disabling applied clears + +Use `clear-none` to reset any clears that are applied to an element. This is the default value for the clear property. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/columns.mdx b/src/pages/ZH/docs/columns.mdx new file mode 100644 index 000000000..20f6ed74a --- /dev/null +++ b/src/pages/ZH/docs/columns.mdx @@ -0,0 +1,210 @@ +--- +title: "Columns" +description: "Utilities for controlling the number of columns within an element." +--- + +import utilities from 'utilities?plugin=columns' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Adding based on column count + +Use the `columns-{count}` utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number. + + +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + + + + + + +
    +
    +     + +```html +
    + + + +
    +``` + +### Adding based on column width + +Use the `columns-{width}` utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value. + +This "t-shirt" scale is the same as the [max-width](/docs/max-width) scale, with the addition of `2xs` and `3xs`, since smaller columns may be desirable. + + +
    +
    +
    + +
    +
    +
    + +
    +
    + + +
    +
    +     + +```html +
    + + + +
    +``` + +### Setting the column gap + +To specify the width between columns, you can use the [gap-x](/docs/gap) utilities: + + +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + + + + + + +
    +
    +     + +```html +
    + + + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides a column count scale from `1-12` as well as a column t-shirt scale from `3xs-7xl`. You can customize these values by editing `theme.columns` or `theme.extend.columns` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ columns: { ++ '4xs': '14rem', ++ } + }, + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/configuration.mdx b/src/pages/ZH/docs/configuration.mdx new file mode 100644 index 000000000..1ef262656 --- /dev/null +++ b/src/pages/ZH/docs/configuration.mdx @@ -0,0 +1,440 @@ +--- +title: Configuration +description: A guide to configuring and customizing your Tailwind installation. +--- + +import { CorePluginReference } from '@/components/CorePluginReference' + +Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind. + +By default, Tailwind will look for an optional `tailwind.config.js` file at the root of your project where you can define any customizations. + +```js tailwind.config.js +module.exports = { + content: ['./src/**/*.{html,js}'], + theme: { + 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: { + '8xl': '96rem', + '9xl': '128rem', + }, + borderRadius: { + '4xl': '2rem', + } + } + }, +} +``` + +Every section of the config file is optional, so you only have to specify what you'd like to change. Any missing sections will fall back to Tailwind's [default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js). + +--- + +## Creating your configuration file + +Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package: + +```shell +npx tailwindcss init +``` + +This will create a minimal `tailwind.config.js` file at the root of your project: + +```js tailwind.config.js +module.exports = { + content: [], + theme: { + extend: {}, + }, + plugins: [], +} +``` + +### Using a different file name + +To use a name other than `tailwind.config.js`, pass it as an argument on the command-line: + +```shell +npx tailwindcss init tailwindcss-config.js +``` + +When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool: + +```shell +npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css +``` + +If you're using Tailwind as a PostCSS plugin, you will need to specify your custom configuration path in your PostCSS configuration: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: { config: './tailwindcss-config.js' }, + }, +} +``` + +### Generating a PostCSS configuration file + +Use the `-p` flag if you'd like to also generate a basic `postcss.config.js` file alongside your `tailwind.config.js` file: + +```shell +npx tailwindcss init -p +``` + +This will generate a `postcss.config.js` file in your project that looks like this: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + +### Scaffolding the entire default configuration + +For most users we encourage you to keep your config file as minimal as possible, and only specify the things you want to customize. + +If you'd rather scaffold a complete configuration file that includes all of Tailwind's default configuration, use the `--full` option: + +```shell +npx tailwindcss init --full +``` + +You'll get a file that matches the [default configuration file](https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js) Tailwind uses internally. + +--- + +## Configuration options + +### Content + +The `content` section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names. + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + // ... +} +``` + +Learn more about configuring your content sources in the [Content Configuration](/docs/content-configuration) documentation. + +### Theme + +The `theme` section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site. + +```js tailwind.config.js +module.exports = { + // ... + theme: { + 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: { + '8xl': '96rem', + '9xl': '128rem', + }, + borderRadius: { + '4xl': '2rem', + } + } + } +} +``` + +Learn more about the default theme and how to customize it in the [theme configuration guide](/docs/theme). + +### Plugins + +The `plugins` section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants. + +```js tailwind.config.js +module.exports = { + // ... + plugins: [ + require('@tailwindcss/forms'), + require('@tailwindcss/aspect-ratio'), + require('@tailwindcss/typography'), + require('tailwindcss-children'), + ], +} +``` + +Learn more about writing your own plugins in the [plugin authoring guide](/docs/plugins). + +### Presets + +The `presets` section allows you to specify your own custom base configuration instead of using Tailwind's default base configuration. + +```js tailwind.config.js +module.exports = { + // ... + presets: [ + require('@acmecorp/base-tailwind-config') + ], + + // Project-specific customizations + theme: { + //... + }, +} +``` + +Learn more about presets in the [presets documentation](/docs/presets). + +### Prefix + +The `prefix` option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts. + +For example, you could add a `tw-` prefix by setting the `prefix` option like so: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', +} +``` + +Now every class will be generated with the configured prefix: + +```css +.tw-text-left { + text-align: left; +} +.tw-text-center { + text-align: center; +} +.tw-text-right { + text-align: right; +} +/* etc. */ +``` + +It's important to understand that this prefix is added _after_ any variant modifiers. That means that classes with responsive or state modifiers like `sm:` or `hover:` will still have the responsive or state modifier *first*, with your custom prefix appearing after the colon: + +```html +
    + +
    +``` + +Prefixes are only added to classes generated by Tailwind; **no prefix will be added to your own custom classes.** + +That means if you add your own custom utility like this: + +```css +@layer utilities { + .bg-brand-gradient { /* ... */ } +} +``` + +...the generated variants will not have your configured prefix: + +```css +.bg-brand-gradient { /* ... */ } +.hover\:bg-brand-gradient:hover { /* ... */ } +``` + +If you'd like to prefix your own utilities as well, just add the prefix to the class definition: + +```css +@layer utilities { + .tw-bg-brand-gradient { /* ... */ } +} +``` + +### Important + +The `important` option lets you control whether or not Tailwind's utilities should be marked with `!important`. This can be really useful when using Tailwind with existing CSS that has high specificity selectors. + +To generate utilities as `!important`, set the `important` key in your configuration options to `true`: + +```js tailwind.config.js +module.exports = { + important: true, +} +``` + +Now all of Tailwind's utility classes will be generated as `!important`: + +```css +.leading-none { + line-height: 1 !important; +} +.leading-tight { + line-height: 1.25 !important; +} +.leading-snug { + line-height: 1.375 !important; +} +/* etc. */ +``` + +Note that any of your own custom utilities **will not** automatically be marked as `!important` by enabling this option. + +If you'd like to make your own utilities `!important`, just add `!important` to the end of each declaration yourself: + +```css +@layer utilities { + .bg-brand-gradient { + background-image: linear-gradient(#3490dc, #6574cd) !important; + } +} +``` + +#### Selector strategy + +Setting `important` to `true` can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements. In those cases, Tailwind's `!important` utilities defeat the inline styles, which can break your intended design. + +To get around this, you can set `important` to an ID selector like `#app` instead: + +```js tailwind.config.js +module.exports = { + // ... + important: '#app', +} +``` + +This configuration will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them `!important`. + +After you specify the `important` selector, you'll need to ensure that the root element of your site matches it. Using the example above, we would need to set our root element's `id` attribute to `app` in order for styles to work properly. + +After your configuration is all set up and your root element matches the selector in your Tailwind config, all of Tailwind's utilities will have a high enough specificity to defeat other classes used in your project, **without** interfering with inline styles: + +```html + + + + +
    +
    + +
    +
    +
    + + +
    + + +``` + +When using the selector strategy, be sure that the template file that includes your root selector is included in your [content configuration](/docs/optimizing-for-production#basic-usage), otherwise all of your CSS will be removed when building for production. + + +### Separator + +The `separator` option lets you customize which character should be used to separate modifiers (screen sizes, `hover`, `focus`, etc.) from utility names (`text-center`, `items-end`, etc.). + +We use a colon by default (`:`), but it can be useful to change this if you're using a templating language like [Pug](https://pugjs.org) that doesn't support special characters in class names. + +```js tailwind.config.js +module.exports = { + separator: '_', +} +``` + +### Core Plugins + +The `corePlugins` section lets you completely disable classes that Tailwind would normally generate by default if you don't need them for your project. + +To disable specific core plugins, provide an object for `corePlugins` that sets those plugins to `false`: + +```js tailwind.config.js +module.exports = { + corePlugins: { + float: false, + objectFit: false, + objectPosition: false, + } +} +``` + +If you'd like to safelist which core plugins should be enabled, provide an array that includes a list of the core plugins you'd like to use: + +```js tailwind.config.js +module.exports = { + corePlugins: [ + 'margin', + 'padding', + 'backgroundColor', + // ... + ] +} +``` + +If you'd like to disable all of Tailwind's core plugins and simply use Tailwind as a tool for processing your own custom plugins, provide an empty array: + +```js tailwind.config.js +module.exports = { + corePlugins: [] +} +``` + + +Here's a list of every core plugin for reference: + + + +--- + +## Referencing in JavaScript + +It can often be useful to reference your configuration values in your own client-side JavaScript — for example to access some of your theme values when dynamically applying inline styles in a React or Vue component. + +To make this easy, Tailwind provides a `resolveConfig` helper you can use to generate a fully merged version of your configuration object: + +```js +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from './tailwind.config.js' + +const fullConfig = resolveConfig(tailwindConfig) + +fullConfig.theme.width[4] +// => '1rem' + +fullConfig.theme.screens.md +// => '768px' + +fullConfig.theme.boxShadow['2xl'] +// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)' +``` + +Note that this will transitively pull in a lot of our build-time dependencies, resulting in bigger bundle client-side size. To avoid this, we recommend using a tool like [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval) to generate a static version of your configuration at build-time. diff --git a/src/pages/ZH/docs/container.mdx b/src/pages/ZH/docs/container.mdx new file mode 100644 index 000000000..1ddb9af7e --- /dev/null +++ b/src/pages/ZH/docs/container.mdx @@ -0,0 +1,146 @@ +--- +title: "Container" +description: "A component for fixing an element's width to the current breakpoint." +--- + +import defaultConfig from 'defaultConfig' +export const screens = defaultConfig.theme.screens + +export const classes = { + custom: ( + + + + + + + + + + + + + + + + + + + + {Object.keys(screens).map((screen) => ( + + + + + ))} + +
    +
    Class
    +     		+
    Breakpoint
    +     		+
    Properties
    +
    + container + + None + + width: 100%; +
    + {screen} ({screens[screen]}) + + max-width: {screens[screen]}; +
    + ), +} + +## Basic usage + +### Using the container + +The `container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport. + +Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.** + +To center a container, use the `mx-auto` utility: + +```html +
    + +
    +``` + +To add horizontal padding, use the `px-{size}` utilities: + +```html +
    + +
    +``` + +If you'd like to center your containers by default or include default horizontal padding, see the [customization options](#customizing) below. + +--- + +## Applying conditionally + +### Responsive variants + +The `container` class also includes responsive variants like `md:container` by default that allow you to make something behave like a container at only a certain breakpoint and up: + +```html + +
    + +
    +``` + +--- + +## Customizing + +### Centering by default + +To center containers by default, set the `center` option to `true` in the `theme.container` section of your config file: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + center: true, + }, + }, +} +``` + +### Adding horizontal padding + +To add horizontal padding by default, specify the amount of padding you'd like using the `padding` option in the `theme.container` section of your config file: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + padding: '2rem', + }, + }, +} +``` + +If you want to specify a different padding amount for each breakpoint, use an object to provide a `default` value and any breakpoint-specific overrides: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + padding: { + DEFAULT: '1rem', + sm: '2rem', + lg: '4rem', + xl: '5rem', + '2xl': '6rem', + }, + }, + }, +}; +``` diff --git a/src/pages/ZH/docs/content-configuration.mdx b/src/pages/ZH/docs/content-configuration.mdx new file mode 100644 index 000000000..37280fb43 --- /dev/null +++ b/src/pages/ZH/docs/content-configuration.mdx @@ -0,0 +1,510 @@ +--- +title: Content Configuration +shortTitle: Content +description: Configuring the content sources for your project. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { SnippetGroup } from '@/components/SnippetGroup' +import { ThemeReference } from '@/components/ThemeReference' + +The `content` section of your `tailwind.config.js` file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names. + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + // ... +} +``` + +This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project. + +--- + +## Configuring source paths + +Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles. + +In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names. + +Configure the paths to all of your content files in the `content` section of your configuration file: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}' + ], + // ... +} +``` + +Paths are configured as [glob patterns](https://en.wikipedia.org/wiki/Glob_(programming)), making it easy to match all of the content files in your project without a ton of configuration: + +- Use `*` to match anything except slashes and hidden files +- Use `**` to match zero or more directories +- Use comma separate values between `{}` to match against a list of options + +Tailwind uses the [fast-glob](https://github.com/mrmlnc/fast-glob) library under-the-hood — check out their documentation other supported pattern features. + +### Pattern recommendations + +For the best performance and to avoid false positives, be as specific as possible with your content configuration. + +If you use a really broad pattern like this one, Tailwind will even scan `node_modules` for content which is probably not what you want: + +Don't use extremely broad patterns + +```js tailwind.config.js +module.exports = { + content: [ + './**/*.{html,js}', + ], + // ... +} +``` + +If you have any files you need to scan that are at the root of your project (often an `index.html` file), list that file independently so your other patterns can be more specific: + +Be specific with your content patterns + +```js tailwind.config.js +module.exports = { + content: [ + './components/**/*.{html,js}', + './pages/**/*.{html,js}', + './index.html', + ], + // ... +} +``` + +Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often `public/index.html`), so if you are adding Tailwind classes to that file make sure it's included in your configuration as well: + +Don't forget your HTML entry point if applicable + +```js tailwind.config.js + module.exports = { + content: [ +> './public/index.html', + './src/**/*.{html,js}', + ], + // ... + } +``` + +If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well: + +```js tailwind.config.js +module.exports = { + content: [ + // ... + './src/**/*.js', + ], + // ... +} +``` + +```js src/spaghetti.js +// ... +menuButton.addEventListener('click', function () { + let classList = document.getElementById('nav').classList + classList.toggle('hidden') + classList.toggle('block') +}) +// ... +``` + +It's also important that you don't scan any CSS files — configure Tailwind to scan your _templates_ where your class names are being used, never the CSS file that Tailwind is generating. + +Never include CSS files in your content configuration + +```js tailwind.config.js +module.exports = { + content: [ + './src/**/*.css', + ], + // ... +} +``` + +### Class detection in-depth + +The way Tailwind scans your source code for classes is intentionally very simple — we don't actually parse or execute any of your code in the language it's written in, we just use regular expressions to extract every string that could possibly be a class name. + +For example, here's some HTML with every potential class name string individually highlighted: + +```html +<**div** **class**="**md:flex**"> + <**div** **class**="**md:flex-shrink-0**"> + <**img** **class**="**rounded-lg** **md:w-56**" **src**="**/img/shopping.jpg**" **alt**="**Woman** **paying** **for** **a** **purchase**"> + + <**div** **class**="**mt-4** **md:mt-0** **md:ml-6**"> + <**div** **class**="**uppercase** **tracking-wide** **text-sm** **text-indigo-600** **font-bold**"> + **Marketing** + + <**a** **href**="**/get-started**" **class**="**block** **mt-1** **text-lg** **leading-tight** **font-semibold** **text-gray-900** **hover:underline**"> + **Finding** **customers** **for** **your** **new** **business** + + <**p** **class**="**mt-2** **text-gray-600**"> + **Getting** **a** **new** **business** **off** **the** **ground** **is** **a** **lot** **of** **hard** **work.** + **Here** **are** **five** **ideas** **you** **can** **use** **to** **find** **your** **first** **customers.** + + + +``` + +We don't just limit our search to `class="..."` attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu: + +```html spaghetti.js + +``` + +By using this very simple approach, Tailwind works extremely reliably with any programming language, like JSX for example: + +```jsx Button.jsx +const sizes = { + md: 'px-4 py-2 rounded-md text-base', + lg: 'px-5 py-3 rounded-lg text-lg', +} + +const colors = { + indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white', + cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white', +} + +export default function Button({ color, size, children }) { + let colorClasses = colors[color] + let sizeClasses = sizes[size] + + return ( + + ) +} +``` + +The most important implication of how Tailwind extracts class names is that it will only find classes that exist _as complete unbroken strings_ in your source files. + +If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS: + +Don't construct class names dynamically + +```html +
    +``` + +In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes. + +Instead, make sure any class names you're using exist in full: + +Always use complete class names + +```html +
    +``` + +As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. + + +### Working with third-party libraries + +If you're working with any third-party libraries (for example [Select2](https://select2.org/)) and styling that library with your own custom CSS, we recommend writing those styles _without_ using Tailwind's `@layer` feature: + +```css main.css +@tailwind base; +@tailwind components; + +.select2-dropdown { + @apply rounded-b-lg shadow-md; +} +.select2-search { + @apply border border-gray-300 rounded; +} +.select2-results__group { + @apply text-lg font-bold text-gray-900; +} +/* ... */ + +@tailwind utilities; +``` + +This will ensure that Tailwind _always_ includes those styles in your CSS, which is a lot easier than configuring Tailwind to scan the source code of a third-party library. + +If you've created your own reusable set of components that are styled with Tailwind and are importing them in multiple projects, make sure to configure Tailwind to scan those components for class names: + +```js tailwind.config.js + module.exports = { + content: [ + './components/**/*.{html,js}', + './pages/**/*.{html,js}', +> './node_modules/@my-company/tailwind-components/**/*.js', + ], + // ... + } +``` + +This will make sure Tailwind generates all of the CSS needed for those components as well. + +### Configuring raw content + +If for whatever reason you need to configure Tailwind to scan some raw content rather than the contents of a file, use an object with a `raw` key instead of a path: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}' + './components/**/*.{html,js}', + { raw: '
    ', extension: 'html' }, + ], + // ... +} +``` + +There aren't many valid use-cases for this — [safelisting](#safelisting-classes) is usually what you really want instead. + +--- + +## Safelisting classes + +For the smallest file size and best development experience, we highly recommend relying on your `content` configuration to tell Tailwind which classes to generate as much as possible. + +Safelisting is a last-resort, and should only be used in situations where it's impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature. + +If you need to make sure Tailwind generates certain class names that don't exist in your content files, use the `safelist` option: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}' + './components/**/*.{html,js}', + ], + safelist: [ + 'bg-red-500', + 'text-3xl', + 'lg:text-4xl', + ] + // ... +} +``` + +One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site's source files. + +### Using regular expressions + +Tailwind supports pattern-based safelisting for situations where you need to safelist a lot of classes: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + safelist: [ + 'text-2xl', + 'text-3xl', + { + pattern: /bg-(red|green|blue)-(100|200|300)/, + }, + ], + // ... +} +``` + +Patterns can only match against base utility names like `/bg-red-.+/`, and won't match if the pattern includes a variant modifier like `/hover:bg-red-.+/`. + +If you want to force Tailwind to generate variants for any matched classes, include them using the `variants` option: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + safelist: [ + 'text-2xl', + 'text-3xl', + { + pattern: /bg-(red|green|blue)-(100|200|300)/, + variants: ['hover', 'focus'], + }, + ], + // ... +} +``` + +--- + +## Transforming source files + +If you're authoring content in a format that _compiles_ to HTML (like Markdown), it often makes sense to compile that content to HTML _before_ scanning it for class names. + +Use the `content.transform` option to transform any content matching a specific file extension before extracting classes: + +```js tailwind.config.js +const remark = require('remark') + +module.exports = { + content: { + files: ['./src/**/*.{html,md}'], + transform: { + md: (content) => { + return remark().process(content) + } + } + }, + // ... +} +``` + +When using `content.transform`, you'll need to provide your source paths using `content.files` instead of as a top-level array under `content`. + +--- + +## Customizing extraction logic + +Use the `extract` option to override the logic Tailwind uses to detect class names for specific file extensions: + +```js tailwind.config.js +module.exports = { + content: { + files: ['./src/**/*.{html,wtf}'], + extract: { + wtf: (content) => { + return content.match(/[^<>"'`\s]*/) + } + } + }, + // ... +} +``` + +This is an advanced feature and most users won't need it — the default extraction logic in Tailwind works extremely well for almost all projects. + +As with transforming, when using `content.extract`, you'll need to provide your source paths using `content.files` instead of as a top-level array under `content`. + +--- + +## Troubleshooting + +### Classes aren't generated + +If Tailwind isn't generating classes, make sure your `content` configuration is correct and matches all of the right source files. + +A common mistake is missing a file extension, for example if you're using `jsx` instead of `js` for your React components: + +```diff-js tailwind.config.js + module.exports = { + content: [ +- './src/**/*.{html,js}', ++ './src/**/*.{html,js,jsx}' + ], + // ... + } +``` + +Or creating a new folder mid-project that wasn't covered originally and forgetting to add it to your configuration: + +```diff-js tailwind.config.js + module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', ++ './util/**/*.{html,js,js}' + ], + // ... + } +``` + +### Dynamic class names + +As outlined in [Class detection in-depth](#class-detection-in-depth), Tailwind doesn't actually run your source code and won't detect dynamically constructed class names. + +Don't construct class names dynamically + +```html +
    +``` + +Make sure you always use complete class names in your code: + +Always use complete class names + +```html +
    +``` + +### Styles rebuild in an infinite loop + +If your CSS seems to be rebuilding in an infinite loop, there's a good chance it's because your build tool doesn't support the `glob` option when [registering PostCSS dependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#31-rebuild-when-dependencies-change). + +Many build tools (such as webpack) don't support this option, and as a result we can only tell them to watch specific files or _entire directories_. We can't tell webpack to _only_ watch `*.html` files in a directory for example. + +That means that if building your CSS causes _any_ files in those directories to change, a rebuild will be triggered, even if the changed file doesn't match the extension in your glob. + +```js tailwind.config.js +module.exports = { + content: [ + // With some build tools, your CSS will rebuild + // any time *any* file in `src` changes. + './src/**/*.{html,js}', + ], + // ... +} +``` + +So if you are watching `src/**/*.html` for changes, but you are writing your CSS output file to `src/css/styles.css`, you will get an infinite rebuild loop using some tools. + +Ideally we could warn you about this in the console, but many tools support it perfectly fine (including our own CLI tool), and we have no reliable way to detect what build tool you are using. + +To solve this problem, use more specific paths in your `content` config, making sure to only include directories that won't change when your CSS builds: + +```diff-js tailwind.config.js + module.exports = { + content: [ +- './src/**/*.{html,js}', ++ './src/pages/**/*.{html,js}', ++ './src/components/**/*.{html,js}', ++ './src/layouts/**/*.{html,js}', ++ './src/index.html', + ], + // ... + } +``` + +If necessary, adjust your actual project directory structure to make sure you can target your template files without accidentally catching your CSS file or other build artifacts like manifest files. + +If you absolutely can't change your content config or directory structure, your best bet is to compile your CSS separately with a tool that has complete glob support. We recommend using [Tailwind CLI](/docs/installation), which is a fast, simple, purpose-built tool for compiling your CSS with Tailwind. + +### It just isn't working properly + +If you are experiencing weird, hard to describe issues with the output, or things just don't seem like they are working at all, there's a good chance it's due to your build tool not supporting PostCSS dependency messages properly _(or at all)_. One known example of this currently is [Stencil](https://github.com/ionic-team/stencil-postcss/issues/38). + +When you are having these sorts of issues, we recommend using [Tailwind CLI](/docs/installation) to compile your CSS separately instead of trying to integrate Tailwind into your existing tooling. + +You can use packages like `npm-run-all` or `concurrently` to compile your CSS alongside your usual development command by adding some scripts to your project like this: + +```js +// package.json +{ + // ... + "scripts": { + "start": "concurrently \"npm run start:css\" \"react-scripts start\"", + "start:css": "tailwindcss -o src/tailwind.css --watch", + "build": "npm run build:css && react-scripts build", + "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m", + }, +} +``` + +Either way, please be sure to [check for an existing issue](https://github.com/tailwindlabs/tailwindcss/issues) or [open a new one](https://github.com/tailwindlabs/tailwindcss/issues/new/choose) so we can figure out the problem and try to improve compatibility with whatever tool you are using. diff --git a/src/pages/ZH/docs/content.mdx b/src/pages/ZH/docs/content.mdx new file mode 100644 index 000000000..b9f4833a6 --- /dev/null +++ b/src/pages/ZH/docs/content.mdx @@ -0,0 +1,129 @@ +--- +title: "Content" +description: "Utilities for controlling the content of the before and after pseudo-elements." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'content-none': { 'content': '""' } + } +} + +## Basic usage + +### Setting a pseudo-element's content + +Use the `content-{value}` utilities along with the `before` and `after` variant modifiers to set the contents of the `::before` and `::after` pseudo-elements. + +Out of the box, `content-none` is the only available preconfigured content utility. And while you can add additional utilities by [customizing your theme](#customizing-your-theme), it generally makes more sense to just use an arbitrary value. + +Use the square bracket notation to define any arbitrary content value on the fly. + + +
    +
    + Higher resolution means more than just a better-quality image. With a Retina 6K display, Pro Display XDR gives you nearly 40 percent more screen real estate than a 5K display. +
    +
    + + +```html +Higher resolution means more than just a better-quality image. With a Retina +6K display, Pro Display XDR gives you +nearly 40 percent more screen real estate than a 5K display. +``` + +### Referencing an attribute value + +These content utilities even support CSS features like the `attr()` function, which you can use to reference a value stored in an attribute: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +### Using spaces and underscores + +Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +If you need to include an actual underscore, you can do this by escaping it with a backslash: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind only provides the `content-none` utility. You can customize these values by editing `theme.content` or `theme.extend.content` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ content: { ++ 'link': 'url("/icons/link.svg")', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/contrast.mdx b/src/pages/ZH/docs/contrast.mdx new file mode 100644 index 000000000..4c8d6238e --- /dev/null +++ b/src/pages/ZH/docs/contrast.mdx @@ -0,0 +1,117 @@ +--- +title: "Contrast" +description: "Utilities for applying contrast filters to an element." +--- + +import utilities from 'utilities?plugin=contrast' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-contrast'], + } + }, +} + +## Basic usage + +### Changing element contrast + +Use the `contrast-{amount?}` utilities to control an element's contrast. + + +
    +
    +
    +

    contrast-50

    +
    + +
    +
    +
    +
    +

    contrast-100

    +
    + +
    +
    +
    +
    +

    contrast-125

    +
    + +
    +
    +
    +
    +

    contrast-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `contrast` utilities. You can customize these values by editing `theme.contrast` or `theme.extend.contrast` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ contrast: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/cursor.mdx b/src/pages/ZH/docs/cursor.mdx new file mode 100644 index 000000000..c0e491092 --- /dev/null +++ b/src/pages/ZH/docs/cursor.mdx @@ -0,0 +1,88 @@ +--- +title: "Cursor" +description: "Utilities for controlling the cursor style when hovering over an element." +--- + +import utilities from 'utilities?plugin=cursor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + rowStyle: ({ css }) => css, + preview: (css, { className, utility }) => ( + + + + ), +} + +## Basic Usage + +### Setting the cursor style + +Use the `cursor-{style}` to control which cursor is displayed when hovering over an element. + + +
    + + + +
    +     + +```html + + + +``` + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes `cursor` utilities for many built in options. You can customize these values by editing `theme.cursor` or `theme.extend.cursor` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ cursor: { ++ 'fancy': 'url(hand.cur), pointer', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/customizing-colors.mdx b/src/pages/ZH/docs/customizing-colors.mdx new file mode 100644 index 000000000..03aa04bff --- /dev/null +++ b/src/pages/ZH/docs/customizing-colors.mdx @@ -0,0 +1,365 @@ +--- +title: Customizing Colors +shortTitle: Colors +description: Customizing the default color palette for your project. +--- + +import { Heading } from '@/components/Heading' +import { ColorPaletteReference } from '@/components/ColorPaletteReference' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don't have your own specific branding in mind. + +
    + + + +
    + +But when you do need to customize your palette, you can configure your colors under the `colors` key in the `theme` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + // Configure your color palette here + } + } +} +``` + +When it comes to building a custom color palette, you can either [configure your own custom colors](#using-custom-colors) from scratch if you know exactly what you want, or [curate your colors](#using-the-default-colors) from our extensive included color palette if you want a head start. + +--- + +## Using custom colors + +If you'd like to completely replace the default color palette with your own custom colors, add your colors directly under the `theme.colors` section of your configuration file: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + 'white': '#ffffff', + 'purple': '#3f3cbb', + 'midnight': '#121063', + 'metal': '#565584', + 'tahiti': '#3ab7bf', + 'silver': '#evebff', + 'bubble-gum': '#ff77e9', + 'bermuda': '#78dcca', + }, + }, +} +``` + +By default, these colors will be made available everywhere in the framework where you use colors, like the [text color](/docs/text-color) utilities, [border color](/docs/border-color) utilities, [background color](/docs/text-color) utilities, and more. + +```html +
    + +
    +``` + +Don't forget to include values like `transparent` and `currentColor` if you want to use them in your project. + +### Color object syntax + +When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + 'white': '#ffffff', + 'tahiti': { + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, + // ... + }, + }, +} +``` + +The nested keys will be combined with the parent key to form class names like `bg-tahiti-400`. + +### Arbitrary values + +If you need a one-off custom color in your project, consider using Tailwind's arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme: + + +
    + +
    +     + +```html + +``` + +Learn more in the [using arbitrary values](/docs/adding-custom-styles#using-arbitrary-values) documentation. + +### Generating colors + +If you're wondering how to automatically generate the 50–900 shades of your own custom colors, bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating color palettes like this automatically. + +We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them. + +Two useful tools we _can_ recommend are [Palettte](https://palettte.app/) and [ColorBox](https://colorbox.io/) — they won't do the work for you but their interfaces are well-designed for doing this sort of work. + +--- + +## Using the default colors + +If you don't have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing `tailwindcss/colors` in your configuration file and choosing the colors you want to use: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + }, + }, +} +``` + +This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by [IntelliSense](/docs/editor-setup#intelli-sense-for-vs-code). + +### Aliasing color names + +You can also alias the colors in our default palette to make the names simpler and easier to remember: + +```js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, +> gray: colors.slate, +> green: colors.emerald, +> purple: colors.violet, +> yellow: colors.amber, +> pink: colors.fuchsia, + }, + }, + } +``` + +This is especially common for grays, as you usually only use one set in any given project and it's nice to be able to type `bg-gray-300` instead of `bg-neutral-300` for example. + +### Adding additional colors + +If you'd like to add a brand new color to the default palette, add it in the `theme.extend.colors` section of your configuration file: + + + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + brown: { + 50: '#fdf8f6', + 100: '#f2e8e5', + 200: '#eaddd7', + 300: '#e0cec7', + 400: '#d2bab0', + 500: '#bfa094', + 600: '#a18072', + 700: '#977669', + 800: '#846358', + 900: '#43302b', + }, + } + }, + }, +} +``` + +You can also use `theme.extend.colors` to add additional shades to an existing color if it's needed for your design: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + blue: { + 950: '#17275c', + }, + } + }, + }, +} +``` + +### Disabling a default color + +If you'd like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you _do_ want: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + }, + }, +} +``` + +--- + +## Naming your colors + +Tailwind uses literal color names _(like red, green, etc.)_ and a numeric scale _(where 50 is light and 900 is dark)_ by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like `primary` or `danger`. + +That said, you can name your colors in Tailwind whatever you like, and if you're working on a project that needs to support multiple themes for example, it might make sense to use more abstract names: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + primary: '#5c6ac4', + secondary: '#ecc94b', + // ... + } + } +} +``` + +You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + primary: colors.indigo, + secondary: colors.yellow, + neutral: colors.gray, + } + } +} +``` + +Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason. + +### Using CSS variables + +If you're using abstract color names because you want to support multiple themes in your project, there's a good chance you also want to use CSS variables to define your colors. + +The best way to do this is to define your CSS variables as just the color _channels_, without including the actual color function: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +.theme-startup { + --color-primary: 255 115 179; + --color-secondary: 111 114 185; + /* ... */ +} + +.theme-boring { + --color-primary: 2 82 204; + --color-secondary: 255 196 2; + /* ... */ +} + +.theme-elegant { + --color-primary: 192 178 131; + --color-secondary: 220 208 192; + /* ... */ +} +``` + +Then define your colors in your configuration file as _functions_, and apply the `opacityValue` if it's defined: + +```js tailwind.config.js +function withOpacityValue(variable) { + return ({ opacityValue }) => { + if (opacityValue === undefined) { + return `rgb(var(${variable}))` + } + return `rgb(var(${variable}) / ${opacityValue})` + } +} + +module.exports = { + theme: { + colors: { + primary: withOpacityValue('--color-primary'), + secondary: withOpacityValue('--color-secondary'), + // ... + } + } +} +``` + +This makes it possible to use Tailwind's color opacity modifiers to do things like `bg-primary/75` even when you're using CSS variables to define your colors. diff --git a/src/pages/ZH/docs/customizing-spacing.mdx b/src/pages/ZH/docs/customizing-spacing.mdx new file mode 100644 index 000000000..682453f21 --- /dev/null +++ b/src/pages/ZH/docs/customizing-spacing.mdx @@ -0,0 +1,79 @@ +--- +title: Customizing Spacing +shortTitle: Spacing +description: Customizing the default spacing and sizing scale for your project. +--- + +import { SpacingScale } from '@/components/SpacingScale' + +Use the `spacing` key in the `theme` section of your `tailwind.config.js` file to customize Tailwind's [default spacing/sizing scale](#default-spacing-scale). + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + '1': '8px', + '2': '12px', + '3': '16px', + '4': '24px', + '5': '32px', + '6': '48px', + } + } +} +``` + +By default the spacing scale is inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `gap`, `inset`, `space`, and `translate` core plugins. + +--- + +## Extending the default spacing scale + + +As described in the [theme documentation](/docs/theme#extending-the-default-theme), if you'd like to extend the default spacing scale, you can do so using the `theme.extend.spacing` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + spacing: { + '13': '3.25rem', + '15': '3.75rem', + '128': '32rem', + '144': '36rem', + } + } + } +} +``` + +This will generate classes like `p-13`, `m-15`, and `h-128` in addition to all of Tailwind's default spacing/sizing utilities. + +--- + +## Overriding the default spacing scale + +As described in the [theme documentation](/docs/theme#overriding-the-default-theme), if you'd like to override the default spacing scale, you can do so using the `theme.spacing` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + sm: '8px', + md: '12px', + lg: '16px', + xl: '24px', + } + } +} +``` + +This will disable Tailwind's default spacing scale and generate classes like `p-sm`, `m-md`, `w-lg`, and `h-xl` instead. + +--- + +## Default spacing scale + +By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so `16` is twice as much spacing as `8` for example. One spacing unit is equal to `0.25rem`, which translates to `4px` by default in common browsers. + + diff --git a/src/pages/ZH/docs/dark-mode.mdx b/src/pages/ZH/docs/dark-mode.mdx new file mode 100644 index 000000000..d04d776b6 --- /dev/null +++ b/src/pages/ZH/docs/dark-mode.mdx @@ -0,0 +1,126 @@ +--- +title: Dark Mode +description: Using Tailwind CSS to style your site in dark mode. +--- + +import { Heading } from '@/components/Heading' + +## + +Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design. + +To make this as easy as possible, Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled: + + +
    +
    +

    Light mode

    +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +
    +
    +

    Dark mode

    +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +
    +
    +     + +```html +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +``` + +By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support toggling dark mode manually using the ['class' strategy](#toggling-dark-mode-manually). + +--- + +## Toggling dark mode manually + +If you want to support toggling dark mode manually instead of relying on the operating system preference, use the `class` strategy instead of the `media` strategy: + +```js tailwind.config.js +module.exports = { + darkMode: 'class', + // ... +} +``` + +Now instead of `dark:{class}` classes being applied based on `prefers-color-scheme`, they will be applied whenever `dark` class is present earlier in the HTML tree. + +```html + + + + +
    + +
    + + + + + + + +
    + +
    + + +``` + +How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like `localStorage`) and updates the DOM accordingly. + +Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference: + +```js +// On page load or when changing themes, best to add inline in `head` to avoid FOUC +if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.classList.add('dark') +} else { + document.documentElement.classList.remove('dark') +} + +// Whenever the user explicitly chooses light mode +localStorage.theme = 'light' + +// Whenever the user explicitly chooses dark mode +localStorage.theme = 'dark' + +// Whenever the user explicitly chooses to respect the OS preference +localStorage.removeItem('theme') +``` + +Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it's totally up to you. \ No newline at end of file diff --git a/src/pages/ZH/docs/display.mdx b/src/pages/ZH/docs/display.mdx new file mode 100644 index 000000000..77b12ce27 --- /dev/null +++ b/src/pages/ZH/docs/display.mdx @@ -0,0 +1,311 @@ +--- +title: "Display" +description: "Utilities for controlling the display box type of an element." +--- + +import utilities from 'utilities?plugin=display' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Block & Inline + +Use `inline`, `inline-block`, and `block` to control the flow of text and elements. + + +
    + When controlling the flow of text, using the CSS property display: inline + will cause the text inside the element to wrap normally. +

    + While using the property + display: inline-block + will wrap the element to prevent the text inside from extending beyond its parent. +

    + Lastly, using the property + display: block + will put the element on it's own line and fill its parent. +
    +     + +```html +
    + When controlling the flow of text, using the CSS property + display: inline + will cause the text inside the element to wrap normally. + + While using the property display: inline-block + will wrap the element to prevent the text inside from extending beyond its parent. + + Lastly, using the property display: block + will put the element on it's own line and fill its parent. +
    +``` + +### Flow Root + +Use `flow-root` to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). + + +
    +
    +
    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
    +
    +
    +
    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
    +
    +
    +     + +```html +
    +
    +
    Well, let me tell you something, ...
    +
    +
    +
    Sure, go ahead, laugh if you want...
    +
    +
    +``` + +### Flex + +Use `flex` to create a block-level flex container. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    +     + +```html +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +``` + +### Inline Flex + +Use `inline-flex` to create an inline flex container that flows with text. + + +

    + Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here. + + Kramer + keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity here. +

    +     + +```html +

    + Today I spent most of the day researching ways to ... + + + Kramer + + keeps telling me there is no way to make it work, that ... +

    +``` + +### Grid + +Use `grid` to create a grid container. + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    07
    +
    08
    +
    09
    +
    +     + +```html +
    + +
    +``` + +### Inline Grid + +Use `inline-grid` to create an inline grid container. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +
    +     + +```html + + 01 + 02 + 03 + 04 + 05 + 06 + + + 01 + 02 + 03 + 04 + 05 + 06 + +``` + +### Contents + +Use `contents` to create a "phantom" container whose children act like direct children of the parent. + + +
    +
    01
    +
    +
    02
    +
    03
    +
    +
    04
    +
    +     + +```html +
    +
    01
    +
    +
    02
    +
    03
    +
    +
    04
    +
    +``` + +### Table + +Use the `table`, `.table-row`, `.table-cell`, `.table-caption`, `.table-column`, `.table-column-group`, `.table-header-group`, `table-row-group`, and `.table-footer-group` utilities to create elements that behave like their respective table elements. + + +
    +
    +
    +
    +
    Song
    +
    Artist
    +
    Year
    +
    +
    +
    +
    +
    The Sliding Mr. Bones (Next Stop, Pottersville)
    +
    Malcolm Lockyer
    +
    1961
    +
    +
    +
    Witchy Woman
    +
    The Eagles
    +
    1972
    +
    +
    +
    Shining Star
    +
    Earth, Wind, and Fire
    +
    1975
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    Title
    +
    Artist
    +
    Year
    +
    +
    +
    +
    +
    Chocolate Starfish And The Hot Dog Flavored Water
    +
    Limp Bizkit
    +
    2000
    +
    +
    +
    Significant Other
    +
    Limp Bizkit
    +
    1999
    +
    +
    +
    Three Dollar Bill, Y’all $
    +
    Limp Bizkit
    +
    1997
    +
    +
    +
    +``` + +### Hidden + +Use `hidden` to set an element to `display: none` and remove it from the page layout (compare with `.invisible` from the [visibility](/docs/visibility#invisible) documentation). + + +
    + +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/divide-color.mdx b/src/pages/ZH/docs/divide-color.mdx new file mode 100644 index 000000000..e7d0c9c25 --- /dev/null +++ b/src/pages/ZH/docs/divide-color.mdx @@ -0,0 +1,114 @@ +--- +title: "Divide Color" +description: "Utilities for controlling the border color between elements." +--- + +import utilities from 'utilities?plugin=divideColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ selector, properties }) => { + delete properties['--tw-divide-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-divide-opacity)', '') + }) + return properties + }, + preview: (css, { className }) => ( + +
    +
    +
    +
    + + ), +} + +## Basic usage + +### Setting the divide color + +Control the border color between elements using the `divide-{color}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Changing the opacity + +Control the opacity of the divide color using the color opacity modifier. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    + +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/divide-style.mdx b/src/pages/ZH/docs/divide-style.mdx new file mode 100644 index 000000000..f3bb3bf6d --- /dev/null +++ b/src/pages/ZH/docs/divide-style.mdx @@ -0,0 +1,51 @@ +--- +title: "Divide Style" +description: "Utilities for controlling the border style between elements." +--- + +import utilities from 'utilities?plugin=divideStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), +} + +## Basic usage + +### Set the divide style + +Control the border style between elements using the `divide-{style}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/divide-width.mdx b/src/pages/ZH/docs/divide-width.mdx new file mode 100644 index 000000000..1f2e5ffe2 --- /dev/null +++ b/src/pages/ZH/docs/divide-width.mdx @@ -0,0 +1,152 @@ +--- +title: "Divide Width" +description: "Utilities for controlling the border width between elements." +--- + +import utilities from 'utilities?plugin=divideWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ selector, properties }) => { + if (!selector.includes('reverse')) { + delete properties['--tw-divide-y-reverse'] + delete properties['--tw-divide-x-reverse'] + } + Object.keys(properties).forEach(key => { + // TODO: This is iffy. Clean it up. + properties[key] = properties[key].replace(/calc\((\d+px) \* var\(.*\)\)/, "$1") + properties[key] = properties[key].replace(/calc\((\d+px) \* calc\(.*\)\)/, "0px") + }) + return properties + }, +} + +## Basic usage + +### Add borders between horizontal children + +Add borders between horizontal elements using the `divide-x-{width}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Add borders between stacked children + +Add borders between stacked elements using the `divide-y-{width}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Reversing children order + +If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `divide-x-reverse` or `divide-y-reverse` utilities to ensure the border is added to the correct side of each element. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +The divide width scale inherits its values from the `borderWidth` scale by default, so if you'd like to customize your values for both border width and divide width together, use the `theme.borderWidth` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +To customize only the divide width values, use the `theme.divideWidth` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + divideWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/drop-shadow.mdx b/src/pages/ZH/docs/drop-shadow.mdx new file mode 100644 index 000000000..3e7c0b4a1 --- /dev/null +++ b/src/pages/ZH/docs/drop-shadow.mdx @@ -0,0 +1,113 @@ +--- +title: "Drop Shadow" +description: "Utilities for applying drop-shadow filters to an element." +--- + +import utilities from 'utilities?plugin=dropShadow' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-drop-shadow'], + } + }, +} + +## Basic usage + +### Adding a drop shadow + +Use the `drop-shadow-{amount}` utilities to add a drop shadow to an element. + + +
    +
    +
    +

    drop-shadow-md

    +
    +
    +
    +
    +
    +

    drop-shadow-lg

    +
    +
    +
    +
    +
    +

    drop-shadow-xl

    +
    +
    +
    +
    +
    +

    drop-shadow-2xl

    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `dropShadow` utilities. You can customize these values by editing `theme.dropShadow` or `theme.extend.dropShadow` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ dropShadow: { ++ '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/editor-setup.mdx b/src/pages/ZH/docs/editor-setup.mdx new file mode 100644 index 000000000..52f0b7639 --- /dev/null +++ b/src/pages/ZH/docs/editor-setup.mdx @@ -0,0 +1,33 @@ +--- +# title: Editor Setup +title: 編輯器設定 +description: Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS. +--- + +## Syntax support + +Tailwind CSS uses a lot of custom CSS at-rules like `@tailwind`, `@apply`, and `@screen`, and in many editors this can trigger warnings or errors where these rules aren't recognized. + +The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS. For example, VS Code has a [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) plugin you can use that works great with Tailwind CSS. + +In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files. + + +## IntelliSense for VS Code + +The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting. + +Tailwind CSS IntelliSense extension for Visual Studio Code + +- **Autocomplete**. Intelligent suggestions for class names, as well as [CSS functions and directives](/docs/functions-and-directives). +- **Linting**. Highlights errors and potential bugs in both your CSS and your markup. +- **Hover Previews**. See the complete CSS for a Tailwind class name by hovering over it. +- **Syntax Highlighting**. Provides syntax definitions so that Tailwind features are highlighted correctly. + +Check out the project [on GitHub](https://github.com/tailwindcss/intellisense) to learn more, or [add it to Visual Studio Code](vscode:extension/bradlc.vscode-tailwindcss) to get started now. + +## JetBrains IDEs + +JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML and when using `@apply`. + +[Learn more about Tailwind CSS support in JetBrains IDEs →](https://www.jetbrains.com/help/webstorm/tailwind-css.html) diff --git a/src/pages/ZH/docs/fill.mdx b/src/pages/ZH/docs/fill.mdx new file mode 100644 index 000000000..3130d6dd2 --- /dev/null +++ b/src/pages/ZH/docs/fill.mdx @@ -0,0 +1,56 @@ +--- +title: "Fill" +description: "Utilities for styling the fill of SVG elements." +--- + +import utilities from 'utilities?plugin=fill' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the fill color + +Use the `fill-{color}` utilities to change the fill color of an SVG. + + +
    + +
    +     + +```html + + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-basis.mdx b/src/pages/ZH/docs/flex-basis.mdx new file mode 100644 index 000000000..d805e830c --- /dev/null +++ b/src/pages/ZH/docs/flex-basis.mdx @@ -0,0 +1,103 @@ +--- +title: "Flex Basis" +description: "Utilities for controlling the initial size of flex items." +--- + +import utilities from 'utilities?plugin=flexBasis' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the flex basis + +Use the `basis-{size}` utilities to set the initial size of flex items. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +     + +--- + +## Using custom values + +### Customizing your theme + +The default flex basis scale is a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale) as well as a set of percentage based values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '112': '28rem', ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the flex basis scale by editing `theme.flexBasis` or `theme.extend.flexBasis` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexBasis: { ++ '1/7': '14.2857143%', ++ '2/7': '28.5714286%', ++ '3/7': '42.8571429%', ++ '4/7': '57.1428571%', ++ '5/7': '71.4285714%', ++ '6/7': '85.7142857%', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-direction.mdx b/src/pages/ZH/docs/flex-direction.mdx new file mode 100644 index 000000000..c253b4b4f --- /dev/null +++ b/src/pages/ZH/docs/flex-direction.mdx @@ -0,0 +1,104 @@ +--- +title: "Flex Direction" +description: "Utilities for controlling the direction of flex items." +--- + +import utilities from 'utilities?plugin=flexDirection' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Row + +Use `flex-row` to position flex items horizontally in the same direction as text: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Row reversed + +Use `flex-row-reverse` to position flex items horizontally in the opposite direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Column + +Use `flex-col` to position flex items vertically: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Column reversed + +Use `flex-col-reverse` to position flex items vertically in the opposite direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/flex-grow.mdx b/src/pages/ZH/docs/flex-grow.mdx new file mode 100644 index 000000000..b93d806bd --- /dev/null +++ b/src/pages/ZH/docs/flex-grow.mdx @@ -0,0 +1,119 @@ +--- +title: "Flex Grow" +description: "Utilities for controlling how flex items grow." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.grow': { 'flex-grow': '1' }, + '.grow-0': { 'flex-grow': '0' }, + }, +} + +## Basic usage + +### Grow + +Use `grow` to allow a flex item to grow to fill any available space: + + +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Don't grow + +Use `grow-0` to prevent a flex item from growing: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides two `grow` utilities. You can customize these values by editing `theme.flexGrow` or `theme.extend.flexGrow` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexGrow: { ++ '2': 2 ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-shrink.mdx b/src/pages/ZH/docs/flex-shrink.mdx new file mode 100644 index 000000000..3333861c7 --- /dev/null +++ b/src/pages/ZH/docs/flex-shrink.mdx @@ -0,0 +1,119 @@ +--- +title: "Flex Shrink" +description: "Utilities for controlling how flex items shrink." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.shrink': { 'flex-shrink': '1' }, + '.shrink-0': { 'flex-shrink': '0' }, + }, +} + +## Basic usage + +### Shrink + +Use `shrink` to allow a flex item to shrink if needed: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Don't shrink + +Use `shrink-0` to prevent a flex item from shrinking: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides two `shrink` utilities. You can customize these values by editing `theme.flexShrink` or `theme.extend.flexShrink` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexShrink: { ++ '2': 2 ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-wrap.mdx b/src/pages/ZH/docs/flex-wrap.mdx new file mode 100644 index 000000000..08c176ed6 --- /dev/null +++ b/src/pages/ZH/docs/flex-wrap.mdx @@ -0,0 +1,90 @@ +--- +title: "Flex Wrap" +description: "Utilities for controlling how flex items wrap." +--- + +import utilities from 'utilities?plugin=flexWrap' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Don't wrap + +Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Wrap normally + +Use `flex-wrap` to allow flex items to wrap: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Wrap reversed + +Use `flex-wrap-reverse` to wrap flex items in the reverse direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/flex.mdx b/src/pages/ZH/docs/flex.mdx new file mode 100644 index 000000000..ad1dd92ee --- /dev/null +++ b/src/pages/ZH/docs/flex.mdx @@ -0,0 +1,167 @@ +--- +title: "Flex" +description: "Utilities for controlling how flex items both grow and shrink." +--- + +import utilities from 'utilities?plugin=flex' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Initial + +Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Flex 1 + +Use `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Auto + +Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### None + +Use `flex-none` to prevent a flex item from growing or shrinking: + + +
    +
    +
    + 01 +
    +
    +
    +
    + 02 +
    +
    +
    +
    + 03 +
    +
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four `flex` utilities. You can customize these values by editing `theme.flex` or `theme.extend.flex` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flex: { ++ '2': '2 2 0%' ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/float.mdx b/src/pages/ZH/docs/float.mdx new file mode 100644 index 000000000..0143793f1 --- /dev/null +++ b/src/pages/ZH/docs/float.mdx @@ -0,0 +1,99 @@ +--- +title: "Floats" +description: "Utilities for controlling the wrapping of content around an element." +--- + +import utilities from 'utilities?plugin=float' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Floating elements to the right + +Use `float-right` to float an element to the right of its container. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +### Floating elements to the left + +Use `float-left` to float an element to the left of its container. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +### Disabling a float + +Use `float-none` to reset any floats that are applied to an element. This is the default value for the float property. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/font-family.mdx b/src/pages/ZH/docs/font-family.mdx new file mode 100644 index 000000000..dd9b9030b --- /dev/null +++ b/src/pages/ZH/docs/font-family.mdx @@ -0,0 +1,113 @@ +--- +title: "Font Family" +description: "Utilities for controlling the font family of an element." +--- + +import utilities from 'utilities?plugin=fontFamily' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font family + +You can control the typeface of text using the font family utilities. + + +
    +
    + font-sans +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-serif +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-mono +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `theme.fontFamily` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontFamily: { +- 'sans': ['ui-sans-serif', 'system-ui', ...], +- 'serif': ['ui-serif', 'Georgia', ...], +- 'mono': ['ui-monospace', 'SFMono-Regular', ...], ++ 'display': ['Oswald', ...], ++ 'body': ['"Open Sans"', ...], + } + } + } +``` + +Font families can be specified as an array or as a simple comma-delimited string: + +```js +{ + // Array format: + 'sans': ['Helvetica', 'Arial', 'sans-serif'], + + // Comma-delimited format: + 'sans': 'Helvetica, Arial, sans-serif', +} +``` + +Note that **Tailwind does not automatically escape font names** for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters. + +```js +{ + // Won't work: + 'sans': ['Exo 2', ...], + + // Add quotes: + 'sans': ['"Exo 2"', ...], + + // ...or escape the space: + 'sans': ['Exo\\ 2', ...], +} +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/font-size.mdx b/src/pages/ZH/docs/font-size.mdx new file mode 100644 index 000000000..ac1d52fdf --- /dev/null +++ b/src/pages/ZH/docs/font-size.mdx @@ -0,0 +1,161 @@ +--- +title: "Font Size" +description: "Utilities for controlling the font size of an element." +--- + +import utilities from 'utilities?plugin=fontSize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font size + +Control the font size of an element using the `text-{size}` utilities. + + +
    +
    + text-sm +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-base +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-lg +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-xl +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-2xl +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides 10 `font-size` utilities. You change, add, or remove these by editing the `theme.fontSize` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontSize: { +- 'xs': '.75rem', +- 'sm': '.875rem', ++ 'tiny': '.875rem', + 'base': '1rem', + 'lg': '1.125rem', + 'xl': '1.25rem', + '2xl': '1.5rem', +- '3xl': '1.875rem', +- '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '4rem', ++ '7xl': '5rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Providing a default line-height + +You can provide a default line-height for each of your font-sizes using a tuple of the form `[fontSize, lineHeight]` in your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + sm: ['14px', '20px'], + base: ['16px', '24px'], + lg: ['20px', '28px'], + xl: ['24px', '32px'], + } + } +} +``` + +You can also specify a default line-height using object syntax: + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + sm: ['14px', { + lineHeight: '20px', + }], + } + } +} +``` + +We already provide default line heights for each `.text-{size}` class. + +### Providing a default letter-spacing + +If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + '2xl': ['24px', { + letterSpacing: '-0.01em', + }], + // Or with a default line-height as well + '3xl': ['32px', { + letterSpacing: '-0.02em', + lineHeight: '40px', + }], + } + } +} +``` + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/font-smoothing.mdx b/src/pages/ZH/docs/font-smoothing.mdx new file mode 100644 index 000000000..98fe31ca6 --- /dev/null +++ b/src/pages/ZH/docs/font-smoothing.mdx @@ -0,0 +1,50 @@ +--- +title: "Font Smoothing" +description: "Utilities for controlling the font smoothing of an element." +--- + +import utilities from 'utilities?plugin=fontSmoothing' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Applying font smoothing + +Use the `subpixel-antialiased` utility to render text using subpixel antialiasing and the `antialiased` utility to render text using grayscale antialiasing. + + +
    +
    + subpixel-antialiased +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + antialiased +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-style.mdx b/src/pages/ZH/docs/font-style.mdx new file mode 100644 index 000000000..43d2f417c --- /dev/null +++ b/src/pages/ZH/docs/font-style.mdx @@ -0,0 +1,50 @@ +--- +title: "Font Style" +description: "Utilities for controlling the style of text." +--- + +import utilities from 'utilities?plugin=fontStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Italicizing text + +The `italic` utility can be used to make text italic. Likewise, the `not-italic` utility can be used to display text normally — typically to reset italic text at different breakpoints. + + +
    +
    + italic +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + not-italic +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-variant-numeric.mdx b/src/pages/ZH/docs/font-variant-numeric.mdx new file mode 100644 index 000000000..a414c0afa --- /dev/null +++ b/src/pages/ZH/docs/font-variant-numeric.mdx @@ -0,0 +1,227 @@ +--- +title: "Font Variant Numeric" +description: "Utilities for controlling the variant of numbers." +--- + +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.normal-nums': { 'font-variant-numeric': 'normal' }, + '.ordinal': { 'font-variant-numeric': 'ordinal' }, + '.slashed-zero': { 'font-variant-numeric': 'slashed-zero' }, + '.lining-nums': { 'font-variant-numeric': 'lining-nums' }, + '.oldstyle-nums': { 'font-variant-numeric': 'oldstyle-nums' }, + '.proportional-nums': { 'font-variant-numeric': 'proportional-nums' }, + '.tabular-nums': { 'font-variant-numeric': 'tabular-nums' }, + '.diagonal-fractions': { 'font-variant-numeric': 'diagonal-fractions' }, + '.stacked-fractions': { 'font-variant-numeric': 'stacked-fractions' }, + }, +} + +## Basic usage + +### Applying numeric variants + +Use the `font-variant-numeric` utilities to enable additional glyphs for numbers, fractions, and ordinal markers *(in fonts that support them)*. + +These utilities are composable so you can enable multiple `font-variant-numeric` features by combining multiple classes in your HTML: + +```html +

    + 1234567890 +

    +``` + +Note that many fonts don't support these features *(stacked fractions support for example is especially rare)*, so some of these utilities may have no effect depending on the font family you are using. + +-- block + +### Ordinal + +Use the `ordinal` utility to enable special glyphs for the ordinal markers. + +-- column + + +

    1st

    +     + +```html +

    1st

    +``` + +-- /block + +-- block + +### Slashed Zero + +Use the `slashed-zero` utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. + +-- column + + +

    0

    +     + +```html +

    0

    +``` + +-- /block + +-- block + +### Lining figures + +Use the `lining-nums` utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the `lnum` OpenType feature. This is the default for most fonts. + +-- column + + +

    1234567890

    +     + +```html +

    + 1234567890 +

    +``` + +-- /block + +-- block + +### Oldstyle figures + +Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders. This corresponds to the `onum` OpenType feature. + +-- column + + +

    1234567890

    +     + +```html +

    + 1234567890 +

    +``` + +-- /block + +-- block + +### Proportional figures + +Use the `proportional-nums` utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the `pnum` OpenType feature. + +-- column + + +
    +

    12121

    +

    90909

    +
    +     + +```html +

    + 12121 +

    +

    + 90909 +

    +``` + +-- /block + +-- block + +### Tabular figures + +Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the `tnum` OpenType feature. + +-- column + + +
    +

    12121

    +

    90909

    +
    +     + +```html +

    + 12121 +

    +

    + 90909 +

    +``` + +-- /block + +-- block + +### Diagonal fractions + +Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the `frac` OpenType feature. + +-- column + + +

    1/2 3/4 5/6

    +     + +```html +

    + 1/2 3/4 5/6 +

    +``` + +-- /block + +-- block + +### Stacked fractions + +Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the `frac` OpenType feature. Very few fonts seem to support this feature — we've used Ubuntu Mono here. + +-- column + + +

    1/2 3/4 5/6

    +     + +```html +

    + 1/2 3/4 5/6 +

    +``` + +-- /block + +### Resetting numeric font variants + +Use the `normal-nums` propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint: + +```html +

    + 12345 +

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-weight.mdx b/src/pages/ZH/docs/font-weight.mdx new file mode 100644 index 000000000..65b23cefa --- /dev/null +++ b/src/pages/ZH/docs/font-weight.mdx @@ -0,0 +1,106 @@ +--- +title: "Font Weight" +description: "Utilities for controlling the font weight of an element." +--- + +import utilities from 'utilities?plugin=fontWeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font weight + +Control the font weight of an element using the `font-{weight}` utilities. + + +
    +
    + font-light +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-normal +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-medium +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-semibold +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-bold +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontWeight: { +- hairline: 100, ++ 'extra-light': 100, +- thin: 200, + light: 300, + normal: 400, + medium: 500, +- semibold: 600, + bold: 700, +- extrabold: 800, ++ 'extra-bold': 800, + black: 900, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/functions-and-directives.mdx b/src/pages/ZH/docs/functions-and-directives.mdx new file mode 100644 index 000000000..ed26dd157 --- /dev/null +++ b/src/pages/ZH/docs/functions-and-directives.mdx @@ -0,0 +1,277 @@ +--- +title: Functions & Directives +description: A reference for the custom functions and directives Tailwind exposes to your CSS. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +## Directives + +Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects. + +### @tailwind + +Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `variants` styles into your CSS. + +```css +/** + * This injects Tailwind's base styles and any base styles registered by + * plugins. + */ +@tailwind base; + +/** + * This injects Tailwind's component classes and any component classes + * registered by plugins. + */ +@tailwind components; + +/** + * This injects Tailwind's utility classes and any utility classes registered + * by plugins. + */ +@tailwind utilities; + +/** + * Use this directive to control where Tailwind injects the hover, focus, + * responsive, dark mode, and other variants of each class. + * + * If omitted, Tailwind will append these classes to the very end of + * your stylesheet by default. + */ +@tailwind variants; +``` + +### @layer + +Use the `@layer` directive to tell Tailwind which "bucket" a set of custom styles belong to. Valid layers are `base`, `components`, and `utilities`. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } +} + +@layer components { + .btn-blue { + @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; + } +} + +@layer utilities { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } +} +``` + +Tailwind will automatically move any CSS within a `@layer` directive to the same place as the corresponding `@tailwind` rule, so you don't have to worry about authoring your CSS in a specific order to avoid specificity issues. + +Any custom CSS added to a layer will only be included in the final build if that CSS is actually used in your HTML, just like all of the classes built in to Tailwind by default. + +Wrapping any custom CSS in a `@layer` directive also makes it possible to use modifiers with those rules, like `hover:` and `focus:` or responsive modifiers like `md:` and `lg:`. + +### @apply + +Use `@apply` to inline any existing utility classes into your own custom CSS. + +This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you're used to using in your HTML. + +```css +.select2-dropdown { + @apply rounded-b-lg shadow-md; +} +.select2-search { + @apply border border-gray-300 rounded; +} +.select2-results__group { + @apply text-lg font-bold text-gray-900; +} +``` + +Any rules inlined with `@apply` will have `!important` **removed** by default to avoid specificity issues: + +```css +/* Input */ +.foo { + color: blue !important; +} + +.bar { + @apply foo; +} + +/* Output */ +.foo { + color: blue !important; +} + +.bar { + color: blue; +} +``` + +If you'd like to `@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration: + + +```css +/* Input */ +.btn { + @apply font-bold py-2 px-4 rounded !important; +} + +/* Output */ +.btn { + font-weight: 700 !important; + padding-top: .5rem !important; + padding-bottom: .5rem !important; + padding-right: 1rem !important; + padding-left: 1rem !important; + border-radius: .25rem !important; +} +``` + +Note that if you're using Sass/SCSS, you'll need to use Sass' interpolation feature to get this to work: + +```css +.btn { + @apply font-bold py-2 px-4 rounded #{!important}; +} +``` + +#### Using @apply with per-component CSS + +Component frameworks like Vue and Svelte support adding per-component styles within a ` +``` + +This is because under-the-hood, frameworks like Vue and Svelte are processing every single ` + + +>
    + +
    + + `, + }, + }, +] + +export default function PlayCdn({ code }) { + return ( + +
    +

    + Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN + is designed for development purposes only, and is not the best choice for production. +

    +
    + +     + ) +} + +export function getStaticProps() { + // let { highlightCode } = require('../../../../remark/utils') + let { highlightCode } = require('../../../../../remark/utils') + + return { + props: { + code: steps.map(({ code }) => { + let isArray = Array.isArray(code) + code = isArray ? code : [code] + code = code.map((code) => { + if (code.lang && code.lang !== 'terminal') { + return highlightCode(code.code, code.lang) + } + return code.code + }) + return isArray ? code : code[0] + }), + }, + } +} + +PlayCdn.layoutProps = { + meta: { + title: 'Installation: Play CDN', + section: 'Getting Started', + }, + Layout: DocumentationLayout, + allowOverflow: false, +} diff --git a/src/pages/ZH/docs/installation/using-postcss.js b/src/pages/ZH/docs/installation/using-postcss.js new file mode 100644 index 000000000..ac0be1f8f --- /dev/null +++ b/src/pages/ZH/docs/installation/using-postcss.js @@ -0,0 +1,169 @@ +import { DocumentationLayout } from '@/layouts/.ZH/DocumentationLayout' +import { InstallationLayout } from '@/layouts/.ZH/InstallationLayout' +import { Cta } from '@/components/Cta' +import { Steps } from '@/components/Steps' + +let steps = [ + { + title: 'Install Tailwind CSS', + body: () => ( +

    + Install tailwindcss and its peer dependencies via npm, and create your{' '} + tailwind.config.js file. +

    + ), + code: { + name: 'Terminal', + lang: 'terminal', + code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init', + }, + }, + { + title: 'Add Tailwind to your PostCSS configuration', + body: () => ( +

    + Add tailwindcss and autoprefixer to your{' '} + postcss.config.js file. +

    + ), + code: { + name: 'postcss.config.js', + lang: 'js', + code: ` module.exports = { + plugins: { +> tailwindcss: {}, +> autoprefixer: {}, + } + }`, + }, + }, + { + title: 'Configure your template paths', + body: () => ( +

    + Add the paths to all of your template files in your tailwind.config.js file. +

    + ), + code: { + name: 'tailwind.config.js', + lang: 'js', + code: ` module.exports = { +> content: ["./src/**/*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], + }`, + }, + }, + { + title: 'Add the Tailwind directives to your CSS', + body: () => ( +

    + Add the @tailwind directives for each of Tailwind’s layers to your main CSS + file. +

    + ), + code: { + name: 'main.css', + lang: 'css', + code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;', + }, + }, + { + title: 'Start your build process', + body: () => ( +

    + Run your build process with npm run dev or whatever command is configured + in your package.json file. +

    + ), + code: { + name: 'Terminal', + lang: 'terminal', + code: 'npm run dev', + }, + }, + { + title: 'Start using Tailwind in your HTML', + body: () => ( +

    + Make sure your compiled CSS is included in the {''}{' '} + (your framework might handle this for you), then start using Tailwind’s utility + classes to style your content. +

    + ), + code: { + name: 'index.html', + lang: 'html', + code: ` + + + + + + + +>

    +> Hello world! +>

    + + `, + }, + }, +] + +export default function UsingPostCss({ code }) { + return ( + +
    +

    + Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with + build tools like webpack, Rollup, Vite, and Parcel. +

    +
    + + + Are you stuck? Setting up + Tailwind with PostCSS can be a bit different across different build tools. Check our + framework guides to see if we have more specific instructions for your particular setup. + + } + /> +     + ) +} + +export function getStaticProps() { + // let { highlightCode } = require('../../../../remark/utils') + let { highlightCode } = require('../../../../../remark/utils') + + return { + props: { + code: steps.map(({ code }) => { + let isArray = Array.isArray(code) + code = isArray ? code : [code] + code = code.map((code) => { + if (code.lang && code.lang !== 'terminal') { + return highlightCode(code.code, code.lang) + } + return code.code + }) + return isArray ? code : code[0] + }), + }, + } +} + +UsingPostCss.layoutProps = { + meta: { + title: 'Installation: Using PostCSS', + section: 'Getting Started', + }, + Layout: DocumentationLayout, + allowOverflow: false, +} diff --git a/src/pages/ZH/docs/invert.mdx b/src/pages/ZH/docs/invert.mdx new file mode 100644 index 000000000..eb4151da8 --- /dev/null +++ b/src/pages/ZH/docs/invert.mdx @@ -0,0 +1,99 @@ +--- +title: "Invert" +description: "Utilities for applying invert filters to an element." +--- + +import utilities from 'utilities?plugin=invert' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-invert'], + } + }, +} + +## Basic usage + +### Inverting an element's color + +Use the `invert` and `invert-0` utilities to control whether an element should be rendered with inverted colors or normally. + + +
    +
    +
    +

    invert-0

    +
    + +
    +
    +
    +
    +

    invert

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `invert` utilities. You can customize these values by editing `theme.invert` or `theme.extend.invert` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ invert: { ++ 25: '.25', ++ 50: '.5', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/isolation.mdx b/src/pages/ZH/docs/isolation.mdx new file mode 100644 index 000000000..12bfd43ff --- /dev/null +++ b/src/pages/ZH/docs/isolation.mdx @@ -0,0 +1,34 @@ +--- +title: "Isolation" +description: "Utilities for controlling whether an element should explicitly create a new stacking context." +--- + +import utilities from 'utilities?plugin=isolation' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stacking context + +Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-content.mdx b/src/pages/ZH/docs/justify-content.mdx new file mode 100644 index 000000000..4975248f9 --- /dev/null +++ b/src/pages/ZH/docs/justify-content.mdx @@ -0,0 +1,144 @@ +--- +title: "Justify Content" +description: "Utilities for controlling how flex and grid items are positioned along a container's main axis." +--- + +import utilities from 'utilities?plugin=justifyContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `justify-start` to justify items against the start of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `justify-center` to justify items along the center of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `justify-end` to justify items against the end of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space between + +Use `justify-between` to justify items along the container's main axis such that there is an equal amount of space between each item: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space around + +Use `justify-around` to justify items along the container's main axis such that there is an equal amount of space on each side of each item: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space evenly + +Use `justify-evenly` to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-items.mdx b/src/pages/ZH/docs/justify-items.mdx new file mode 100644 index 000000000..6517e4dcc --- /dev/null +++ b/src/pages/ZH/docs/justify-items.mdx @@ -0,0 +1,164 @@ +--- +title: "Justify Items" +description: "Utilities for controlling how grid items are aligned along their inline axis." +--- + +import utilities from 'utilities?plugin=justifyItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `justify-items-start` to justify grid items against the start of their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `justify-items-end` to justify grid items against the end of their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `justify-items-center` to justify grid items along their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `justify-items-stretch` to stretch items along their inline axis: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-self.mdx b/src/pages/ZH/docs/justify-self.mdx new file mode 100644 index 000000000..e7ff693c6 --- /dev/null +++ b/src/pages/ZH/docs/justify-self.mdx @@ -0,0 +1,172 @@ +--- +title: "Justify Self" +description: "Utilities for controlling how an individual grid item is aligned along its inline axis." +--- + +import utilities from 'utilities?plugin=justifySelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `justify-self-auto` to align an item based on the value of the grid's `justify-items` property: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Start + +Use `justify-self-start` to align a grid item to the start its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Center + +Use `justify-self-center` to align a grid item along the center its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### End + +Use `justify-self-end` to align a grid item to the end its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Stretch + +Use `justify-self-stretch` to stretch a grid item to fill the grid area on its inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/letter-spacing.mdx b/src/pages/ZH/docs/letter-spacing.mdx new file mode 100644 index 000000000..b304cff60 --- /dev/null +++ b/src/pages/ZH/docs/letter-spacing.mdx @@ -0,0 +1,117 @@ +--- +title: "Letter Spacing" +description: "Utilities for controlling the tracking (letter spacing) of an element." +--- + +import utilities from 'utilities?plugin=letterSpacing' +import { SnippetGroup } from '@/components/SnippetGroup' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the letter spacing + +Control the letter spacing of an element using the `tracking-{size}` utilities. + + +
    +
    + tracking-tight +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + tracking-normal +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + tracking-wide +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +### Using negative values + +To use a negative letter-spacing value, prefix the class name with a dash to convert it to a negative value. + +Using negative values doesn't make a ton of sense with the letter-spacing scale Tailwind includes out of the box, but if you've opted to customize your letter-spacing scale to use numbers instead of descriptive words like "wide" the negative value modifier can be useful. + + + +```html HTML +

    The quick brown fox ...

    +``` + +```js tailwind.config.js +module.exports = { + theme: { + letterSpacing: { + '1': '0em', + '2': '0.025em', + '3': '0.05em', + '4': '0.1em', + } + } +} +``` + +     + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six tracking utilities. You can change, add, or remove these by editing the `theme.letterSpacing` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + letterSpacing: { ++ tightest: '-.075em', + tighter: '-.05em', +- tight: '-.025em', + normal: '0', +- wide: '.025em', + wider: '.05em', +- widest: '.1em', ++ widest: '.25em', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/line-height.mdx b/src/pages/ZH/docs/line-height.mdx new file mode 100644 index 000000000..b5f2f89ec --- /dev/null +++ b/src/pages/ZH/docs/line-height.mdx @@ -0,0 +1,140 @@ +--- +title: "Line Height" +description: "Utilities for controlling the leading (line height) of an element." +--- + +import utilities from 'utilities?plugin=lineHeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Relative line-heights + +Use the `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, and `leading-loose` utilities to give an element a relative line-height based on its current font-size. + + +
    +
    + leading-normal +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-relaxed +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-loose +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +``` + +### Fixed line-heights + +Use the `leading-{size}` utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element's final size. + + +
    +
    + leading-6 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-7 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-8 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +### Overriding default line-heights + +It's important to note that by default, Tailwind's [font-size](/docs/font-size) utilities each set their own default line-height. This means that any time you use a responsive font-size utility like `sm:text-xl`, any explicit line-height you have set for a smaller breakpoint will be overridden. + +```html + +

    + Maybe we can live without libraries... +

    +``` + +If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well: + +```html + +

    + Maybe we can live without libraries... +

    +``` + +Using the same line-height across different font sizes is generally not going to give you good typographic results. Line-height should typically get smaller as font-size increases, so the default behavior here usually saves you a ton of work. If you find yourself fighting it, you can always [customize your font-size scale](https://tailwindcss.com/docs/font-size#customizing) to not include default line-heights. + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six relative and eight fixed `line-height` utilities. You change, add, or remove these by customizing the `lineHeight` section of your Tailwind theme config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ lineHeight: { ++ 'extra-loose': '2.5', ++ '12': '3rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/list-style-position.mdx b/src/pages/ZH/docs/list-style-position.mdx new file mode 100644 index 000000000..ed505b371 --- /dev/null +++ b/src/pages/ZH/docs/list-style-position.mdx @@ -0,0 +1,63 @@ +--- +title: "List Style Position" +description: "Utilities for controlling the position of bullets/numbers in lists." +--- + +import utilities from 'utilities?plugin=listStylePosition' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the list style position + +Control the position of the markers and text indentation in a list using the `list-inside` and `list-outside` utilities. + + +
    +
    +
    +

    list-inside

    +
      +
    • 5 cups chopped Porcini mushrooms
      • +
    • 1/2 cup of olive oil
      • +
    • 3lb of celery
      • +
    +
    +
    +
    +

    list-outside

    +
      +
    • 5 cups chopped Porcini mushrooms
      • +
    • 1/2 cup of olive oil
      • +
    • 3lb of celery
      • +
    +
    +
    +     + +```html +
      +
    • 5 cups chopped Porcini mushrooms
      • + +
    + +
      +
    • 5 cups chopped Porcini mushrooms
      • + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/list-style-type.mdx b/src/pages/ZH/docs/list-style-type.mdx new file mode 100644 index 000000000..c2d4320db --- /dev/null +++ b/src/pages/ZH/docs/list-style-type.mdx @@ -0,0 +1,103 @@ +--- +title: "List Style Type" +description: "Utilities for controlling the bullet/number style of a list." +--- + +import utilities from 'utilities?plugin=listStyleType' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the list style type + +To create bulleted or numeric lists, use the `list-disc` and `list-decimal` utilities. + + +
    +
    + list-disc +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    + list-decimal +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    + list-none +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    +     + +```html +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • + +
    + +
      +
    1. Now this is a story all about how, my life got flipped turned upside down
      2. + +
    + +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `theme.listStyleType` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + listStyleType: { + none: 'none', +- disc: 'disc', +- decimal: 'decimal', ++ square: 'square', ++ roman: 'upper-roman', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/margin.mdx b/src/pages/ZH/docs/margin.mdx new file mode 100644 index 000000000..deaa6d325 --- /dev/null +++ b/src/pages/ZH/docs/margin.mdx @@ -0,0 +1,173 @@ +--- +title: "Margin" +description: "Utilities for controlling an element's margin." +--- + +import utilities from 'utilities?plugin=margin' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Add margin to a single side + +Control the margin on one side of an element using the `m{t|r|b|l}-{size}` utilities. + +For example, `mt-6` would add `1.5rem` of margin to the top of an element, `mr-4` would add `1rem` of margin to the right of an element, `mb-8` would add `2rem` of margin to the bottom of an element, and `ml-2` would add `0.5rem` of margin to the left of an element. + + +
    +
    +
    +
    mt-6
    +
    +
    +
    +
    +
    mr-4
    +
    +
    +
    +
    +
    mb-8
    +
    +
    +
    +
    +
    ml-2
    +
    +
    +
    +     + +```html +
    mt-6
    +
    mr-4
    +
    mb-8
    +
    ml-2
    +``` + +### Add horizontal margin + +Control the horizontal margin of an element using the `mx-{size}` utilities. + + +
    +
    +
    mx-8
    +
    +
    +     + +```html +
    mx-8
    +``` + +### Add vertical margin + +Control the vertical margin of an element using the `my-{size}` utilities. + + +
    +
    +
    my-8
    +
    +
    +     + +```html +
    my-8
    +``` + +### Add margin to all sides + +Control the margin on all sides of an element using the `m-{size}` utilities. + + +
    +
    +
    m-8
    +
    +
    +     + +```html +
    m-8
    +``` + +### Using negative values + +To use a negative margin value, prefix the class name with a dash to convert it to a negative value. + + +
    +
    +
    +
    -mt-8
    +
    +
    +     + +```html +
    +
    -mt-8
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's margin scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the margin scale by editing `theme.margin` or `theme.extend.margin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ margin: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/max-height.mdx b/src/pages/ZH/docs/max-height.mdx new file mode 100644 index 000000000..20ae2ca8e --- /dev/null +++ b/src/pages/ZH/docs/max-height.mdx @@ -0,0 +1,83 @@ +--- +title: "Max-Height" +description: "Utilities for setting the maximum height of an element." +--- + +import utilities from 'utilities?plugin=maxHeight' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Setting the maximum height + +Set the maximum height of an element using the `max-h-full` or `max-h-screen` utilities. + +```html +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's max-height scale uses a combination of the [default spacing scale](/docs/customizing-spacing) as well as some additional height related values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the max-height scale by editing `theme.maxHeight` or `theme.extend.maxHeight` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ maxHeight: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/max-width.mdx b/src/pages/ZH/docs/max-width.mdx new file mode 100644 index 000000000..2d11ffaf6 --- /dev/null +++ b/src/pages/ZH/docs/max-width.mdx @@ -0,0 +1,124 @@ +--- +title: "Max-Width" +description: "Utilities for setting the maximum width of an element." +--- + +import utilities from 'utilities?plugin=maxWidth' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Setting the maximum width + +Set the maximum width of an element using the `max-w-{size}` utilities. + + +
    + +
    +
    Andrew Alfred
    +
    Assistant to the Traveling Secretary
    +
    +
    +     + +```html +
    + +
    +``` + +### Reading width + +The `max-w-prose` utility gives an element a max-width optimized for readability and adapts based on the font size. + + +
    +
    + text-sm +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    + text-base +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    + text-xl +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    +     + +```html +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    + +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    + +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +``` + +### Constraining to your breakpoints + +The `max-w-screen-{breakpoint}` classes can be used to give an element a max-width matching a specific breakpoint. These values are automatically derived from the [`theme.screens` section](/docs/theme#screens) of your `tailwind.config.js` file. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `max-width` scale by editing `theme.maxWidth` or `theme.extend.maxWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ maxWidth: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/min-height.mdx b/src/pages/ZH/docs/min-height.mdx new file mode 100644 index 000000000..b55802da8 --- /dev/null +++ b/src/pages/ZH/docs/min-height.mdx @@ -0,0 +1,61 @@ +--- +title: "Min-Height" +description: "Utilities for setting the minimum height of an element." +--- + +import utilities from 'utilities?plugin=minHeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the minimum height + +Set the minimum height of an element using the `min-h-0`, `min-h-full`, or `min-h-screen` utilities. + +```html +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `min-height` scale by editing `theme.minHeight` or `theme.extend.minHeight` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ minHeight: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/min-width.mdx b/src/pages/ZH/docs/min-width.mdx new file mode 100644 index 000000000..c6c515207 --- /dev/null +++ b/src/pages/ZH/docs/min-width.mdx @@ -0,0 +1,59 @@ +--- +title: "Min-Width" +description: "Utilities for setting the minimum width of an element." +--- + +import utilities from 'utilities?plugin=minWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the minimum width + +Set the minimum width of an element using the `min-w-{width}` utilities. + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `min-width` scale by editing `theme.minWidth` or `theme.extend.minWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ minWidth: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/mix-blend-mode.mdx b/src/pages/ZH/docs/mix-blend-mode.mdx new file mode 100644 index 000000000..3d426b660 --- /dev/null +++ b/src/pages/ZH/docs/mix-blend-mode.mdx @@ -0,0 +1,42 @@ +--- +title: "Mix Blend Mode" +description: "Utilities for controlling how an element should blend with the background." +--- + +import utilities from 'utilities?plugin=mixBlendMode' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting an element's blend mode + +Use the `mix-blend-{mode}` utilities to control how an element's content should be blended with the background. + + +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/object-fit.mdx b/src/pages/ZH/docs/object-fit.mdx new file mode 100644 index 000000000..c598ca19c --- /dev/null +++ b/src/pages/ZH/docs/object-fit.mdx @@ -0,0 +1,119 @@ +--- +title: "Object Fit" +description: "Utilities for controlling how a replaced element's content should be resized." +--- + +import utilities from 'utilities?plugin=objectFit' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Resizing to cover a container + +Resize an element's content to cover its container using `.object-cover`. + + +
    + +
    +     + +```html +
    + +
    +``` + +### Containing an element + +Resize an element's content to stay contained within its container using `.object-contain`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +### Stretching to fit a container + +Stretch an element's content to fit its container using `.object-fill`. + + +
    + +
    +     + +```html +
    + +
    +``` + +### Scaling down if too large + +Display an element's content at its original size but scale it down to fit its container if necessary using `.object-scale-down`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +### Using an element's original size + +Display an element's content at its original size ignoring the container size using `.object-none`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/object-position.mdx b/src/pages/ZH/docs/object-position.mdx new file mode 100644 index 000000000..6d3d12216 --- /dev/null +++ b/src/pages/ZH/docs/object-position.mdx @@ -0,0 +1,156 @@ +--- +title: "Object Position" +description: "Utilities for controlling how a replaced element's content should be positioned within its container." +--- + +import utilities from 'utilities?plugin=objectPosition' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Positioning a replaced element + +Use the `object-{side}` utilities to specify how a replaced element's content should be positioned within its container. + + +
    +
    +
    +

    object-left-top

    +
    +
    + +
    +
    +
    +

    object-top

    +
    +
    + +
    +
    +
    +

    object-right-top

    +
    +
    + +
    +
    +
    +

    object-left

    +
    +
    + +
    +
    +
    +

    object-center

    +
    +
    + +
    +
    +
    +

    object-right

    +
    +
    + +
    +
    +
    +

    object-left-bottom

    +
    +
    + +
    +
    +
    +

    object-bottom

    +
    +
    + +
    +
    +
    +

    object-right-bottom

    +
    +
    + +
    +
    +
    +
    +     + +```html + + + + + + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides nine object position utilities. You can customize these values by editing `theme.objectPosition` or `theme.extend.objectPosition` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ objectPosition: { ++ 'center-bottom': 'center bottom', ++ } + }, + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/opacity.mdx b/src/pages/ZH/docs/opacity.mdx new file mode 100644 index 000000000..9292c3623 --- /dev/null +++ b/src/pages/ZH/docs/opacity.mdx @@ -0,0 +1,83 @@ +--- +title: "Opacity" +description: "Utilities for controlling the opacity of an element." +--- + +import utilities from 'utilities?plugin=opacity' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing an element's opacity + +Control the opacity of an element using the `opacity-{amount}` utilities. + + +
    +
    +

    opacity-100

    + +
    +
    +

    opacity-75

    + +
    +
    +

    opacity-50

    + +
    +
    +

    opacity-25

    + +
    +
    +     + +```html + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides several opacity utilities for general purpose use. You can customize these values by editing `theme.opacity` or `theme.extend.opacity` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ opacity: { ++ '67': '.67', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/optimizing-for-production.mdx b/src/pages/ZH/docs/optimizing-for-production.mdx new file mode 100644 index 000000000..0f88efea7 --- /dev/null +++ b/src/pages/ZH/docs/optimizing-for-production.mdx @@ -0,0 +1,38 @@ +--- +title: Optimizing for Production +description: Getting the most performance out of Tailwind CSS projects. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' +import { SnippetGroup } from '@/components/SnippetGroup' +import stats from '@/utils/stats' +import { Performance } from '@/components/home/Performance' + +Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are _actually using_ in your project. + +Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for [Netflix Top 10](https://top10.netflix.com/) and the entire website delivers only 6.5kB of CSS over the network. + +With CSS files this small, you don't have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that's downloaded once and cached until you redeploy your site. + +For the smallest possible production build, we recommend minifying your CSS with a tool like [cssnano](https://cssnano.co/), and compressing your CSS with [Brotli](https://en.wikipedia.org/wiki/Brotli). + +If you're using Tailwind CLI, you can minify your CSS by adding the `--minify` flag: + +```shell +npx tailwindcss -o build.css --minify +``` + +If you've installed Tailwind as a PostCSS plugin, add `cssnano` to the end of your plugin list: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + ...(NODE_ENV === 'production' ? { cssnano: {} } : {}) + } +} +``` + +If you're using a framework, check the documentation as this is often handled for you in production automatically and you don't even need to configure it. \ No newline at end of file diff --git a/src/pages/ZH/docs/order.mdx b/src/pages/ZH/docs/order.mdx new file mode 100644 index 000000000..dea72fa22 --- /dev/null +++ b/src/pages/ZH/docs/order.mdx @@ -0,0 +1,81 @@ +--- +title: "Order" +description: "Utilities for controlling the order of flex and grid items." +--- + +import utilities from 'utilities?plugin=order' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Ordering flex and grid items + +Use `order-{order}` to render flex and grid items in a different order than they appear in the DOM. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Using negative values + +To use a negative order value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides utilities for `order-first`, `order-last`, `order-none`, and an `order-{number}` utility for the numbers 1 through 12. You can customize these values by editing `theme.order` or `theme.extend.order` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ order: { ++ '13': '13' ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-color.mdx b/src/pages/ZH/docs/outline-color.mdx new file mode 100644 index 000000000..1ce4dab2a --- /dev/null +++ b/src/pages/ZH/docs/outline-color.mdx @@ -0,0 +1,88 @@ +--- +title: "Outline Color" +description: "Utilities for controlling the color of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline color + +Use the `outline-{color}` utilities to change the color of an element's outline. + + +
    +
    +

    outline-blue-500

    + +
    +
    +

    outline-cyan-500

    + +
    +
    +

    outline-pink-500

    + +
    +
    +     + +```html + + + +``` + +### Changing the opacity + +Control the opacity of an element's outline color using the color opacity modifier. + + +
    +
    +

    outline-blue-500/50

    + +
    +
    +     + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-offset.mdx b/src/pages/ZH/docs/outline-offset.mdx new file mode 100644 index 000000000..52a35dd8c --- /dev/null +++ b/src/pages/ZH/docs/outline-offset.mdx @@ -0,0 +1,78 @@ +--- +title: "Outline Offset" +description: "Utilities for controlling the offset of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineOffset' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline offset + +Use the `outline-{offset}` utilities to change the offset of an element's outline. + + +
    +
    +

    outline-offset-0

    + +
    +
    +

    outline-offset-2

    + +
    +
    +

    outline-offset-4

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `outline-offset-{width}` utilities by editing `theme.outlineOffset` or `theme.extend.outlineOffset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ outlineOffset: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-style.mdx b/src/pages/ZH/docs/outline-style.mdx new file mode 100644 index 000000000..7f1f34164 --- /dev/null +++ b/src/pages/ZH/docs/outline-style.mdx @@ -0,0 +1,82 @@ +--- +title: "Outline Style" +description: "Utilities for controlling the style of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineStyle' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline style + +Use the `outline-{style}` utilities to change the style of an element's outline. + + +
    +
    +

    outline

    + +
    +
    +

    outline-dashed

    + +
    +
    +

    outline-dotted

    + +
    +
    +

    outline-double

    + +
    +
    +     + +```html + + + + +``` + +### Removing outlines + +Use `outline-none` to hide the default browser outline on focused elements. + +It is highly recommended to apply your own focus styling for accessibility when using this utility. + + +
    + + +
    +     + +```html + + + +``` + +The `outline-none` utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) users. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/outline-width.mdx b/src/pages/ZH/docs/outline-width.mdx new file mode 100644 index 000000000..e7780ca0a --- /dev/null +++ b/src/pages/ZH/docs/outline-width.mdx @@ -0,0 +1,80 @@ +--- +title: "Outline Width" +description: "Utilities for controlling the width of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline width + +Use the `outline-{width}` utilities to change the width of an element's outline. + + +
    +
    +

    outline-1

    + +
    +
    +

    outline-2

    + +
    +
    +

    outline-4

    + +
    +
    +     + +```html + + + +``` + +The default outline width is `3px`. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `outline-{width}` utilities by editing `theme.outlineWidth` or `theme.extend.outlineWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ outlineWidth: { ++ 5: '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/overflow.mdx b/src/pages/ZH/docs/overflow.mdx new file mode 100644 index 000000000..cb9c11586 --- /dev/null +++ b/src/pages/ZH/docs/overflow.mdx @@ -0,0 +1,453 @@ +--- +title: "Overflow" +description: "Utilities for controlling how an element handles content that is too large for the container." +--- + +import utilities from 'utilities?plugin=overflow' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Showing content that overflows + +Use `overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible. + + +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +     + +```html +
    +``` + +### Hiding content that overflows + +Use `overflow-hidden` to clip any content within an element that overflows the bounds of that element. + + +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +     + +```html +
    +``` + +### Scrolling if needed + +Use `overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling horizontally if needed + +Use `overflow-x-auto` to allow horizontal scrolling if needed. + + +
    +
    +
    +
    + + Andrew +
    +
    +
    +
    + + Emily +
    +
    +
    +
    + + Whitney +
    +
    +
    +
    + + David +
    +
    +
    +
    + + Kristin +
    +
    +
    +
    + + Sarah +
    +
    +
    +
    +     + +```html +
    +``` + +### Scrolling vertically if needed + +Use `overflow-y-auto` to allow vertical scrolling if needed. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling horizontally always + +Use `overflow-x-scroll` to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. + + +
    +
    +
    +
    + + Andrew +
    +
    +
    +
    + + Emily +
    +
    +
    +
    + + Whitney +
    +
    +
    +
    + + David +
    +
    +
    +
    + + Kristin +
    +
    +
    +
    + + Sarah +
    +
    +
    +
    +     + +```html +
    +``` + +### Scrolling vertically always + +Use `overflow-y-scroll` to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling in all directions + +Use `overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting. + + +
    +
    + +
    +
    Sun
    +
    Mon
    +
    Tue
    +
    Wed
    +
    Thu
    +
    Fri
    +
    Sat
    +
    5 AM
    +
    +
    +
    +
    +
    +
    +
    +
    6 AM
    +
    +
    +
    +
    +
    +
    +
    +
    7 AM
    +
    +
    +
    +
    +
    +
    +
    +
    8 AM
    +
    +
    +
    +
    +
    +
    +
    +
    9 AM
    +
    +
    +
    +
    +
    +
    +
    +
    10 AM
    +
    +
    +
    +
    +
    +
    +
    +
    11 AM
    +
    +
    +
    +
    +
    +
    +
    +
    12 PM
    +
    +
    +
    +
    +
    +
    +
    +
    1 PM
    +
    +
    +
    +
    +
    +
    +
    +
    2 PM
    +
    +
    +
    +
    +
    +
    +
    +
    3 PM
    +
    +
    +
    +
    +
    +
    +
    +
    4 PM
    +
    +
    +
    +
    +
    +
    +
    +
    5 PM
    +
    +
    +
    +
    +
    +
    +
    +
    6 PM
    +
    +
    +
    +
    +
    +
    +
    +
    7 PM
    +
    +
    +
    +
    +
    +
    +
    +
    8 PM
    +
    +
    +
    +
    +
    +
    +
    + +
    + 5 AM + Flight to vancouver + Toronto YYZ +
    +
    + 6 AM + Breakfast + Mel's Diner +
    +
    + 5 PM + 🎉 Party party 🎉 + We like to party! +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/overscroll-behavior.mdx b/src/pages/ZH/docs/overscroll-behavior.mdx new file mode 100644 index 000000000..64424acdc --- /dev/null +++ b/src/pages/ZH/docs/overscroll-behavior.mdx @@ -0,0 +1,72 @@ +--- +title: "Overscroll Behavior" +description: "Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area." +--- + +import utilities from 'utilities?plugin=overscrollBehavior' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Preventing parent overscrolling + +Use `overscroll-contain` to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +### Preventing overscroll bouncing + +Use `overscroll-none` to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +### Using the default overscroll behavior + +Use `overscroll-auto` to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/padding.mdx b/src/pages/ZH/docs/padding.mdx new file mode 100644 index 000000000..7256641b3 --- /dev/null +++ b/src/pages/ZH/docs/padding.mdx @@ -0,0 +1,168 @@ +--- +title: "Padding" +description: "Utilities for controlling an element's padding." +--- + +import utilities from 'utilities?plugin=padding' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Add padding to a single side + +Control the padding on one side of an element using the `p{t|r|b|l}-{size}` utilities. + +For example, `pt-6` would add `1.5rem` of padding to the top of an element, `pr-4` would add `1rem` of padding to the right of an element, `pb-8` would add `2rem` of padding to the bottom of an element, and `pl-2` would add `0.5rem` of padding to the left of an element. + + +
    +
    +
    +
    +
    +
    pt-6
    +
    +
    +
    +
    +
    pr-4
    +
    +
    +
    +
    +
    +
    +
    +
    pb-8
    +
    +
    +
    +
    +
    +
    +
    pl-2
    +
    +
    +
    +
    +     + +```html +
    pt-6
    +
    pr-4
    +
    pb-8
    +
    pl-2
    +``` + +### Add horizontal padding + +Control the horizontal padding of an element using the `px-{size}` utilities. + + +
    +
    +
    +
    px-8
    +
    +
    +
    +     + +```html +
    px-8
    +``` + +### Add vertical padding + +Control the vertical padding of an element using the `py-{size}` utilities. + + +
    +
    +
    +
    py-8
    +
    +
    +
    +     + +```html +
    py-8
    +``` + +### Add padding to all sides + +Control the padding on all sides of an element using the `p-{size}` utilities. + + +
    +
    +
    p-8
    +
    +
    +     + +```html +
    p-8
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's padding scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the padding scale by editing `theme.padding` or `theme.extend.padding` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ padding: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/place-content.mdx b/src/pages/ZH/docs/place-content.mdx new file mode 100644 index 000000000..de3953b1d --- /dev/null +++ b/src/pages/ZH/docs/place-content.mdx @@ -0,0 +1,207 @@ +--- +title: "Place Content" +description: "Utilities for controlling how content is justified and aligned at the same time." + +--- + +import utilities from 'utilities?plugin=placeContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Center + +Use `place-content-center` to pack items in the center of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Start + +Use `place-content-start` to pack items against the start of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-content-end` to to pack items against the end of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space between + +Use `place-content-between` to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space around + +Use `place-content-around` distribute grid items such that there is an equal amount of space around each row on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space evenly + +Use `place-content-evenly` to distribute grid items such that they are evenly spaced on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-content-stretch` to stretch grid items along their grid areas on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/place-items.mdx b/src/pages/ZH/docs/place-items.mdx new file mode 100644 index 000000000..3cd6ec514 --- /dev/null +++ b/src/pages/ZH/docs/place-items.mdx @@ -0,0 +1,184 @@ +--- +title: "Place Items" +description: "Utilities for controlling how items are justified and aligned at the same time." +--- + +import utilities from 'utilities?plugin=placeItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `place-items-start` to place grid items on the start of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-items-end` to place grid items on the end of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `place-items-center` to place grid items on the center of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-items-stretch` to stretch items along their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/place-self.mdx b/src/pages/ZH/docs/place-self.mdx new file mode 100644 index 000000000..12dbbfbbe --- /dev/null +++ b/src/pages/ZH/docs/place-self.mdx @@ -0,0 +1,160 @@ +--- +title: "Place Self" +description: "Utilities for controlling how an individual item is justified and aligned at the same time." +--- + +import utilities from 'utilities?plugin=placeSelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `place-self-auto` to align an item based on the value of the container's `place-items` property: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Start + +Use `place-self-start` to align an item to the start on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `place-self-center` to align an item at the center on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-self-end` to align an item to the end on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-self-stretch` to stretch an item on both axes: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/play-cdn.mdx b/src/pages/ZH/docs/play-cdn.mdx new file mode 100644 index 000000000..200b39949 --- /dev/null +++ b/src/pages/ZH/docs/play-cdn.mdx @@ -0,0 +1,6 @@ +--- +title: Play CDN +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +To do. \ No newline at end of file diff --git a/src/pages/ZH/docs/plugins.mdx b/src/pages/ZH/docs/plugins.mdx new file mode 100644 index 000000000..8acccf08c --- /dev/null +++ b/src/pages/ZH/docs/plugins.mdx @@ -0,0 +1,607 @@ +--- +title: Plugins +description: Extending Tailwind with reusable third-party plugins. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Plugins let you register new styles for Tailwind to inject into the user's stylesheet using JavaScript instead of CSS. + +To get started with your first plugin, import Tailwind's `plugin` function from `tailwindcss/plugin`. Then inside your `plugins` array, and call it with an anonymous function as the first argument. + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities, addComponents, e, prefix, config }) { + // Add your custom styles here + }), + ] +} +``` + +Plugin functions receive a single object argument that can be [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) into several helper functions: + +- `addUtilities()`, for registering new static utility styles +- `matchUtilities()`, for registering new dynamic utility styles +- `addComponents()`, for registering new static component styles +- `matchComponents()`, for registering new dynamic component styles +- `addBase()`, for registering new base styles +- `addVariant()`, for registering custom variants +- `theme()`, for looking up values in the user's theme configuration +- `config()`, for looking up values in the user's Tailwind configuration +- `corePlugins()`, for checking if a core plugin is enabled +- `e()`, for manually escaping strings meant to be used in class names + +--- + +## Official plugins + +We've developed a handful of official plugins for popular features that for one reason or another don't belong in core yet. + +Plugins can be added to your project by installing them via npm, then adding them to your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + // ... + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + require('@tailwindcss/line-clamp'), + require('@tailwindcss/aspect-ratio'), + ] +} +``` + + +### Typography + +The `@tailwindcss/typography` plugin adds a set of `prose` classes that can be used to quickly add sensible typographic styles to content blocks that come from sources like markdown or a CMS database. + +```html +
    +

    Garlic bread with cheese: What the science tells us

    +

    + For years parents have espoused the health benefits of eating garlic bread with cheese to their + children, with the food earning such an iconic status in our culture that kids will often dress + up as warm, cheesy loaf for Halloween. +

    +

    + But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases + springing up around the country. +

    + +
    +``` + +[Learn more about the typography plugin →](https://github.com/tailwindlabs/tailwindcss-typography) + +### Forms + +The `@tailwindcss/forms` plugin adds an opinionated form reset layer that makes it easier to style form elements with utility classes. + +```html + + + + + +``` + +[Learn more about the forms plugin →](https://github.com/tailwindlabs/tailwindcss-forms) + +### Line-clamp + +The `@tailwindcss/line-clamp` plugin adds `line-clamp-{lines}` classes you can use to truncate text to a fixed number of lines. + +```html +

    + Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis + dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate + possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit. +

    +``` + +[Learn more about the line-clamp plugin →](https://github.com/tailwindlabs/tailwindcss-line-clamp) + +### Aspect ratio + +The `@tailwindcss/aspect-ratio` plugin adds `aspect-w-{n}` and `aspect-h-{n}` classes that can be combined to give an element a fixed aspect ratio. + +```html +
    + +
    +``` + +[Learn more about the aspect ratio plugin →](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) + +--- + +## Adding utilities + +The `addUtilities` and `matchUtilities` functions allow you to register new styles in Tailwind's `utilities` layer. + +Like with the utilities Tailwind includes by default, utilities added by a plugin will only be included in the generated CSS if they are actually being used in the project. + +### Static utilities + +Use the `addUtilities` function to register simple static utilities that don't support user-provided values: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities }) { + addUtilities({ + '.content-auto': { + 'content-visibility': 'auto', + }, + '.content-hidden': { + 'content-visibility': 'hidden', + }, + '.content-visible': { + 'content-visibility': 'visible', + }, + }) + }) + ] +} +``` + +Learn more about to represent your styles in JavaScript in the [CSS-in-JS syntax](#css-in-js-syntax) reference. + +### Dynamic utilities + +Use the `matchUtilities` function to register utilities that map to values defined in the user's `theme` configuration: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + theme: { + tabSize: { + 1: '1', + 2: '2', + 4: '4', + 8: '8', + } + }, + plugins: [ + plugin(function({ matchUtilities, theme }) { + matchUtilities( + { + tab: (value) => ({ + tabSize: value + }), + }, + { values: theme('tabSize') } + ) + }) + ] +} +``` + +Utilities defined this way also support [arbitrary values](/docs/adding-custom-styles#using-arbitrary-values), which means you can use values not present in the theme using square bracket notation: + +```html +
    + +
    +``` + +### Prefix and important + +By default, plugin utilities automatically respect the user's [`prefix`](/docs/configuration/#prefix) and [`important`](/docs/configuration/#important) preferences. + +That means that given this Tailwind configuration: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', + important: true, + // ... +} +``` + +...the example plugin above would generate the following CSS: + +```css +.tw-content-auto { + content-visibility: auto !important; +} +.tw-content-hidden { + content-visibility: hidden !important; +} +.tw-content-visible { + content-visibility: visible !important; +} +``` + +### Using with modifiers + +Any custom utilities added using `addUtilities` can automatically be used with modifiers: + +```html +
    + +
    +``` + +Learn more in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +--- + +## Adding components + +The `addComponents` function allows you to register new styles in Tailwind's `components` layer. + +Use it to add more opinionated, complex classes like buttons, form controls, alerts, etc; the sort of pre-built components you often see in other frameworks that you might need to override with utility classes. + +To add new component styles from a plugin, call `addComponents`, passing in your styles using [CSS-in-JS syntax](#css-in-js-syntax): + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addComponents }) { + addComponents({ + '.btn': { + padding: '.5rem 1rem', + borderRadius: '.25rem', + fontWeight: '600', + }, + '.btn-blue': { + backgroundColor: '#3490dc', + color: '#fff', + '&:hover': { + backgroundColor: '#2779bd' + }, + }, + '.btn-red': { + backgroundColor: '#e3342f', + color: '#fff', + '&:hover': { + backgroundColor: '#cc1f1a' + }, + }, + }) + }) + ] +} +``` + +Like with other component classes in Tailwind, component classes added by a plugin will only be included in the generated CSS if they are actually being used in the project. + +### Prefix and important + +By default, component classes automatically respect the user's `prefix` preference, but _they are not affected_ by the user's `important` preference. + +That means that given this Tailwind configuration: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', + important: true, + // ... +} +``` + +...the example plugin above would generate the following CSS: + +```css +.tw-btn { + padding: .5rem 1rem; + border-radius: .25rem; + font-weight: 600; +} +.tw-btn-blue { + background-color: #3490dc; + color: #fff; +} +.tw-btn-blue:hover { + background-color: #2779bd; +} +.tw-btn-red { + background-color: #e3342f; + color: #fff; +} +.tw-btn-red:hover { + background-color: #cc1f1a; +} +``` + +Although there's rarely a good reason to make component declarations important, if you really need to do it you can always add `!important` manually: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addComponents }) { + addComponents({ + '.btn': { + padding: '.5rem 1rem !important', + borderRadius: '.25rem !important', + fontWeight: '600 !important', + }, + // ... + }) + }) + ] +} +``` + +All classes in a selector will be prefixed by default, so if you add a more complex style like: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + prefix: 'tw-', + plugins: [ + plugin(function({ addComponents }) { + const components = { + // ... + '.navbar-inverse a.nav-link': { + color: '#fff', + } + } + + addComponents(components) + }) + ] +} +``` + +...the following CSS would be generated: + +```css +.tw-navbar-inverse a.tw-nav-link { + color: #fff; +} +``` + +### Using with modifiers + +Any component classes added using `addComponents` can automatically be used with modifiers: + +```html +
    + +
    +``` + +Learn more in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +--- + +## Adding base styles + +The `addBase` function allows you to register new styles in Tailwind's `base` layer. Use it to add things like base typography styles, opinionated global resets, or `@font-face` rules. + +To add new base styles from a plugin, call `addBase`, passing in your styles using [CSS-in-JS syntax](#css-in-js-syntax): + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addBase, theme }) { + addBase({ + 'h1': { fontSize: theme('fontSize.2xl') }, + 'h2': { fontSize: theme('fontSize.xl') }, + 'h3': { fontSize: theme('fontSize.lg') }, + }) + }) + ] +} +``` + +Since base styles are meant to target bare selectors like `div` or `h1`, they do not respect the user's `prefix` or `important` configuration. + +--- + +## Adding variants + +The `addVariant` function allows you to register your own custom [modifiers](/docs/hover-focus-and-other-states) that can be used just like the built-in hover, focus, active, etc. variants. + +To add a new variant, call the `addVariant` function, passing in the name of your custom variant, and a format string that represents how the selector should be modified. + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + // ... + plugins: [ + plugin(function({ addVariant }) { + addVariant('optional', '&:optional') + addVariant('hocus', ['&:hover', '&:focus']) + addVariant('supports-grid', '@supports (display: grid)') + }) + ] +} +``` + +The first argument is the modifier name that users will use in their HTML, so the above example would make it possible to write classes like these: + +```html +
    + + +
    +``` + +--- + +## Exposing options + +Sometimes it makes sense for a plugin to be configurable in a way that doesn't really belong under `theme`, like perhaps you want users to be able to customize the class name your plugin uses. + +For cases like this, you can use `plugin.withOptions` to define a plugin that can be invoked with a configuration object. This API is similar to the regular `plugin` API, except each argument should be a function that receives the user's `options` and returns the value that you would have normally passed in using the regular API: + +```js ./plugins/markdown.js +const plugin = require('tailwindcss/plugin') + +module.exports = plugin.withOptions(function (options) { + return function({ addComponents }) { + const className = options.className ?? 'markdown' + + addComponents({ + [`.${className}`]: { + // ... + } + }) + } +}, function (options) { + return { + theme: { + markdown: { + // ... + } + }, + } +}) +``` + +The user would invoke your plugin passing along their options when registering it in their `plugins` configuration: + +```js tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('./plugins/markdown.js')({ + className: 'wysiwyg' + }) + ], +} +``` + +The user can also register plugins created this way normally without invoking them if they don't need to pass in any custom options: + +```js tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('./plugins/markdown.js') + ], +} +``` + +--- + +## CSS-in-JS syntax + +Tailwind's plugin system expect CSS rules written as JavaScript objects, using the same sort of syntax you might recognize from CSS-in-JS libraries like [Emotion](https://emotion.sh/docs/object-styles), powered by [postcss-js](https://github.com/postcss/postcss-js) under-the-hood. + +Consider this simple CSS rule: + +```css +.card { + background-color: #fff; + border-radius: .25rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} +``` + +Translating this to a CSS-in-JS object would look like this: + +```js +addComponents({ + '.card': { + 'background-color': '#fff', + 'border-radius': '.25rem', + 'box-shadow': '0 2px 4px rgba(0,0,0,0.2)', + } +}) +``` + +For convenience, property names can also be written in camelCase and will be automatically translated to dash-case: + +```js +addComponents({ + '.card': { + backgroundColor: '#fff', + borderRadius: '.25rem', + boxShadow: '0 2px 4px rgba(0,0,0,0.2)', + } +}) +``` + +Nesting is also supported (powered by [postcss-nested](https://github.com/postcss/postcss-nested)), using the same syntax you might be familiar with from Sass or Less: + +```js +addComponents({ + '.card': { + backgroundColor: '#fff', + borderRadius: '.25rem', + boxShadow: '0 2px 4px rgba(0,0,0,0.2)', + '&:hover': { + boxShadow: '0 10px 15px rgba(0,0,0,0.2)', + }, + '@media (min-width: 500px)': { + borderRadius: '.5rem', + } + } +}) +``` + +Multiple rules can be defined in the same object: + +```js +addComponents({ + '.btn': { + padding: '.5rem 1rem', + borderRadius: '.25rem', + fontWeight: '600', + }, + '.btn-blue': { + backgroundColor: '#3490dc', + color: '#fff', + '&:hover': { + backgroundColor: '#2779bd' + }, + }, + '.btn-red': { + backgroundColor: '#e3342f', + color: '#fff', + '&:hover': { + backgroundColor: '#cc1f1a' + }, + }, +}) +``` + +...or as an array of objects in case you need to repeat the same key: + +```js +addComponents([ + { + '@media (min-width: 500px)': { + // ... + } + }, + { + '@media (min-width: 500px)': { + // ... + } + }, + { + '@media (min-width: 500px)': { + // ... + } + }, +]) +``` \ No newline at end of file diff --git a/src/pages/ZH/docs/pointer-events.mdx b/src/pages/ZH/docs/pointer-events.mdx new file mode 100644 index 000000000..c6691e24d --- /dev/null +++ b/src/pages/ZH/docs/pointer-events.mdx @@ -0,0 +1,76 @@ +--- +title: "Pointer Events" +description: "Utilities for controlling whether an element responds to pointer events." +--- + +import utilities from 'utilities?plugin=pointerEvents' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling pointer event behavior + +Use `pointer-events-auto` to revert to the default browser behavior for pointer events (like `:hover` and `click`). + +Use `pointer-events-none` to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target. + + +
    +
    +

    pointer-events-auto

    +
    +
    + + + +
    + +
    +
    +
    +

    pointer-events-none

    +
    +
    + + + +
    + +
    +
    +
    +     + +```html +
    +
    + + + +
    + +
    + +
    +
    + + + +
    + +
    +``` + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/position.mdx b/src/pages/ZH/docs/position.mdx new file mode 100644 index 000000000..ac5b3a9af --- /dev/null +++ b/src/pages/ZH/docs/position.mdx @@ -0,0 +1,303 @@ +--- +title: "Position" +description: "Utilities for controlling how an element is positioned in the DOM." +--- + +import utilities from 'utilities?plugin=position' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Statically positioning elements + +Use `static` to position an element according to the normal flow of the document. + +Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children. + + +
    +
    +
    +

    Static parent

    +
    +

    Absolute child

    +
    +
    +
    +
    +     + +```html +
    +

    Static parent

    +
    +

    Absolute child

    +
    +
    +``` + +### Relatively positioning elements + +Use `relative` to position an element according to the normal flow of the document. + +Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    +

    Relative parent

    +
    +

    Absolute child

    +
    +
    +
    +
    +     + +```html +
    +

    Relative parent

    +
    +

    Absolute child

    +
    +
    +``` + +### Absolutely positioning elements + +Use `absolute` to position an element *outside* of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist. + +Offsets are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children. + + +
    +
    +

    With static positioning

    +
    +
    +

    Relative parent

    +
    +

    Static parent

    +
    +
    +

    Static child

    +
    +
    +

    Static sibling

    +
    +
    +
    +
    +
    +
    +
    +

    With absolute positioning

    +
    +
    +

    Relative parent

    +
    +

    Static parent

    +
    +
    +

    Absolute child

    +
    +
    +

    Static sibling

    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +

    Static child

    +

    Static sibling

    + +

    Absolute child

    +

    Static sibling

    +
    +``` + +### Fixed positioning elements + +Use `fixed` to position an element relative to the browser window. + +Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    Contacts
    +
    +
    + + Andrew Alfred +
    +
    + + Debra Houston +
    +
    + + Jane White +
    +
    + + Ray Flint +
    +
    + + Mindy Albrect +
    +
    + + David Arnold +
    +
    +
    +
    +     + +```html +
    +
    Contacts
    +
    +
    + + Andrew Alfred +
    +
    + + Debra Houston +
    + +
    +
    +``` + +### Sticky positioning elements + +Use `sticky` to position an element as `relative` until it crosses a specified threshold, then treat it as fixed until its parent is off screen. + +Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    +
    A
    +
    +
    + + Andrew Alfred +
    +
    + + Aisha Houston +
    +
    + + Anna White +
    +
    + + Andy Flint +
    +
    +
    +
    +
    B
    +
    +
    + + Bob Alfred +
    +
    + + Bianca Houston +
    +
    + + Brianna White +
    +
    + + Bert Flint +
    +
    +
    +
    +
    C
    +
    +
    + + Colton Alfred +
    +
    + + Cynthia Houston +
    +
    + + Cheyenne White +
    +
    + + Charlie Flint +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    A
    +
    +
    + + Andrew Alfred +
    +
    + + Aisha Houston +
    + +
    +
    +
    +
    B
    +
    +
    + + Bob Alfred +
    + +
    +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/preflight.mdx b/src/pages/ZH/docs/preflight.mdx new file mode 100644 index 000000000..0db2dab9a --- /dev/null +++ b/src/pages/ZH/docs/preflight.mdx @@ -0,0 +1,236 @@ +--- +title: Preflight +description: An opinionated set of base styles for Tailwind projects. +--- + +import { Heading } from '@/components/Heading' +import { ConfigSample } from '@/components/ConfigSample' + +## + +Built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize), Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system. + +Tailwind automatically injects these styles when you include `@tailwind base` in your CSS: + +```css +@tailwind base; /* Preflight will be injected here */ + +@tailwind components; + +@tailwind utilities; +``` + +While most of the styles in Preflight are meant to go unnoticed — they simply make things behave more like you'd expect them to — some are more opinionated and can be surprising when you first encounter them. + +For a complete reference of all the styles applied by Preflight, [see the stylesheet](https://unpkg.com/tailwindcss@^2/dist/base.css). + +--- + +## Default margins are removed + +Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc. + +```css +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} +``` + +This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale. + +--- + +## Headings are unstyled + +All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text. + +```css +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} +``` + +The reason for this is two-fold: + +- **It helps you avoid accidentally deviating from your type scale**. By default, the browsers assigns sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale. +- **In UI development, headings should often be visually de-emphasized**. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately. + +You can always add default header styles to your project by [adding your own base styles](/docs/adding-base-styles). + +If you'd like to selectively introduce sensible default heading styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](/docs/typography-plugin/). + +--- + +## Lists are unstyled + +Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding. + +```css +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} +``` + +If you'd like to style a list, you can do so using the [list-style-type](/docs/list-style-type) and [list-style-position](/docs/list-style-position) utilities: + +```html +
      +
    • One
      • +
    • Two
      • +
    • Three
      • +
    +``` + +You can always add default list styles to your project by [adding your own base styles](/docs/adding-base-styles). + +If you'd like to selectively introduce default list styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](/docs/typography-plugin/). + +### Accessibility considerations + +Unstyled lists are [not announced as lists by VoiceOver](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/). If your content is truly a list but you would like to keep it unstyled, [add a "list" role](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) to the element: + +```html +
      +
    • One
      • +
    • Two
      • +
    • Three
      • +
    +``` + +--- + +## Images are block-level + +Images and other replaced elements (like `svg`, `video`, `canvas`, and others) are `display: block` by default. + +```css +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} +``` + +This helps to avoid unexpected alignment issues that you often run into using the browser default of `display: inline`. + +If you ever need to make one of these elements `inline` instead of `block`, simply use the `inline` utility: + +```html +... +``` + +--- + +## Border styles are reset globally + +In order to make it easy to add a border by simply adding the `border` class, Tailwind overrides the default border styles for all elements with the following rules: + +```css +*, +::before, +::after { + border-width: 0; + border-style: solid; + border-color: theme('borderColor.DEFAULT', currentColor); +} +``` + +Since the `border` class only sets the `border-width` property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color. + +This can cause some unexpected results when integrating certain third-party libraries, like [Google maps](https://github.com/tailwindlabs/tailwindcss/issues/484) for example. + +When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS: + +```css +.google-map * { + border-style: none; +} +``` + +--- + +## Buttons have a default outline + +To ensure that we provide accessible styles out of the box, we made sure +that buttons have a default outline. You can of course override this by +applying `focus:ring` or similar utilities to your buttons. + +```css +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} +``` + +--- + +## Extending Preflight + +If you'd like to add your own base styles on top of Preflight, simply add them to your CSS within a `@layer base` directive: + +```css +@tailwind base; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } + h3 { + @apply text-lg; + } + a { + @apply text-blue-600 underline; + } +} + +@tailwind components; + +@tailwind utilities; +``` + +Learn more in the [adding base styles documentation](/docs/adding-base-styles). + +--- + +## Disabling Preflight + +If you'd like to completely disable Preflight — perhaps because you're integrating Tailwind into an existing project or because you'd like to provide your own base styles — all you need to do is set `preflight` to `false` in the `corePlugins` section of your `tailwind.config.js` file: + + +```diff-js tailwind.config.js + module.exports = { ++ corePlugins: { ++ preflight: false, ++ } + } +``` diff --git a/src/pages/ZH/docs/presets.mdx b/src/pages/ZH/docs/presets.mdx new file mode 100644 index 000000000..505f70e7d --- /dev/null +++ b/src/pages/ZH/docs/presets.mdx @@ -0,0 +1,260 @@ +--- +title: Presets +description: Creating your own reusable configuration presets. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { ThemeReference } from '@/components/ThemeReference' + +By default, any configuration you add in your own `tailwind.config.js` file is intelligently merged with the [default configuration](https://unpkg.com/browse/tailwindcss@^2/stubs/defaultConfig.stub.js), with your own configuration acting as a set of overrides and extensions. + +The `presets` option lets you specify a _different_ configuration to use as your base, making it easy to package up a set of customizations that you'd like to reuse across projects. + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/tailwind-base') + ], + // ... +} +``` + +This can be very useful for teams that manage multiple Tailwind projects for the same brand where they want a single source of truth for colors, fonts, and other common customizations. + +--- + +## Creating a preset + +Presets are just regular Tailwind configuration objects, taking the exact same shape as the configuration you would add in your `tailwind.config.js` file. + +```js my-preset.js +// Example preset +module.exports = { + theme: { + colors: { + blue: { + light: '#85d7ff', + DEFAULT: '#1fb6ff', + dark: '#009eeb', + }, + pink: { + light: '#ff7ce5', + DEFAULT: '#ff49db', + dark: '#ff16d1', + }, + gray: { + darkest: '#1f2d3d', + dark: '#3c4858', + DEFAULT: '#c0ccda', + light: '#e0e6ed', + lightest: '#f9fafc', + } + }, + fontFamily: { + sans: ['Graphik', 'sans-serif'], + }, + extend: { + flexGrow: { + 2: '2', + 3: '3', + }, + zIndex: { + 60: '60', + 70: '70', + 80: '80', + 90: '90', + 100: '100', + }, + } + }, + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/aspect-ratio'), + ], +} +``` + +As you can see, presets can contain all of the configuration options you're used to, including theme overrides and extensions, adding plugins, configuring a prefix, and so on. Read about [how configurations are merged](#how-configurations-are-merged) for more details. + +Assuming this preset was saved at `./my-preset.js`, you would use it by adding it to the `tailwind.config.js` file in your actual project under the `presets` key: + +```js tailwind.config.js +module.exports = { + presets: [ + require('./my-preset.js') + ], + // Customizations specific to this project would go here + theme: { + extend: { + minHeight: { + 48: '12rem', + } + } + }, + variants: { + extend: { + backgroundColor: ['active'] + }, + }, +} +``` + +By default, presets themselves extend Tailwind's [default configuration](https://unpkg.com/browse/tailwindcss@^3/stubs/defaultConfig.stub.js) just like your own configuration would. If you'd like to create a preset that completely replaces the default configuration, include an empty `presets` key in the preset itself: + +```js +// Example preset +module.exports = { + presets: [], + theme: { + // ... + }, + plugins: [ + // ... + ], +} +``` + +For more information, read about [disabling the default configuration](#disabling-the-default-configuration). + +--- + +## Merging logic in-depth + +Project-specific configurations (those found in your `tailwind.config.js` file) are merged against presets the same way they are merged against the default configuration. + +The following options in `tailwind.config.js` simply **replace** the same option if present in a preset: + +- `purge` +- `darkMode` +- `prefix` +- `important` +- `variantOrder` +- `separator` + +The remaining options are each carefully merged in the way that makes the most sense for that option, explained in more detail below. + +### Theme + +The `theme` object is merged shallowly, with top-level keys in `tailwind.config.js` replacing the same top-level keys in any presets. The exception to this is the `extend` key, which is collected across all configurations and applied on top of the rest of the theme configuration. + +Learn more about how the `theme` option works in the [theme configuration documentation](/docs/theme). + +### Presets + +The `presets` array is merged across configurations, allowing presets to include their own presets, which can also include their own presets. + +### Plugins + +The `plugins` array is merged across configurations to make it possible for a preset to register plugins while also allowing you to add additional plugins at the project-level. + +This means it's not possible to disable a plugin that has been added by a preset. If you find yourself wanting to disable a plugin in a preset, it's a sign that you should probably remove that plugin from the preset and include it on a project-by-project basis instead, or [split your preset into two presets](#extending-multiple-presets). + +### Core plugins + +The `corePlugins` option behaves differently depending on whether you configure it as an object or as an array. + +If you configure `corePlugins` as an object, it is merged across configurations. + +```js my-preset.js +module.exports = { + // ... + corePlugins: { + float: false, + }, +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./my-preset.js'), + ], + // This configuration will be merged + corePlugins: { + cursor: false + } +} +``` + +If you configure `corePlugins` as an array, it replaces any `corePlugins` configuration provided by your configured preset(s). + +```js my-preset.js +module.exports = { + // ... + corePlugins: { + float: false, + }, +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./example-preset.js'), + ], + // This will replace the configuration in the preset + corePlugins: ['float', 'padding', 'margin'] +} +``` + +--- + +## Extending multiple presets + +The `presets` option is an array and can accept multiple presets. This is useful if you want to split your reusable customizations up into composable chunks that can be imported independently. + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/tailwind-colors'), + require('@acmecorp/tailwind-fonts'), + require('@acmecorp/tailwind-spacing'), + ] +} +``` + +When adding multiple presets, it's important to note that if they overlap in any way, they are resolved the same way your own customizations are resolved against a preset, and the last configuration wins. + +For example, if both of these configurations provided a custom color palette (and were not using `extend`), the color palette from `configuration-b` would be used: + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/configuration-a'), + require('@acmecorp/configuration-b'), + ] +} +``` + +--- + +## Disabling the default configuration + +If you'd like to completely disable the default configuration and start with no base configuration at all, set `presets` to an empty array: + +```js tailwind.config.js +module.exports = { + presets: [], + // ... +} +``` + +This will completely disable all of Tailwind's defaults, so no colors, font families, font sizes, spacing values, etc. will be generated at all. + +You can also do this from within a preset if you'd like your preset to provide a complete design system on its own that doesn't extend Tailwind's defaults: + +```js my-preset.js +module.exports = { + presets: [], + // ... +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./example-preset.js') + ], + // ... +} +``` diff --git a/src/pages/ZH/docs/resize.mdx b/src/pages/ZH/docs/resize.mdx new file mode 100644 index 000000000..51d1abc94 --- /dev/null +++ b/src/pages/ZH/docs/resize.mdx @@ -0,0 +1,81 @@ +--- +title: "Resize" +description: "Utilities for controlling how an element can be resized." +--- + +import utilities from 'utilities?plugin=resize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Resizing in all directions + +Use `resize` to make an element horizontally and vertically resizable. + + +
    + +
    +     + +```html + +``` + +### Resizing vertically + +Use `resize-y` to make an element vertically resizable. + + +
    + +
    +     + +```html + +``` + +### Resizing horizontally + +Use `resize-x` to make an element horizontally resizable. + + +
    + +
    +     + +```html + +``` + +### Preventing resizing + +Use `resize-none` to prevent an element from being resizable. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/responsive-design.mdx b/src/pages/ZH/docs/responsive-design.mdx new file mode 100644 index 000000000..042223581 --- /dev/null +++ b/src/pages/ZH/docs/responsive-design.mdx @@ -0,0 +1,128 @@ +--- +title: Responsive Design +description: Using responsive utility variants to build adaptive user interfaces. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML. + +There are five breakpoints by default, inspired by common device resolutions: + +| Breakpoint prefix | Minimum width | CSS | +| --- | --- | --- | +| `sm` | 640px | `@media (min-width: 640px) { ... }` | +| `md` | 768px | `@media (min-width: 768px) { ... }` | +| `lg` | 1024px | `@media (min-width: 1024px) { ... }` | +| `xl` | 1280px | `@media (min-width: 1280px) { ... }` | +| `2xl` | 1536px | `@media (min-width: 1536px) { ... }` | + +To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the `:` character: + +```html + + +``` + +This works for **every utility class in the framework**, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles. + +Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens *(resize your browser to see it in action)*: + + + + + +```html +
    +
    +
    + Man looking at item at a store +
    +
    +
    Case study
    + Finding customers for your new business +

    Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

    +
    +
    +
    +``` + +Here's how the example above works: + +- By default, the outer `div` is `display: block`, but by adding the `md:flex` utility, it becomes `display: flex` on medium screens and larger. +- When the parent is a flex container, we want to make sure the image never shrinks, so we've added `md:shrink-0` to prevent shrinking on medium screens and larger. Technically we could have just used `shrink-0` since it would do nothing on smaller screens, but since it only matters on `md` screens, it's a good idea to make that clear in the class name. +- On small screens the image is automatically full width by default. On medium screens and up, we've constrained the width to a fixed size and ensured the image is full height using `md:h-full md:w-48`. + +We've only used one breakpoint in this example, but you could easily customize this component at other sizes using the `sm`, `lg`, `xl`, or `2xl` responsive prefixes as well. + +--- + +## Mobile First + +By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap. + +What this means is that unprefixed utilities (like `uppercase`) take effect on all screen sizes, while prefixed utilities (like `md:uppercase`) only take effect at the specified breakpoint *and above*. + +### Targeting mobile screens + +Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the `sm:` prefixed version. Don't think of `sm:` as meaning "on small screens", think of it as "at the small *breakpoint*". + +Don't use sm: to target mobile devices + +```html + +
    +``` + +Use unprefixed utilities to target mobile, and override them at larger breakpoints + +```html + +
    +``` + +For this reason, it's often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for `sm` screens, followed by `md` screens, etc. + +### Targeting a single breakpoint + +Tailwind's breakpoints only include a `min-width` and don't include a `max-width`, which means any utilities you add at a smaller breakpoint will also be applied at larger breakpoints. + +If you'd like to apply a utility at one breakpoint only, the solution is to *undo* that utility at larger sizes by adding another utility that counteracts it. + +Here is an example where the background color is red at the `md` breakpoint, but green at every other breakpoint: + +```html +
    + +
    +``` + +Notice that **we did not** have to specify a background color for the `sm` breakpoint or the `xl` breakpoint — you only need to specify when a utility should *start* taking effect, not when it should stop. + +--- + +## Customizing breakpoints + +You can completely customize your breakpoints in your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'tablet': '640px', + // => @media (min-width: 640px) { ... } + + 'laptop': '1024px', + // => @media (min-width: 1024px) { ... } + + 'desktop': '1280px', + // => @media (min-width: 1280px) { ... } + }, + } +} +``` + +Learn more in the [customizing breakpoints documentation](/docs/breakpoints). diff --git a/src/pages/ZH/docs/reusing-styles.mdx b/src/pages/ZH/docs/reusing-styles.mdx new file mode 100644 index 000000000..752d030ad --- /dev/null +++ b/src/pages/ZH/docs/reusing-styles.mdx @@ -0,0 +1,331 @@ +--- +title: Reusing Styles +description: Managing duplication and creating reusable abstractions. +--- + +import { TipGood, TipBad, TipInfo } from '@/components/Tip' +import { MultiCursorDemo } from '@/components/MultiCursorDemo' + +Tailwind encourages a [utility-first](/docs/utility-first) workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. + +But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places. + +For example, in the template below you can see the utility classes for each avatar image are repeated six separate times: + + +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +     + +```html +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +``` + +Don't panic! In this guide, you'll learn about different strategies for reusing styles in your project, as well as best practices for when to employ each one. + +--- + +## Using editor and language features + +A lot of the time duplication like this isn't even a real problem because it's all together in one place, or doesn't even actually exist because you're iterating over an array of items and only writing the markup once. + +If the styles you need to reuse only need to be reused within a single file, multi-cursor editing and loops are the simplest way to manage any duplication. + +### Multi-cursor editing + +When duplication is localized to a group of elements in a single file, the easiest way to deal with it to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once: + + + +You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction. + +### Loops + +Before you assume you're going to need to extract a component or create a custom class for something, make sure you're _actually_ using it more than once in your template. + +A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop. + +For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project: + + +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +     + +```html +
    +
    +

    Contributors

    + 204 +
    +
    +** {#each contributors as user}** +** {user.handle}** +** {/each}** +
    +
    + + 198 others +
    +
    +``` + +You could even rewrite the navigation example using a loop or `map` if you preferred as well: + + +
    +
    + +
    +
    +     + +```jsx + +``` + +When elements are rendered in a loop like this, the actual class list is only written once so there's no actual duplication problem to solve. + +--- + +## Extracting components and partials + +If you need to reuse some styles across multiple files, the best strategy is to create a _component_ if you're using a front-end framework like React, Svelte, or Vue, or a _template partial_ if you're using a templating language like Blade, ERB, Twig, or Nunjucks. + + +
    +
    + Beach +
    +
    +
    Private Villa
    +
    + Relaxing All-Inclusive Resort in Cancun +
    +
    $299 USD per night
    +
    +
    +
    +
    +     + +```html VacationCard.vue + + + +``` + +Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place. + +### Compared to CSS abstractions + +Unless a component is a single HTML element, the information needed to define it can't be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS. + +Don't rely on CSS classes to extract complex components + + +
    +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +
    +     + +```html + +
    +
    + +
    +
    +

    ChitChat

    +

    You have a new message!

    +
    +
    + + +``` + +Even if you create classes for the different elements in a component like this, _you still have to duplicate the HTML every time you want to use this component_. Sure you can update the font-size for every instance in a single place, but what if you need to turn the title into a link? + +Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML _and_ the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too. + +Create a template partial or JavaScript component + + +
    +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +
    +     + +```jsx Notification.jsx +function Notification({ imageUrl, imageAlt, title, message }) { + return ( +
    +
    + {imageAlt} +
    +
    +
    {title}
    +

    {message}

    +
    +
    + ) +} +``` + +When you create components and template partials like this, there's no reason to use anything other than utility classes because you already have a single source of truth for the styles. + +--- + +## Extracting classes with @apply + +If you're using a traditional templating language like ERB or Twig, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like `btn`. + +While it's highly recommended that you create proper template partials for more complex components, you can use Tailwind's `@apply` directive to extract repeated utility patterns to custom CSS classes when a template partial feels heavy-handed. + +Here's what a `btn-primary` class might look like using `@apply` to compose it from existing utilities: + + +
    + +
    +     + +```html HTML + + + + + +``` + +
    + +```css 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; + } +} +``` + +Learn more about `@apply` and `@layer` in the [Functions & Directives](/docs/functions-and-directives#layer) documentation. + + +### Avoiding premature abstraction + +Whatever you do, **don't use @apply just to make things look "cleaner"**. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. + +If you start using `@apply` for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example: + +- **You have to think up class names all the time** — nothing will slow you down or drain your energy like coming up with a class name for something that doesn't deserve to be named. +- **You have to jump between multiple files to make changes** — which is a way bigger workflow killer than you'd think before co-locating everything together. +- **Changing styles is scarier** — CSS is global, are you _sure_ you can change the min-width value in that class without breaking something in another part of the site? +- **Your CSS bundle will be bigger** — oof. + +If you're going to use `@apply`, use it for very small, highly reusable things like buttons and form controls — and even then only if you're not using a framework like React where a component would be a better choice. diff --git a/src/pages/ZH/docs/ring-color.mdx b/src/pages/ZH/docs/ring-color.mdx new file mode 100644 index 000000000..75eedb4ab --- /dev/null +++ b/src/pages/ZH/docs/ring-color.mdx @@ -0,0 +1,83 @@ +--- +title: "Ring Color" +description: "Utilities for setting the color of outline rings." +--- + +import utilities from 'utilities?plugin=ringColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-ring-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-ring-opacity)', '') + }) + return properties + } +} + +## Basic usage + +### Setting the ring color + +Use the `ring-{color}` utilities to set the color of an [outline ring](/docs/ring-width). + + +
    + +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's background color using the color opacity modifier. + + +
    + +
    +     + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-offset-color.mdx b/src/pages/ZH/docs/ring-offset-color.mdx new file mode 100644 index 000000000..e396cc3ab --- /dev/null +++ b/src/pages/ZH/docs/ring-offset-color.mdx @@ -0,0 +1,79 @@ +--- +title: "Ring Offset Color" +description: "Utilities for setting the color of outline ring offsets." +--- + +import utilities from 'utilities?plugin=ringOffsetColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + properties['box-shadow'] = `0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow)` + return properties + } +} + + +## Basic usage + +### Setting the ring offset color + +Use the `ring-offset-{color}` utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren't actually possible in CSS. + + +
    +
    +

    ring-offset-purple-100

    + +
    +
    +     + +```html + +``` + + +### Changing the opacity + +Control the opacity of an element's ring offset color using the color opacity modifier. + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-offset-width.mdx b/src/pages/ZH/docs/ring-offset-width.mdx new file mode 100644 index 000000000..d5e0f4289 --- /dev/null +++ b/src/pages/ZH/docs/ring-offset-width.mdx @@ -0,0 +1,108 @@ +--- +title: "Ring Offset Width" +description: "Utilities for simulating an offset when adding outline rings." +--- + +import utilities from 'utilities?plugin=ringOffsetWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + properties['box-shadow'] = `0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow)` + return properties + } +} + + +## Basic usage + +### Setting the ring offset width + +Use the `ring-offset-{width}` utilities to simulate an offset by adding solid white box-shadow and increasing the thickness of the accompanying outline ring to accommodate the offset. + + +
    +
    +

    ring-offset-0

    + +
    +
    +

    ring-offset-2

    + +
    +
    +

    ring-offset-4

    + +
    +
    +     + +```html + + + +``` + +### Changing the offset color + +You can't actually offset a box-shadow in CSS, so we have to fake it using a solid color shadow that matches the parent background color. We use white by default, but if you are adding a ring offset over a different background color, you should use the `ring-offset-{color}` utilities to match the parent background color: + + +
    +
    +

    ring-offset-pink-500

    + +
    +
    +     + +```html + +``` + +For more information, see the [ring offset color](/docs/ring-offset-color) documentation. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +To customize which ring offset width utilities are generated, add your custom values under `ringOffsetWidth` key in the `theme` section of your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + ringOffsetWidth: { + '3': '3px', + '6': '6px', + '10': '10px', + } + } + } +} +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-width.mdx b/src/pages/ZH/docs/ring-width.mdx new file mode 100644 index 000000000..764749405 --- /dev/null +++ b/src/pages/ZH/docs/ring-width.mdx @@ -0,0 +1,143 @@ +--- +title: "Ring Width" +description: "Utilities for creating outline rings with box-shadows." +--- + +import utilities from 'utilities?plugin=ringWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + filterRules: ([selector]) => { + return selector.startsWith('.') + }, + transformProperties: ({ selector, properties }) => { + if (selector === '.ring-inset') { + return {'--tw-ring-inset': 'inset'} + } + delete properties['--tw-ring-inset'] + delete properties['--tw-ring-offset-width'] + delete properties['--tw-ring-offset-color'] + delete properties['--tw-ring-color'] + delete properties['--tw-ring-offset-shadow'] + delete properties['box-shadow'] + properties['box-shadow'] = properties['--tw-ring-shadow'] + delete properties['--tw-ring-shadow'] + return properties + }, + sort: (classes) => { + return [...classes].sort((a, b) => { + a = a === '.ring' ? '.ring-3' : a + b = b === '.ring' ? '.ring-3' : b + if (a < b) return -1 + if (b < a) return 1 + return 0 + }) + } +} + + +## Basic Usage + +### Adding a ring + +Use the `ring-{width}` utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems. + + +
    +
    +

    ring-2

    + +
    +
    +

    ring

    + +
    +
    +

    ring-4

    + +
    +
    +     + +```html + + + +``` + +Ring utilities compose gracefully with regular `shadow-{size}` utilities and can be combined on the same element. + +You can also control the color, opacity, and offset of rings using the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), and [ringOffsetWidth](/docs/ring-offset-width) utilities. + +### Focus rings + +The ring width utilities make it easy to use custom focus rings by adding `focus:` to the beginning of any `ring-{width}` utility. + + +
    + +
    +     + +```html + +``` + +The `focus` variant is enabled by default for the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), [ringOffsetWidth](/docs/ring-offset-width), and [ringOffsetColor](/docs/ring-offset-color) utilities as well. + +### Inset rings + +Use the `ring-inset` utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `ring-width` utilities. You can customize these values by editing `theme.ringWidth` or `theme.extend.ringWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ ringWidth: { ++ '10': '10px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/rotate.mdx b/src/pages/ZH/docs/rotate.mdx new file mode 100644 index 000000000..2acb8d547 --- /dev/null +++ b/src/pages/ZH/docs/rotate.mdx @@ -0,0 +1,142 @@ +--- +title: "Rotate" +description: "Utilities for rotating elements with transform." +--- + +import utilities from 'utilities?plugin=rotate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + transform: `rotate(${properties['--tw-rotate']})` + } + }, +} + +## Basic sage + +### Rotating an element + +Use the `rotate-{angle}` utilities to rotate an element. + + +
    +
    +
    +

    rotate-0

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-45

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-90

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-180

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + + +``` + +### Using negative values + +To use a negative rotate value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `rotate` utilities. You can customize these values by editing `theme.rotate` or `theme.extend.rotate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ rotate: { ++ '17': '17deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/saturate.mdx b/src/pages/ZH/docs/saturate.mdx new file mode 100644 index 000000000..15e181c38 --- /dev/null +++ b/src/pages/ZH/docs/saturate.mdx @@ -0,0 +1,118 @@ +--- +title: "Saturate" +description: "Utilities for applying saturation filters to an element." +--- + +import utilities from 'utilities?plugin=saturate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-saturate'], + } + }, +} + +## Basic usage + +### Changing element saturation + +Use the `saturate-{amount}` utilities to control an element's saturation. + + +
    +
    +
    +

    saturate-50

    +
    + +
    +
    +
    +
    +

    saturate-100

    +
    + +
    +
    +
    +
    +

    saturate-150

    +
    + +
    +
    +
    +
    +

    saturate-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `saturate` utilities. You can customize these values by editing `theme.saturate` or `theme.extend.saturate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ saturate: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scale.mdx b/src/pages/ZH/docs/scale.mdx new file mode 100644 index 000000000..869e56870 --- /dev/null +++ b/src/pages/ZH/docs/scale.mdx @@ -0,0 +1,133 @@ +--- +title: "Scale" +description: "Utilities for scaling elements with transform." +--- + +import utilities from 'utilities?plugin=scale' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: numbersFirst, + transformProperties: ({ properties }) => { + let x = properties['--tw-scale-x'] + let y = properties['--tw-scale-y'] + return { + transform: x && y ? `scale(${x})` : (x ? `scaleX(${x})` : `scaleY(${y})`) + } + }, +} + +## Basic usage + +### Scaling an element + +Use the `scale-{percentage}`, `scale-x-{percentage}`, and `scale-y-{percentage}` utilities to scale an element. + + +
    +
    +
    +

    scale-75

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    scale-100

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    scale-125

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +### Using negative values + +To use a negative scale value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `scale` utilities. You can customize these values by editing `theme.scale` or `theme.extend.scale` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scale: { ++ '175': '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/screen-readers.mdx b/src/pages/ZH/docs/screen-readers.mdx new file mode 100644 index 000000000..7c744af37 --- /dev/null +++ b/src/pages/ZH/docs/screen-readers.mdx @@ -0,0 +1,54 @@ +--- +title: "Screen Readers" +description: "Utilities for improving accessibility with screen readers." +--- + +import utilities from 'utilities?plugin=accessibility' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Screen-reader-only elements + +Use `sr-only` to hide an element visually without hiding it from screen readers: + +```html + + + Settings + +``` + +### Undoing screen-reader-only elements + +Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example: + +```html + + + Settings + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + + Skip to content + +``` + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/screens.mdx b/src/pages/ZH/docs/screens.mdx new file mode 100644 index 000000000..cc8aca2f7 --- /dev/null +++ b/src/pages/ZH/docs/screens.mdx @@ -0,0 +1,267 @@ +--- +title: Customizing Screens +shortTitle: Screens +description: Customizing the default breakpoints for your project. +--- + +import { Heading } from '@/components/Heading' + +## + +You define your project's breakpoints in the `theme.screens` section of your `tailwind.config.js` file. The keys become your [responsive modifiers](/docs/responsive-design) (like `md:text-center`), and the values are the `min-width` where that breakpoint should start. + +The default breakpoints are inspired by common device resolutions: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '640px', + // => @media (min-width: 640px) { ... } + + 'md': '768px', + // => @media (min-width: 768px) { ... } + + 'lg': '1024px', + // => @media (min-width: 1024px) { ... } + + 'xl': '1280px', + // => @media (min-width: 1280px) { ... } + + '2xl': '1536px', + // => @media (min-width: 1536px) { ... } + } + } +} +``` + +Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project. + +### Overriding the defaults + +To completely replace the default breakpoints, add your custom `screens` configuration directly under the `theme` key: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '576px', + // => @media (min-width: 576px) { ... } + + 'md': '960px', + // => @media (min-width: 960px) { ... } + + 'lg': '1440px', + // => @media (min-width: 1440px) { ... } + }, + } +} +``` + +Any default screens you haven't overridden (such as `xl` using the above example) will be removed and will not be available as screen modifiers. + +### Overriding a single screen + +To override a single screen size (like `lg`), add your custom `screens` value under the `theme.extend` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + 'lg': '992px', + // => @media (min-width: 1168px) { ... } + }, + }, + }, +} +``` + +This will replace the default `screens` value with the same name, without changing the order of your breakpoints. + +### Adding larger breakpoints + +The easiest way to add an additional larger breakpoint is using the `extend` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + '3xl': '1600px', + }, + }, + }, + variants: {}, + plugins: [], +} +``` + +This will add your custom screen to the end of the default breakpoint list. + +### Adding smaller breakpoints + +If you want to add an additional small breakpoint, you can't use `extend` because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. + +Instead, override the entire `screens` key, re-specifying the default breakpoints: + +```js tailwind.config.js +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + theme: { + screens: { + 'xs': '475px', + ...defaultTheme.screens, + }, + }, + variants: {}, + plugins: [], +} +``` + +We expose the default theme at `tailwindcss/defaultTheme` so you don't have to maintain the list of default breakpoints yourself. + +### Using custom screen names + +You can name your custom screens whatever you like, and are not limited to following the `sm`/`md`/`lg`/`xl`/`2xl` convention that Tailwind uses by default. + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'tablet': '640px', + // => @media (min-width: 640px) { ... } + + 'laptop': '1024px', + // => @media (min-width: 1024px) { ... } + + 'desktop': '1280px', + // => @media (min-width: 1280px) { ... } + }, + } +} +``` + +Your responsive modifiers will reflect these custom screen names, so using them in your HTML would now look like this: + +```html +
    + +
    +``` + +--- + +## Advanced configuration + +By default, breakpoints are min-width to encourage a [mobile-first](/docs/responsive-design#mobile-first) workflow. If you need more control over your media queries, you can also define them using an object syntax that lets you specify explicit min-width and max-width values. + +### Max-width breakpoints + +If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a `max` key: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + '2xl': {'max': '1535px'}, + // => @media (max-width: 1535px) { ... } + + 'xl': {'max': '1279px'}, + // => @media (max-width: 1279px) { ... } + + 'lg': {'max': '1023px'}, + // => @media (max-width: 1023px) { ... } + + 'md': {'max': '767px'}, + // => @media (max-width: 767px) { ... } + + 'sm': {'max': '639px'}, + // => @media (max-width: 639px) { ... } + } + } +} +``` + +Make sure to list max-width breakpoints in descending order so that they override each other as expected. + +### Fixed-range breakpoints + +If you want your breakpoints to specify both a `min-width` and a `max-width`, use the `min` and `max` keys together: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': {'min': '640px', 'max': '767px'}, + // => @media (min-width: 640px and max-width: 767px) { ... } + + 'md': {'min': '768px', 'max': '1023px'}, + // => @media (min-width: 768px and max-width: 1023px) { ... } + + 'lg': {'min': '1024px', 'max': '1279px'}, + // => @media (min-width: 1024px and max-width: 1279px) { ... } + + 'xl': {'min': '1280px', 'max': '1535px'}, + // => @media (min-width: 1280px and max-width: 1535px) { ... } + + '2xl': {'min': '1536px'}, + // => @media (min-width: 1536px) { ... } + }, + } +} +``` + +Unlike regular min-width or max-width breakpoints, breakpoints defined this way will only take effect when the viewport size is explicitly within the defined range. + +```html +
    + This text will be centered on medium screens, but revert back + to the default (left-aligned) at all other screen sizes. +
    +``` + +### Multi-range breakpoints + +Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges. + +For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '500px', + 'md': [ + // Sidebar appears at 768px, so revert to `sm:` styles between 768px + // and 868px, after which the main content area is wide enough again to + // apply the `md:` styles. + {'min': '668px', 'max': '767px'}, + {'min': '868px'} + ], + 'lg': '1100px', + 'xl': '1400px', + } + } +} +``` + +### Custom media queries + +If you want full control over the generated media query, use the `raw` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + 'tall': { 'raw': '(min-height: 800px)' }, + // => @media (min-height: 800px) { ... } + } + } + } +} +``` + +Media queries defined using the `raw` key will be output as-is, and the `min` and `max` keys will be ignored. diff --git a/src/pages/ZH/docs/scroll-behavior.mdx b/src/pages/ZH/docs/scroll-behavior.mdx new file mode 100644 index 000000000..9d8b25d1e --- /dev/null +++ b/src/pages/ZH/docs/scroll-behavior.mdx @@ -0,0 +1,36 @@ +--- +title: "Scroll Behavior" +description: "Utilities for controlling the scroll behavior of an element." +--- + +import utilities from 'utilities?plugin=scrollBehavior' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Adding smooth scrolling + +Use the `scroll-smooth` utilities to enable smooth scrolling within an element. + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-margin.mdx b/src/pages/ZH/docs/scroll-margin.mdx new file mode 100644 index 000000000..15b8014a3 --- /dev/null +++ b/src/pages/ZH/docs/scroll-margin.mdx @@ -0,0 +1,128 @@ +--- +title: "Scroll Margin" +description: "Utilities for controlling the scroll offset around items in a snap container." +--- + +import utilities from 'utilities?plugin=scrollMargin' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Setting the scroll margin + +Use the `scroll-m{side}-{size}` utilities to set the scroll offset around items within a snap container. + + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Using negative values + +To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's scroll margin scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '96': '24rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the scroll margin scale by editing `theme.scrollMargin` or `theme.extend.scrollMargin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scrollMargin: { ++ '96': '24rem', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scroll-padding.mdx b/src/pages/ZH/docs/scroll-padding.mdx new file mode 100644 index 000000000..88f08778b --- /dev/null +++ b/src/pages/ZH/docs/scroll-padding.mdx @@ -0,0 +1,114 @@ +--- +title: "Scroll Padding" +description: "Utilities for controlling an element's scroll offset within a snap container." +--- + +import utilities from 'utilities?plugin=scrollPadding' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Setting the scroll padding + +Use the `scroll-p{side}-{size}` utilities to set the scroll offset of an element within a snap container. + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's scroll padding scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '96': '24rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the scroll padding scale by editing `theme.scrollPadding` or `theme.extend.scrollPadding` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scrollPadding: { ++ '96': '24rem', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scroll-snap-align.mdx b/src/pages/ZH/docs/scroll-snap-align.mdx new file mode 100644 index 000000000..0d31904d4 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-align.mdx @@ -0,0 +1,207 @@ +--- +title: "Scroll Snap Align" +description: "Utilities for controlling the scroll snap alignment of an element." +--- + +import utilities from 'utilities?plugin=scrollSnapAlign' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Snapping to the center + +Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container. + + +
    + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Snapping to the start + +Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Snapping to the end + +Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-snap-stop.mdx b/src/pages/ZH/docs/scroll-snap-stop.mdx new file mode 100644 index 000000000..b00f4b504 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-stop.mdx @@ -0,0 +1,149 @@ +--- +title: "Scroll Snap Stop" +description: "Utilities for controlling whether you can skip past possible snap positions." +--- + +import utilities from 'utilities?plugin=scrollSnapStop' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Forcing snap position stops + +Use the `snap-always` utility together with the `snap-mandatory` utility to force a snap container to always stop on an element before the user can continue scrolling to the next item. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Skipping snap position stops + +Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-snap-type.mdx b/src/pages/ZH/docs/scroll-snap-type.mdx new file mode 100644 index 000000000..a11d13af2 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-type.mdx @@ -0,0 +1,207 @@ +--- +title: "Scroll Snap Type" +description: "Utilities for controlling how strictly snap points are enforced in a snap container." +--- + +import utilities from 'utilities?plugin=scrollSnapType' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Horizontal scroll snapping + +Use the `snap-x` utility to enable horizontal scroll snapping within an element. + +For scroll snapping to work, you need to also set the [scroll snap alignment](/docs/scroll-snap-align) on the children within the element. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Mandatory scroll snapping + +Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Proximity scroll snapping + +Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity. This is the browser default. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/sepia.mdx b/src/pages/ZH/docs/sepia.mdx new file mode 100644 index 000000000..3e110f13d --- /dev/null +++ b/src/pages/ZH/docs/sepia.mdx @@ -0,0 +1,98 @@ +--- +title: "Sepia" +description: "Utilities for applying sepia filters to an element." +--- + +import utilities from 'utilities?plugin=sepia' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-sepia'], + } + }, +} + +## Basic usage + +### Adding sepia filters + +Use the `sepia` and `sepia-0` utilities to control whether an element should be rendered as sepia or in full color. + + +
    +
    +
    +

    sepia-0

    +
    + +
    +
    +
    +
    +

    sepia

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `sepia` utilities. You can customize these values by editing `theme.sepia` or `theme.extend.sepia` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ sepia: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/skew.mdx b/src/pages/ZH/docs/skew.mdx new file mode 100644 index 000000000..9b3cc1696 --- /dev/null +++ b/src/pages/ZH/docs/skew.mdx @@ -0,0 +1,146 @@ +--- +title: "Skew" +description: "Utilities for skewing elements with transform." +--- + +import utilities from 'utilities?plugin=skew' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformProperties: ({ properties }) => { + let x = properties['--tw-skew-x'] + let y = properties['--tw-skew-y'] + return { + transform: `skew${x ? 'X' : 'Y'}(${x || y})` + } + }, +} + +## Basic usage + +### Skewing an element + +Use the `skew-x-{amount}` and `skew-y-{amount}` utilities to skew an element. + + +
    +
    +
    +

    skew-y-0

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-3

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-12

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + + +``` + +### Using negative values + +To use a negative skew value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `skew` utilities. You can customize these values by editing `theme.skew` or `theme.extend.skew` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ skew: { ++ '17': '17deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/space.mdx b/src/pages/ZH/docs/space.mdx new file mode 100644 index 000000000..881408082 --- /dev/null +++ b/src/pages/ZH/docs/space.mdx @@ -0,0 +1,186 @@ +--- +title: "Space Between" +description: "Utilities for controlling the space between child elements." +--- + +import utilities from 'utilities?plugin=space' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ properties }) => { + for (let prop in properties) { + if (prop.startsWith('--')) { + if (Object.keys(properties).length > 1) { + delete properties[prop] + } + } else { + properties[prop] = properties[prop].match(/([\d.]+[a-z]+) /)?.[1] || properties[prop] + } + } + // `right` and `bottom` margins are only used when + // "reverse" is enabled + delete properties['margin-right'] + delete properties['margin-bottom'] + return properties + }, +} + +## Basic usage + +### Add horizontal space between children + +Control the horizontal space between elements using the `space-x-{amount}` utilities. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Add vertical space between children + +Control the vertical space between elements using the `space-y-{amount}` utilities. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Reversing children order + +If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `space-x-reverse` or `space-y-reverse` utilities to ensure the space is added to the correct side of each element. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Using negative values + +To use a negative space value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +## Limitations + +These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order. + +For those situations, it's better to use the [gap utilities](https://tailwindcss.com/docs/gap) when possible, or add margin to every element with a matching negative margin on the parent: + +```html +
    +
    +
    +
    +
    +
    +
    +``` + +### Cannot be paired with divide utilities + +The `space-*` utilities are not designed to work together with the [divide utilities](https://tailwindcss.com/docs/divide-width). For those situations, consider adding margin/padding utilities to the children instead. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's space scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the space scale by editing `theme.space` or `theme.extend.space` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ space: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/stroke-width.mdx b/src/pages/ZH/docs/stroke-width.mdx new file mode 100644 index 000000000..ffbc33eef --- /dev/null +++ b/src/pages/ZH/docs/stroke-width.mdx @@ -0,0 +1,71 @@ +--- +title: "Stroke Width" +description: "Utilities for styling the stroke width of SVG elements." +--- + +import utilities from 'utilities?plugin=strokeWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stroke width + +Use the `stroke-{width}` utilities to set the stroke width of an SVG. + + +
    + + +
    +     + +```html + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes `stroke-width` utilities for creating basic grids with up to 6 equal width rows. You can customize these values by editing `theme.strokeWidth` or `theme.extend.strokeWidth` in your `tailwind.config.js` file. + +You have direct access to the `stroke-width` CSS property here so you can make your custom rows values as generic or as complicated and site-specific as you like. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ strokeWidth: { ++ '2': '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/stroke.mdx b/src/pages/ZH/docs/stroke.mdx new file mode 100644 index 000000000..9a84ef101 --- /dev/null +++ b/src/pages/ZH/docs/stroke.mdx @@ -0,0 +1,58 @@ +--- +title: "Stroke" +description: "Utilities for styling the stroke of SVG elements." +--- + +import utilities from 'utilities?plugin=stroke' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stroke color + +Use the `stroke-{color}` utilities to change the stroke color of an SVG. + + +
    + + + +
    +     + +```html + + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/table-layout.mdx b/src/pages/ZH/docs/table-layout.mdx new file mode 100644 index 000000000..967ab5e93 --- /dev/null +++ b/src/pages/ZH/docs/table-layout.mdx @@ -0,0 +1,154 @@ +--- +title: "Table Layout" +description: "Utilities for controlling the table layout algorithm." +--- + +import utilities from 'utilities?plugin=tableLayout' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `table-auto` to allow the table to automatically size columns to fit the contents of the cell. + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +``` + +### Fixed + +Use `table-fixed` to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table. + +You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst the columns without explicit width. + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/tailwind-cli.mdx b/src/pages/ZH/docs/tailwind-cli.mdx new file mode 100644 index 000000000..49e8ef787 --- /dev/null +++ b/src/pages/ZH/docs/tailwind-cli.mdx @@ -0,0 +1,8 @@ +--- +title: Tailwind CLI +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +Notes: + +- Using `npm-run-all` or `concurrently` to run alongside other build processes \ No newline at end of file diff --git a/src/pages/ZH/docs/text-align.mdx b/src/pages/ZH/docs/text-align.mdx new file mode 100644 index 000000000..5664ab308 --- /dev/null +++ b/src/pages/ZH/docs/text-align.mdx @@ -0,0 +1,85 @@ +--- +title: "Text Alignment" +shortTitle: Text Align +description: "Utilities for controlling the alignment of text." +--- + +import utilities from 'utilities?plugin=textAlign' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text alignment + +Control the text alignment of an element using the `.text-left`, `.text-center`, `.text-right`, and `.text-justify` utilities. + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-color.mdx b/src/pages/ZH/docs/text-color.mdx new file mode 100644 index 000000000..35e1210b5 --- /dev/null +++ b/src/pages/ZH/docs/text-color.mdx @@ -0,0 +1,111 @@ +--- +title: "Text Color" +description: "Utilities for controlling the text color of an element." +--- + +import utilities from 'utilities?plugin=textColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-text-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-text-opacity)', '') + }) + return properties + }, + preview: (css, { className }) => ( + +
    Aa
    + + ), +} + +## Basic usage + +### Setting the text color + +Control the text color of an element using the `text-{color}` utilities. + + +
    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +``` + +### Changing the opacity + +Control the opacity of an element's text color using the color opacity modifier. + + +
    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +``` + +     + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration-color.mdx b/src/pages/ZH/docs/text-decoration-color.mdx new file mode 100644 index 000000000..b4e3a3b3f --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-color.mdx @@ -0,0 +1,86 @@ +--- +title: "Text Decoration Color" +description: "Utilities for controlling the color of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration color + +Use the `decoration-{color}` utilities to change the color of an element's [text decoration](/docs/text-decoration). + + +
    +

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    +
    +     + +```html +
    +

    + I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at + My Company, Inc. + Outside of work, I like to watch + pod-racing and have light-saber fights. +

    +
    +``` + +### Changing the opacity + +Control the opacity of an element's text decoration color using the color opacity modifier. + + +
    +

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    +
    +     + +```html +
    +

    + I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at + My Company, Inc. + Outside of work, I like to watch + pod-racing and have light-saber fights. +

    +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration-style.mdx b/src/pages/ZH/docs/text-decoration-style.mdx new file mode 100644 index 000000000..b7b6ccb22 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-style.mdx @@ -0,0 +1,62 @@ +--- +title: "Text Decoration Style" +description: "Utilities for controlling the style of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationStyle' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration style + +Use the `decoration-{style}` utilities to change the style of an element's [text decoration](/docs/text-decoration). + + +
    +
    +
    decoration-solid
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-double
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-dotted
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-dashed
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-wavy
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-decoration-thickness.mdx b/src/pages/ZH/docs/text-decoration-thickness.mdx new file mode 100644 index 000000000..d65892280 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-thickness.mdx @@ -0,0 +1,82 @@ +--- +title: "Text Decoration Thickness" +description: "Utilities for controlling the thickness of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationThickness' +import { numbersLast } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersLast(classes), +} + +## Basic usage + +### Setting the text decoration thickness + +Use the `decoration-{width}` utilities to change the thickness of an element's [text decoration](/docs/text-decoration). + + +
    +
    +
    decoration-1
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-2
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-4
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `decoration-{width}` utilities by editing `theme.textDecorationThickness` or `theme.extend.textDecorationThickness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textDecorationThickness: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration.mdx b/src/pages/ZH/docs/text-decoration.mdx new file mode 100644 index 000000000..87d0529b2 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration.mdx @@ -0,0 +1,76 @@ +--- +title: "Text Decoration" +description: "Utilities for controlling the decoration of text." +--- + +import utilities from 'utilities?plugin=textDecoration' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration + +Control how text is decorated with the `underline`, `no-underline`, and `line-through` utilities. + + +
    +
    + underline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + overline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + line-through +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + no-underline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + Link with no underline +
    +     + +```html +Link +``` + +     + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-indent.mdx b/src/pages/ZH/docs/text-indent.mdx new file mode 100644 index 000000000..28c394c19 --- /dev/null +++ b/src/pages/ZH/docs/text-indent.mdx @@ -0,0 +1,105 @@ +--- +title: "Text Indent" +description: "Utilities for controlling the amount of empty space shown before text in a block." +--- + +import utilities from 'utilities?plugin=textIndent' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Adding a text indent + +Use the `indent-{width}` utilities to set the amount of empty space (indentation) that's shown before text in a block. + + +
    +

    + So I started to walk into the water. I won't lie to you boys, I was + terrified. But I pressed on, and as I made my way past the breakers + a strange calm came over me. I don't know if it was divine intervention + or the kinship of all living things but I tell you Jerry at that moment, + I was a marine biologist. +

    +
    +     + +```html +

    + So I started to walk into the water. I won't lie to you boys, I was + terrified. But I pressed on, and as I made my way past the breakers + a strange calm came over me. I don't know if it was divine intervention + or the kinship of all living things but I tell you Jerry at that moment, + I was a marine biologist. +

    +``` + +### Using negative values + +To use a negative text indent value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + So I started to walk into the water. I won't lie to... +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +The default text indent scale is based on the [default spacing scale](/docs/customizing-spacing#default-spacing-scale). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the text indent scale by editing `theme.textIndent` or `theme.extend.textIndent` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textIndent: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-overflow.mdx b/src/pages/ZH/docs/text-overflow.mdx new file mode 100644 index 000000000..5019be712 --- /dev/null +++ b/src/pages/ZH/docs/text-overflow.mdx @@ -0,0 +1,87 @@ +--- +title: "Text Overflow" +description: "Utilities for controlling text overflow in an element." +--- + +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'truncate': { + 'overflow': 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + }, + 'text-ellipsis': { 'text-overflow': 'ellipsis' }, + 'text-clip': { 'text-overflow': 'clip' }, + }, +} + +## Basic usage + +### Truncate + +Use `truncate` to truncate overflowing text with an ellipsis (…) if needed. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +### Ellipsis + +Use `text-ellipsis` to truncate overflowing text with an ellipsis (…) if needed. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +### Clip + +Use `text-clip` to truncate the text at the limit of the content area. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-transform.mdx b/src/pages/ZH/docs/text-transform.mdx new file mode 100644 index 000000000..292088019 --- /dev/null +++ b/src/pages/ZH/docs/text-transform.mdx @@ -0,0 +1,64 @@ +--- +title: "Text Transform" +description: "Utilities for controlling the transformation of text." +--- + +import utilities from 'utilities?plugin=textTransform' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Transforming text + +The `uppercase` and `lowercase` will uppercase and lowercase text respectively, whereas `capitalize` utility will convert text to title-case. The `normal-case` utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints. + + +
    +
    + normal-case +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + uppercase +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + lowercase +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + capitalize +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-underline-offset.mdx b/src/pages/ZH/docs/text-underline-offset.mdx new file mode 100644 index 000000000..f53918897 --- /dev/null +++ b/src/pages/ZH/docs/text-underline-offset.mdx @@ -0,0 +1,88 @@ +--- +title: "Text Underline Offset" +description: "Utilities for controlling the offset of a text underline." +--- + +import utilities from 'utilities?plugin=textUnderlineOffset' +import { numbersLast } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersLast(classes), +} + + +## Basic usage + +### Setting the underline offset + +Use the `underline-offset-{width}` utilities to change the offset of a text underline. + + +
    +
    +
    underline-offset-1
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-2
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-4
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-8
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `underline-offset-{width}` utilities by editing `theme.textUnderlineOffset` or `theme.extend.textUnderlineOffset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textUnderlineOffset: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/theme.mdx b/src/pages/ZH/docs/theme.mdx new file mode 100644 index 000000000..04043f197 --- /dev/null +++ b/src/pages/ZH/docs/theme.mdx @@ -0,0 +1,374 @@ +--- +title: Theme Configuration +shortTitle: Theme +description: Customizing the default theme for your project. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { ThemeReference } from '@/components/ThemeReference' + +The `theme` section of your `tailwind.config.js` file is where you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more. + +```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', + } + } + } +} +``` + +We provide a sensible [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js) with a very generous set of values to get you started, but don't be afraid to change it or extend it; you're encouraged to customize it as much as you need to fit the goals of your design. + +--- + +## Theme structure + +The `theme` object contains keys for `screens`, `colors`, and `spacing`, as well as a key for each customizable [core plugin](/docs/configuration#core-plugins). + +See the [theme configuration reference](#configuration-reference) or the [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7) for a complete list of theme options. + +### Screens + +The `screens` key allows you to customize the responsive breakpoints in your project. + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + } + } +} +``` + +To learn more, see the [breakpoint customization documentation](/docs/breakpoints). + +### Colors + +The `colors` key allows you to customize the global color palette for your project. + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + black: '#000', + white: '#fff', + gray: { + 100: '#f7fafc', + // ... + 900: '#1a202c', + }, + + // ... + } + } +} +``` + +By default, these colors are inherited by all color-related core plugins, like `backgroundColor`, `borderColor`, `textColor`, and others. + +To learn more, see the [color customization documentation](/docs/colors). + +### Spacing + +The `spacing` key allows you to customize the global spacing and sizing scale for your project. + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + px: '1px', + 0: '0', + 0.5: '0.125rem', + 1: '0.25rem', + 1.5: '0.375rem', + 2: '0.5rem', + 2.5: '0.625rem', + 3: '0.75rem', + 3.5: '0.875rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem', + 9: '2.25rem', + 10: '2.5rem', + 11: '2.75rem', + 12: '3rem', + 14: '3.5rem', + 16: '4rem', + 20: '5rem', + 24: '6rem', + 28: '7rem', + 32: '8rem', + 36: '9rem', + 40: '10rem', + 44: '11rem', + 48: '12rem', + 52: '13rem', + 56: '14rem', + 60: '15rem', + 64: '16rem', + 72: '18rem', + 80: '20rem', + 96: '24rem', + }, + } +} +``` + +By default, these values are inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `flex-basis`, `gap`, `inset`, `space`, `translate`, `scrollMargin`, `scrollPadding`, and `textIndent` core plugins. + +To learn more, see the [spacing customization documentation](/docs/customizing-spacing). + +### Core plugins + +The rest of the `theme` section is used to configure which values are available for each individual core plugin. + +For example, the `borderRadius` key lets you customize which border radius utilities will be generated: + +```js +module.exports = { + theme: { + borderRadius: { + 'none': '0', + 'sm': '.125rem', + DEFAULT: '.25rem', + 'lg': '.5rem', + 'full': '9999px', + }, + } +} +``` + +The keys determine the suffix for the generated classes, and the values determine the value of the actual CSS declaration. + +The example `borderRadius` configuration above would generate the following CSS classes: + +```css +.rounded-none { border-radius: 0 } +.rounded-sm { border-radius: .125rem } +.rounded { border-radius: .25rem } +.rounded-lg { border-radius: .5rem } +.rounded-full { border-radius: 9999px } +``` + +You'll notice that using a key of `DEFAULT` in the theme configuration created the class `rounded` with no suffix. This is a common convention in Tailwind and is supported by all core plugins. + +To learn more about customizing a specific core plugin, visit the documentation for that plugin. + +For a complete reference of available theme properties and their default values, [see the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/v1/stubs/defaultConfig.stub.js#L5). + +--- + +## Customizing the default theme + +Out of the box, your project will automatically inherit the values from [the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/v1/stubs/defaultConfig.stub.js#L5). If you would like to customize the default theme, you have a few different options depending on your goals. + +### Extending the default theme + +If you'd like to preserve the default values for a theme option but also add new values, add your extensions under the `extend` key in the `theme` section of your configuration file. + +For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the `screens` property: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + // Adds a new breakpoint in addition to the default breakpoints + screens: { + '3xl': '1600px', + } + } + } +} +``` + +### Overriding the default theme + +To override an option in the default theme, add your overrides directly under the `theme` section of your `tailwind.config.js`: + +```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', + } + } +} +``` + +This will completely replace Tailwind's default configuration for that key, so in the example above none of the default opacity utilities would be generated. + +Any keys you **do not** provide will be inherited from the default theme, so in the above example, the default theme configuration for things like colors, spacing, border-radius, background-position, etc. would be preserved. + +You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration: + +```js tailwind.config.js +module.exports = { + theme: { + opacity: { + '0': '0', + '20': '0.2', + '40': '0.4', + '60': '0.6', + '80': '0.8', + '100': '1', + }, + extend: { + screens: { + '3xl': '1600px', + } + } + } +} +``` + +### Referencing other values + +If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive an object that includes a `theme()` function that you can use to look up other values in your theme using dot notation. + +For example, you could generate `background-size` utilities for every value in your spacing scale by referencing `theme('spacing')` in your `backgroundSize` configuration: + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + // ... + }, + backgroundSize: ({ theme }) => { + auto: 'auto', + cover: 'cover', + contain: 'contain', + ...theme('spacing') + } + } +} +``` + +The `theme()` function attempts to find the value you are looking for from the fully merged theme object, so it can reference your own customizations as well as the default theme values. It also works recursively, so as long as there is a static value at the end of the chain it will be able to resolve the value you are looking for. + +Note that you can only use this kind of closure with top-level theme keys, not the keys inside of each section. + +You can't use functions for individual values + +```js tailwind.config.js +module.exports = { + theme: { + fill: { + gray: ({ theme }) => theme('colors.gray') + } + } +} +``` + +Use functions for top-level theme keys + +```js tailwind.config.js +module.exports = { + theme: { + fill: ({ theme }) => ({ + gray: theme('colors.gray') + }) + } +} +``` + +### Referencing the default theme + +If you'd like to reference a value in the default theme for any reason, you can import it from `tailwindcss/defaultTheme`. + +One example of where this is useful is if you'd like to add a font family to one of Tailwind's default font stacks: + +```js tailwind.config.js +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + theme: { + extend: { + fontFamily: { + sans: [ + 'Lato', + ...defaultTheme.fontFamily.sans, + ] + } + } + } +} +``` + +### Disabling an entire core plugin + +If you don't want to generate any classes for a certain core plugin, it's better to set that plugin to false in your `corePlugins` configuration than to provide an empty object for that key in your `theme` configuration. + +Don't assign an empty object in your theme configuration + +```js tailwind.config.js +module.exports = { + theme: { + opacity: {}, + } +} +``` + +Do disable the plugin in your corePlugins configuration + +```js tailwind.config.js +module.exports = { + corePlugins: { + opacity: false, + } +} +``` + +The end result is the same, but since many core plugins expose no configuration they can only be disabled using `corePlugins` anyways, so it's better to be consistent. + +--- + +## Configuration reference + +Except for `screens`, `colors`, and `spacing`, all of the keys in the `theme` object map to one of Tailwind's [core plugins](/docs/configuration#core-plugins). Since many plugins are responsible for CSS properties that only accept a static set of values (like `float` for example), note that not every plugin has a corresponding key in the `theme` object. + +All of these keys are also available under the `theme.extend` key to enable [extending the default theme](#extending-the-default-theme). + + diff --git a/src/pages/ZH/docs/top-right-bottom-left.mdx b/src/pages/ZH/docs/top-right-bottom-left.mdx new file mode 100644 index 000000000..c40664127 --- /dev/null +++ b/src/pages/ZH/docs/top-right-bottom-left.mdx @@ -0,0 +1,174 @@ +--- +title: "Top / Right / Bottom / Left" +description: "Utilities for controlling the placement of positioned elements." +--- + +import utilities from 'utilities?plugin=inset' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Placing a positioned element + +Use the `{top|right|bottom|left|inset}-0` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. + +Combined with Tailwind's padding and margin utilities, you'll probably find that these are all you need to precisely control absolutely positioned elements. + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    07
    +
    +
    +
    08
    +
    +
    +
    09
    +
    +
    +     + +```html + +
    +
    01
    +
    + + +
    +
    02
    +
    + + +
    +
    03
    +
    + + +
    +
    04
    +
    + + +
    +
    05
    +
    + + +
    +
    06
    +
    + + +
    +
    07
    +
    + + +
    +
    08
    +
    + + +
    +
    09
    +
    +``` + +### Using negative values + +To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value. + + +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides top/right/bottom/left/inset utilities for a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale), `auto`, `full` as well as some additional fraction values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '3px': '3px', ++ } + } + } + } +``` + +Alternatively, you can customize just the top/right/bottom/left/inset scale by editing `theme.inset` or `theme.extend.inset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ inset: { ++ '3px': '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/touch-action.mdx b/src/pages/ZH/docs/touch-action.mdx new file mode 100644 index 000000000..092c147c0 --- /dev/null +++ b/src/pages/ZH/docs/touch-action.mdx @@ -0,0 +1,87 @@ +--- +title: "Touch Action" +description: "Utilities for controlling how an element can be scrolled and zoomed on touchscreens." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.touch-auto': { 'touch-action': 'auto' }, + '.touch-none': { 'touch-action': 'none' }, + '.touch-pan-x': { 'touch-action': 'pan-x' }, + '.touch-pan-left': { 'touch-action': 'pan-left' }, + '.touch-pan-right': { 'touch-action': 'pan-right' }, + '.touch-pan-y': { 'touch-action': 'pan-y' }, + '.touch-pan-up': { 'touch-action': 'pan-up' }, + '.touch-pan-down': { 'touch-action': 'pan-down' }, + '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' }, + '.touch-manipulation': { 'touch-action': 'manipulation' }, + }, +} + + +## Basic usage + +### Setting the touch action + +Use the `touch-{action}` utilities to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens. + + +
    +
    +

    touch-auto

    +
    + +
    +
    +
    +

    touch-none

    +
    + +
    +
    +
    +

    touch-pan-x

    +
    + +
    +
    +
    +

    touch-pan-y

    +
    + +
    +
    +
    +     + + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/transform-origin.mdx b/src/pages/ZH/docs/transform-origin.mdx new file mode 100644 index 000000000..dfde42b48 --- /dev/null +++ b/src/pages/ZH/docs/transform-origin.mdx @@ -0,0 +1,104 @@ +--- +title: "Transform Origin" +description: "Utilities for specifying the origin for an element's transformations." +--- + +import utilities from 'utilities?plugin=transformOrigin' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing the transform origin + +Specify an element's transform origin using the `origin-{keyword}` utilities. + + +
    +
    +
    +

    origin-center

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    origin-top-left

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    origin-bottom

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides `transform-origin` utilities for all of the built-in browser keyword options. You can customize these values by editing `theme.transformOrigin` or `theme.extend.transformOrigin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transformOrigin: { ++ 'top-left-1/3-3/4': '33% 75%', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-delay.mdx b/src/pages/ZH/docs/transition-delay.mdx new file mode 100644 index 000000000..83d02ecd2 --- /dev/null +++ b/src/pages/ZH/docs/transition-delay.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Delay" +description: "Utilities for controlling the delay of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionDelay' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Delaying transitions + +Use the `delay-{amount}` utilities to control an element's transition-delay. + + +
    +
    +

    delay-150

    + +
    +
    +

    delay-300

    + +
    +
    +

    delay-700

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides eight general purpose transition-delay utilities. You can customize these values by editing `theme.transitionDelay` or `theme.extend.transitionDelay` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionDelay: { ++ '0': '0ms', ++ '2000': '2000ms', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-duration.mdx b/src/pages/ZH/docs/transition-duration.mdx new file mode 100644 index 000000000..2ba9c5879 --- /dev/null +++ b/src/pages/ZH/docs/transition-duration.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Duration" +description: "Utilities for controlling the duration of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionDuration' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing transition duration + +Use the `duration-{amount}` utilities to control an element's transition-duration. + + +
    +
    +

    duration-150

    + +
    +
    +

    duration-300

    + +
    +
    +

    duration-700

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides eight general purpose transition-duration utilities. You can customize these values by editing `theme.transitionDuration` or `theme.extend.transitionDuration` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionDuration: { ++ '0': '0ms', ++ '2000': '2000ms', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-property.mdx b/src/pages/ZH/docs/transition-property.mdx new file mode 100644 index 000000000..325393b13 --- /dev/null +++ b/src/pages/ZH/docs/transition-property.mdx @@ -0,0 +1,80 @@ +--- +title: "Transition Property" +description: "Utilities for controlling which CSS properties transition." +--- + +import utilities from 'utilities?plugin=transitionProperty' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling transitioned properties + +Use the `transition-{properties}` utilities to specify which properties should transition when they change. + + +
    + +
    +     + +```html + +``` + +### Prefers-reduced-motion + +For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants: + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides transition-property utilities for seven common property combinations. You can customize these values by editing `theme.transitionProperty` or `theme.extend.transitionProperty` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionProperty: { ++ 'height': 'height', ++ 'spacing': 'margin, padding', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-timing-function.mdx b/src/pages/ZH/docs/transition-timing-function.mdx new file mode 100644 index 000000000..7e71802d4 --- /dev/null +++ b/src/pages/ZH/docs/transition-timing-function.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Timing Function" +description: "Utilities for controlling the easing of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionTimingFunction' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling the easing curve + +Use the `ease-{timing}` utilities to control an element's easing curve. + + +
    +
    +

    ease-in

    + +
    +
    +

    ease-out

    + +
    +
    +

    ease-in-out

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four general purpose transition-timing-function utilities. You can customize these values by editing `theme.transitionTimingFunction` or `theme.extend.transitionTimingFunction` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionTimingFunction: { ++ 'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', ++ 'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/translate.mdx b/src/pages/ZH/docs/translate.mdx new file mode 100644 index 000000000..ca0549880 --- /dev/null +++ b/src/pages/ZH/docs/translate.mdx @@ -0,0 +1,147 @@ +--- +title: "Translate" +description: "Utilities for translating elements with transform." +--- + +import utilities from 'utilities?plugin=translate' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformProperties: ({ properties }) => { + let x = properties['--tw-translate-x'] + let y = properties['--tw-translate-y'] + return { + transform: `translate${x ? 'X' : 'Y'}(${x || y})` + } + }, +} + +## Basic usage + +### Translating an element + +Use the `translate-x-{amount}` and `translate-y-{amount}` utilities to translate an element. + + +
    +
    +
    +

    translate-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    -translate-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    translate-x-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +### Using negative values + +To use a negative translate value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides fixed value `translate` utilities that match the [default spacing scale](/docs/customizing-spacing), as well as 50% and 100% variations for translating relative to the element's size. You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '4.25': '17rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the translate scale by editing `theme.translate` or `theme.extend.translate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ translate: { ++ '4.25': '17rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/upgrade-guide.mdx b/src/pages/ZH/docs/upgrade-guide.mdx new file mode 100644 index 000000000..a6f1678a9 --- /dev/null +++ b/src/pages/ZH/docs/upgrade-guide.mdx @@ -0,0 +1,409 @@ +--- +title: "Upgrade Guide" +description: "Upgrading your Tailwind CSS projects from v2 to v3." +--- + +Tailwind CSS v3.0 is a major update to the framework with a brand new internal engine and as such includes a small number of breaking changes. + +We take stability very seriously and have worked hard to make any breaking changes as painless as possible. For most projects, upgrading to Tailwind CSS v3.0 should take less than 30 minutes. + +To learn more about what's new in Tailwind CSS v3.0, read the [Tailwind CSS v3.0 announcement](/blog/tailwindcss-v3) on our blog. + +--- + +## Upgrade packages + +Update Tailwind, as well as PostCSS and autoprefixer, using npm: + +```shell +npm install -D tailwindcss@latest postcss@latest autoprefixer@latest +``` + +Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can't upgrade to PostCSS 8, we recommend using [Tailwind CLI](/docs/installation) instead of installing Tailwind as a PostCSS plugin. + +### Official plugins + +All of our first-party plugins have been updated for compatibility with v3.0. + +If you're using any of our plugins, make sure to update them all to the latest version at the same time to avoid version constraint errors. + +```html +npm install -D tailwindcss@latest \ + **@tailwindcss/typography@latest** \ + **@tailwindcss/forms@latest** \ + **@tailwindcss/aspect-ratio@latest** \ + **@tailwindcss/line-clamp@latest** \ + postcss@latest \ + autoprefixer@latest +``` + +### Play CDN + +For Tailwind CSS v3.0, the CSS-based CDN build we've offered in the past has been replaced by the new [Play CDN](/docs/installation/play-cdn), which gives you the full power of the new engine right in the browser with no build step. + +To try it out, throw this ` + + + + + +``` + +The Play CDN is designed for development purposes only — compiling your own static CSS build is a much better choice in production. + +--- + +## Migrating to the JIT engine + +The new [Just-in-Time engine](/blog/just-in-time-the-next-generation-of-tailwind-css) we announced in March has replaced the classic engine in Tailwind CSS v3.0. + +The new engine generates the styles you need for your project on-demand, and might necessitate some small changes to your project depending on how you have Tailwind configured. + +If you were already opting in to `mode: 'jit'` in Tailwind CSS v2.x, you can safely remove that from your configuration in v3.0: + +```diff-js tailwind.config.js + module.exports = { +- mode: 'jit', + // ... + } +``` + +### Configure content sources + +Since Tailwind no longer uses PurgeCSS under the hood, we've renamed the `purge` option to `content` to better reflect what it's for: + +```diff-js tailwind.config.js + module.exports = { +- purge: [ ++ content: [ + // Example content paths... + './public/**/*.html', + './src/**/*.{js,jsx,ts,tsx,vue}', + ], + theme: { + // ... + } + // ... + } +``` + +If you weren't already using the `purge` option in your project, it's crucial that you configure your template paths now or your compiled CSS will be empty. + +Since we're not using PurgeCSS under the hood anymore, some of the advanced purge options have changed. See the new [content configuration](/docs/content-configuration) documentation for more information on advanced options. + +### Remove dark mode configuration + +The dark mode feature is now enabled using the `media` strategy by default, so you can remove this key entirely from your `tailwind.config.js` file, *unless* you're using the `class` strategy. + +```diff-js tailwind.config.js + module.exports = { +- darkMode: 'media', + // ... + } +``` + +You can also safely remove this key if it's currently set to `false`: + +```diff-js tailwind.config.js + module.exports = { +- darkMode: false, + // ... + } +``` + +### Remove variant configuration + +In Tailwind CSS v3.0, every variant is automatically available for every utility by default, so you can remove the `variants` section from your `tailwind.config.js` file: + +```diff-js tailwind.config.js + module.exports = { + // ... +- variants: { +- extend: { +- padding: ['hover'], +- } +- }, + } +``` + +### Replace @variants with @layer + +Since all variants are now enabled by default, you no longer need to explicity enable these for custom CSS using the `@variants` or `@responsive` directives. + +Instead, add any custom CSS to appropriate "layer" using the `@layer` directive: + +```diff-css +- @variants hover, focus { ++ @layer utilities { + .content-auto { + content-visibility: auto; + } + } +``` + +Any custom CSS added to one of Tailwind's layers will automatically support variants. + +See the documentation on [adding custom styles using CSS and @layer](/docs/adding-custom-styles#using-css-and-layer) for more information. + +### Automatic transforms and filters + +In Tailwind CSS v3.0, transform and filter utilities like `scale-50` and `brightness-75` will automatically take effect without needing to add the `transform`, `filter`, or `backdrop-filter` classes: + +```diff-html +-
    ++
    +``` + +While there's no harm in leaving them in your HTML, they can safely be removed. + +--- + +## Color palette changes + +Tailwind CSS v3.0 now includes every color from the extended color palette by default, including previously disabled colors like cyan, rose, fuchsia, and lime, and all five variations of gray. + +### Removed color aliases + +In v2.0, several of the default colors were actually aliases for the extended colors: + +| v2 Default | v2 Extended | +| --- | --- | +| `green` | `emerald` | +| `yellow` | `amber` | +| `purple` | `violet` | + +In v3.0, these colors use their extended names by default, so what was previously `bg-green-500` is now `bg-emerald-500`, and `bg-green-500` now refers to the green from the extended palette. + +If you're using these colors in your project, the simplest way to upgrade is to alias them back to their previous names in your `tailwind.config.js` file: + +```diff-js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + extend: { ++ colors: { ++ green: colors.emerald, ++ yellow: colors.amber, ++ purple: colors.violet, ++ } + }, + }, + // ... + } +``` + +If you are already using a custom color palette, this change doesn't impact you at all. + +### Renamed gray scales + +As part of enabling all of the extended colors by default, we've given the different gray shades shorter single-word names to make them more practical to use and make it less awkward for them to co-exist at the same time. + +| v2 Default | v2 Extended | v3 Unified | +| --- | --- | --- | +| N/A | `blueGray` | `slate` | +| `gray` | `coolGray` | `gray` | +| N/A | `gray` | `zinc` | +| N/A | `trueGray` | `neutral` | +| N/A | `warmGray` | `stone` | + +If you were referencing any of the extended grays, you should update your references to the new names, for example: + +```diff-js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + extend: { + colors: { +- gray: colors.trueGray, ++ gray: colors.neutral, + } + }, + }, + // ... + } +``` + +If you weren't referencing any of the grays from the extended color palette, this change doesn't impact you at all. + + +--- + +## Class name changes + +Some class names in Tailwind CSS v3.0 have changed to avoid naming collisions, improve the developer experience, or make it possible to support new features. + +Wherever possible we have preserved the old name as well so many of these changes are non-breaking, but you're encouraged to update to the new class names. + +### overflow-clip/ellipsis + +Those damn browser developers added a real `overflow: clip` property, so using `overflow-clip` for `text-overflow: clip` is a really bad idea now. + +We've renamed `overflow-clip` to `text-clip`, and renamed `overflow-ellipsis` to `text-ellipsis` to avoid the naming collision: + +```diff-html +-
    ++
    +``` + +This is extremely unlikely to affect anyone, as there are very few use-cases for `text-clip` and it's only really included for the sake of completion. + +### flex-grow/shrink + +We've added `grow-*` and `shrink-*` as aliases for `flex-grow-*` and `flex-shrink-*`: + +```diff-html +-
    ++
    +``` + +The old class names will always work but you're encouraged to update to the new ones. + +### outline-black/white + +Since browsers are finally starting to respect border radius when rendering outlines, we've added separate utilities for the `outline-style`, `outline-color`, `outline-width` and `outline-offset` properties. + +This means that `outline-white` and `outline-black` now only set the outline _color_, whereas in v2 they set the color, width, style, and offset. + +If you are using `outline-white` or `outline-black` in your project, you can bring back the old styles by adding the following custom CSS to your project: + +```css +@layer utilities { + .outline-black { + outline: 2px dotted black; + outline-offset: 2px; + } + + .outline-white { + outline: 2px dotted white; + outline-offset: 2px; + } +} +``` + +Alternatively, you can update any usage of them in your CSS with the following classes: + +```diff-html +-
    ++
    + +-
    ++
    +``` + + +### decoration-clone/slice + +We've added `box-decoration-clone` and `box-decoration-slice` as aliases for `decoration-clone` and `decoration-slice` to avoid confusion with all of the new `text-decoration` utilities that use the `decoration-` namespace: + +```diff-html +-
    ++
    + +-
    ++
    +``` + +The old class names will always work but you're encouraged to update to the new ones. + +--- + +## Other minor changes + +Tailwind CSS v3.0 necessitates a couple of other small breaking changes that are unlikely to affect many people, but have been captured here. + +### Separator cannot be a dash + +The dash (`-`) character cannot be used as a custom separator in v3.0 because of a parsing ambiguity it introduces in the engine. + +You'll have to switch to another character like `_` instead: + +```diff-js tailwind.config.js + module.exports = { + // ... +- separator: '-', ++ separator: '_', + } +``` + + +### Prefix cannot be a function + +Prior to Tailwind CSS v3.0, it was possible to define your class prefix as a function: + +```js tailwind.config.js +module.exports = { + // ... + prefix(selector) { + // ... + }, +} +``` + +This isn't possible in the new engine and we've had to remove support for this feature. + +Instead, use a static prefix that is the same for every class Tailwind generates: + +```js tailwind.config.js +module.exports = { + // ... + prefix: 'tw-', +} +``` + + +### File modifier order reversed + +Super minor change since v3.0.0-alpha.2 where the `file` modifier was introduced — if you were combining it with other modifiers like `hover` or `focus`, you'll need to flip the modifier order: + +```diff-html +- ++ +``` + +Learn more in the [ordering stacked modifiers](/docs/hover-focus-and-other-states#ordering-stacked-modifiers) documentation. + +### Base layer must be present + +In Tailwind CSS v3.0, the `@tailwind base` directive must be present for utilities like transforms, filters, and shadows to work as expected. + +If you were previously disabling Tailwind's base styles by not including this directive, you should add it back and disable `preflight` in your `corePlugins` configuration instead: + +```diff-css main.css ++ @tailwind base; + @tailwind components; + @tailwind utilities; +``` + +```diff-js tailwind.config.js + module.exports = { + // ... ++ corePlugins: { ++ preflight: false, ++ }, + } +``` + +This will disable Tailwind's global base styles without affecting utilities that rely on adding their own base styles to function correctly. + +### Screens layer has been renamed + +The `@tailwind screens` layer has been renamed to `@tailwind variants`: + +```diff-css main.css + /* ... */ +- @tailwind screens; ++ @tailwind variants; +``` + +I think you are more likely to be attacked by a shark while working at your desk than you are to be affected by this change. diff --git a/src/pages/ZH/docs/user-select.mdx b/src/pages/ZH/docs/user-select.mdx new file mode 100644 index 000000000..dea5ded14 --- /dev/null +++ b/src/pages/ZH/docs/user-select.mdx @@ -0,0 +1,97 @@ +--- +title: "User Select" +description: "Utilities for controlling whether the user can select text in an element." +--- + +import utilities from 'utilities?plugin=userSelect' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic uage + +### Disabling text selection + +Use `select-none` to prevent selecting text in an element and its children. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Allowing text selection + +Use `select-text` to allow selecting text in an element and its children. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Selecting all text in one click + +Use `select-all` to automatically select all the text in an element when a user clicks. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Using auto select behaviour + +Use `select-auto` to use the default browser behavior for selecting text. Useful for undoing other classes like `.select-none` at different breakpoints. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/using-with-preprocessors.mdx b/src/pages/ZH/docs/using-with-preprocessors.mdx new file mode 100644 index 000000000..ef2240a90 --- /dev/null +++ b/src/pages/ZH/docs/using-with-preprocessors.mdx @@ -0,0 +1,393 @@ +--- +title: Using with Preprocessors +description: A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +Since Tailwind is a PostCSS plugin, there's nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like [Autoprefixer](https://github.com/postcss/autoprefixer). + +It's important to note that **you don't need to use a preprocessor with Tailwind** — you typically write very little CSS on a Tailwind project anyways so using a preprocessor just isn't as beneficial as it would be in a project where you write a lot of custom CSS. + +This guide only exists as a reference for people who need to integrate Tailwind with a preprocessor for reasons outside of their control, not because it is a recommended practice. + +--- + +## Using PostCSS as your preprocessor + +If you're using Tailwind for a brand new project and don't need to integrate it with any existing Sass/Less/Stylus stylesheets, you should highly consider relying on other PostCSS plugins to add the preprocessor features you use instead of using a separate preprocessor. + +This has a few benefits: + +- **Your builds will be faster**. Since your CSS doesn't have to be parsed and processed by multiple tools, your CSS will compile much quicker using only PostCSS. +- **No quirks or workarounds.** Because Tailwind adds some new non-standard keywords to CSS (like `@tailwind`, `@apply`, `theme()`, etc.), you often have to write your CSS in annoying, unintuitive ways to get a preprocessor to give you the expected output. Working exclusively with PostCSS avoids this. + +For a fairly comprehensive list of available PostCSS plugins see the [PostCSS GitHub repository](https://github.com/postcss/postcss/blob/master/docs/plugins.md), but here are a few important ones we use on our own projects and can recommend. + +### Build-time imports + +One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing `@import` statements in advance, instead of in the browser. + +The canonical plugin for handling this with PostCSS is [postcss-import](https://github.com/postcss/postcss-import). + +To use it, install the plugin via npm: + +```shell +npm install postcss-import +``` + +Then add it as the very first plugin in your PostCSS configuration: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +One important thing to note about `postcss-import` is that it strictly adheres to the CSS spec and disallows `@import` statements anywhere except at the very top of a file. + +Won't work, `@import` statements must come first + +```css +/* components.css */ + +.btn { + @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; +} + +/* Will not work */ +@import "./components/card"; +``` + +The easiest solution to this problem is to never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files. + +Use separate files for imports and actual CSS + +```css +/* components.css */ +@import "./components/buttons.css"; +@import "./components/card.css"; +``` + +```css +/* components/buttons.css */ +.btn { + @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; +} +``` + +```css +/* components/card.css */ +.card { + @apply p-4 bg-white shadow rounded; +} +``` + +The place you are most likely to run into this situation is in your main CSS file that includes your `@tailwind` declarations. + +Won't work, `@import` statements must come first + +```css +@tailwind base; +@import "./custom-base-styles.css"; + +@tailwind components; +@import "./custom-components.css"; + +@tailwind utilities; +@import "./custom-utilities.css"; +``` + +You can solve this by creating separate files for each `@tailwind` declaration, and then importing those files in your main stylesheet. To make this easy, we provide separate files for each `@tailwind` declaration out of the box that you can import directly from `node_modules`. + +The `postcss-import` plugin is smart enough to look for files in the `node_modules` folder automatically, so you don't need to provide the entire path — `"tailwindcss/base"` for example is enough. + +Import our provided CSS files + +```css +@import "tailwindcss/base"; +@import "./custom-base-styles.css"; + +@import "tailwindcss/components"; +@import "./custom-components.css"; + +@import "tailwindcss/utilities"; +@import "./custom-utilities.css"; +``` + +### Nesting + +To add support for nested declarations, we recommend our bundled `tailwindcss/nesting` plugin, which is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`. + +It's included directly in the `tailwindcss` package itself, so to use it all you need to do is add it to your PostCSS configuration, somewhere before Tailwind: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting'), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](/docs/plugins#css-in-js-syntax). + +If you'd rather use [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin: + +```shell +npm install postcss-nesting +``` + +Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting')(require('postcss-nesting')), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself. + +Note that if you are using [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) in your project, you should make sure to disable nesting and let `tailwindcss/nesting` handle it for you instead: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting')(require('postcss-nesting')), + require('tailwindcss'), + require('postcss-preset-env')({ + features: { 'nesting-rules': false } + }), + ] +} +``` + +### Variables + +These days CSS variables (officially known as custom properties) have really good [browser support](https://caniuse.com/#search=css%20custom%20properties), so you don't need a preprocessor to use variables at all. + +```css +:root { + --theme-color: #52b3d0; +} + +/* ... */ + +.btn { + background-color: var(--theme-color); + /* ... */ +} +``` + +We use CSS variables extensively within Tailwind itself, so if you can use Tailwind, you can use native CSS variables. + +You may also find that most of the things you've used variables for in the past can be replaced with Tailwind's `theme()` function, which gives you access to all of your design tokens from your `tailwind.config.js` file directly in your CSS: + +```css +.btn { + background-color: theme('colors.blue.500'); + padding: theme('spacing.2') theme('spacing.4'); + /* ... */ +} +``` + +Learn more about the `theme()` function in our [functions and directives documentation](/docs/functions-and-directives#theme); + +### Vendor prefixes + +For automatically managing vendor prefixes in your CSS, you should use [Autoprefixer](https://github.com/postcss/autoprefixer). + +To use it, install it via npm: + +```shell +npm install autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +```js +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +--- + +## Using Sass, Less, or Stylus + +For the best development experience, we highly recommended that you [use PostCSS exclusively](#using-post-css-as-your-preprocessor), and that you don't use preprocessors like Sass or Less in your Tailwind projects. + +To use Tailwind with a preprocessing tool like Sass, Less, or Stylus, you'll need to add an additional build step to your project that lets you run your preprocessed CSS through PostCSS. If you're using Autoprefixer in your project, you already have something like this set up. + +See our documentation on [installing Tailwind as a PostCSS plugin](/docs/installation/using-postcss) to learn more about integrating Tailwind into your existing build process. + +The most important thing to understand about using Tailwind with a preprocessor is that **preprocessors like Sass, Less, and Stylus run separately, before Tailwind**. This means that you can't feed output from Tailwind's `theme()` function into a Sass color function for example, because the `theme()` function isn't actually evaluated until your Sass has been compiled to CSS and fed into PostCSS. + +Won't work, Sass is processed first + +```css +.alert { + background-color: darken(theme('colors.red.500'), 10%); +} +``` + +Aside from that, each preprocessor has its own quirk or two when used with Tailwind, which are outlined with workarounds below. + +### Sass + +When using Tailwind with Sass, using `!important` with `@apply` requires you to use interpolation to compile properly. + +Won't work, Sass complains about !important + +```css +.alert { + @apply bg-red-500 !important; +} +``` + +Use interpolation as a workaround + +```css +.alert { + @apply bg-red-500 #{!important}; +} +``` + +### Less + +When using Tailwind with Less, you cannot nest Tailwind's `@screen` directive. + +Won't work, Less doesn't realise it's a media query + +```css +.card { + @apply rounded-none; + + @screen sm { + @apply rounded-lg; + } +} +``` + +Instead, use a regular media query along with the `theme()` function to reference your screen sizes, or simply don't nest your `@screen` directives. + +Use a regular media query and theme() + +```css +.card { + @apply rounded-none; + + @media (min-width: theme('screens.sm')) { + @apply rounded-lg; + } +} +``` + +Use the @screen directive at the top-level + +```css +.card { + @apply rounded-none; +} +@screen sm { + .card { + @apply rounded-lg; + } +} +``` + +### Stylus + +When using Tailwind with Stylus, you can't use Tailwind's `@apply` feature without wrapping the entire CSS rule in `@css` so that Stylus treats it as literal CSS: + +Won't work, Stylus complains about @apply + +```css +.card { + @apply rounded-lg bg-white p-4 +} +``` + +Use @css to avoid processing as Stylus + +```css +@css { + .card { + @apply rounded-lg bg-white p-4 + } +} +``` + +This comes with a significant cost however, which is that **you cannot use any Stylus features inside a `@css` block**. + +Another option is to use the `theme()` function instead of `@apply`, and write out the actual CSS properties in long form: + +Use theme() instead of @apply + +```css +.card { + border-radius: theme('borderRadius.lg'); + background-color: theme('colors.white'); + padding: theme('spacing.4'); +} +``` + +In addition to this, Stylus doesn't support nesting the `@screen` directive (just like Less). + +Won't work, Stylus doesn't realise it's a media query + +```css +.card { + border-radius: 0; + + @screen sm { + border-radius: theme('borderRadius.lg'); + } +} +``` + +Instead, use a regular media query along with the `theme()` function to reference your screen sizes, or simply don't nest your `@screen` directives. + +Use a regular media query and theme() + +```css +.card { + border-radius: 0; + + @media (min-width: theme('screens.sm')) { + border-radius: theme('borderRadius.lg'); + } +} +``` + +Use the @screen directive at the top-level + +```css +.card { + border-radius: 0; +} +@screen sm { + .card { + border-radius: theme('borderRadius.lg'); + } +} +``` diff --git a/src/pages/ZH/docs/utility-first.mdx b/src/pages/ZH/docs/utility-first.mdx new file mode 100644 index 000000000..45a93b1b4 --- /dev/null +++ b/src/pages/ZH/docs/utility-first.mdx @@ -0,0 +1,229 @@ +--- +title: Utility-First Fundamentals +description: Building complex components from a constrained set of primitive utilities. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' +import { CodeSample } from '@/components/CodeSample' + +--- + +## + +Traditionally, whenever you need to style something on the web, you write CSS. + +Using a traditional approach where custom designs require custom CSS + + +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +     + +```html +
    +
    + +
    +
    +

    ChitChat

    +

    You have a new message!

    +
    +
    + + +``` + +With Tailwind, you style elements by applying pre-existing classes directly in your HTML. + +Using utility classes to build custom designs without writing CSS + + +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +     + +```html +
    +
    + ChitChat Logo +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +``` + +In the example above, we've used: + +- Tailwind's [flexbox](/docs/display#flex) and [padding](/docs/padding) utilities (`flex`, `shrink-0`, and `p-6`) to control the overall card layout +- The [max-width](/docs/max-width) and [margin](/docs/margin) utilities (`max-w-sm` and `mx-auto`) to constrain the card width and center it horizontally +- The [background color](/docs/background-color), [border radius](/docs/border-radius), and [box-shadow](/docs/box-shadow) utilities (`bg-white`, `rounded-xl`, and `shadow-lg`) to style the card's appearance +- The [width](/docs/width) and [height](/docs/height) utilities (`w-12` and `h-12`) to size the logo image +- The [space-between](/docs/space) utilities (`space-x-4`) to handle the spacing between the logo and the text +- The [font size](/docs/font-size), [text color](/docs/text-color), and [font-weight](/docs/font-weight) utilities (`text-xl`, `text-black`, `font-medium`, etc.) to style the card text + +This approach allows us to implement a completely custom component design without writing a single line of custom CSS. + +Now I know what you're thinking, _"this is an atrocity, what a horrible mess!"_ and you're right, it's kind of ugly. In fact it's just about impossible to think this is a good idea the first time you see it — **you have to actually try it**. + +But once you've actually built something this way, you'll quickly notice some really important benefits: + +- **You aren't wasting energy inventing class names**. No more adding silly class names like `sidebar-inner-wrapper` just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container. +- **Your CSS stops growing**. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS. +- **Making changes feels safer**. CSS is global and you never know what you're breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking. + +When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture. + +--- + +## Why not just use inline styles? + +A common reaction to this approach is wondering, "isn't this just inline styles?" and in some ways it is — you're applying styles directly to elements instead of assigning them a class name and then styling that class. + +But using utility classes has a few important advantages over inline styles: + +- **Designing with constraints**. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined [design system](/docs/theme), which makes it much easier to build visually consistent UIs. +- **Responsive design**. You can't use media queries in inline styles, but you can use Tailwind's [responsive utilities](/docs/responsive-design) to build fully responsive interfaces easily. +- **Hover, focus, and other states**. Inline styles can't target states like hover or focus, but Tailwind's [state variants](/docs/hover-focus-and-other-states) make it easy to style those states with utility classes. + +This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes: + + +
    + Woman's Face +
    +
    +

    + Erin Lindford +

    +

    + Product Engineer +

    +
    + +
    +
    +     + +```html +
    + Woman's Face +
    +
    +

    + Erin Lindford +

    +

    + Product Engineer +

    +
    + +
    +
    +``` + +--- + +## Maintainability concerns + +The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. + +This is easily solved by [extracting components](/docs/reusing-styles), usually as template partials or components. + +```html + + +``` + +You can also use Tailwind's `@apply` feature to create CSS abstractions around common utility patterns. + + +
    + +
    +     + +```html + + + + + + + +``` + +Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success. + +If you'd like to hear about others' experiences with this approach, check out the following resources: + +- [By The Numbers: A Year and a Half with Atomic CSS](https://medium.com/@johnpolacek/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4) by John Polacek +- [Building a Scalable CSS Architecture](https://blog.algolia.com/redesigning-our-docs-part-4-building-a-scalable-css-architecture/) by Sarah Dayan of Algolia +- [No, Utility Classes Aren't the Same As Inline Styles](https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles) by Sarah Dayan of Algolia +- [Diana Mounter on using utility classes at GitHub](http://www.fullstackradio.com/75), a podcast interview + +For even more, check out [The Case for Atomic/Utility-First CSS](https://johnpolacek.github.io/the-case-for-atomic-css/), curated by [John Polacek](https://twitter.com/johnpolacek). diff --git a/src/pages/ZH/docs/vertical-align.mdx b/src/pages/ZH/docs/vertical-align.mdx new file mode 100644 index 000000000..a5d65ab2a --- /dev/null +++ b/src/pages/ZH/docs/vertical-align.mdx @@ -0,0 +1,146 @@ +--- +title: "Vertical Alignment" +shortTitle: Vertical Align +description: "Utilities for controlling the vertical alignment of an inline or table-cell box." +--- + +import utilities from 'utilities?plugin=verticalAlign' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Baseline + +Use `align-baseline` to align the baseline of an element with the baseline of its parent. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Top + +Use `align-top` to align the top of an element and its descendants with the top of the entire line. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + + +```html +... +``` + +### Middle + +Use `align-middle` to align the middle of an element with the baseline plus half the x-height of the parent. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Bottom + +Use `align-bottom` to align the bottom of an element and its descendants with the bottom of the entire line. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Text Top + +Use `align-text-top` to align the top of an element with the top of the parent element's font. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Text Bottom + +Use `align-text-bottom` to align the bottom of an element with the bottom of the parent element's font. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/visibility.mdx b/src/pages/ZH/docs/visibility.mdx new file mode 100644 index 000000000..319022357 --- /dev/null +++ b/src/pages/ZH/docs/visibility.mdx @@ -0,0 +1,64 @@ +--- +title: "Visibility" +description: "Utilities for controlling the visibility of an element." +--- + +import utilities from 'utilities?plugin=visibility' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Making elements invisible + +Use `invisible` to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with `.hidden` from the [display](/docs/display#hidden) documentation). + + +
    +
    01
    + +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Making elements visible + +Use `visible` to make an element visible. This is mostly useful for undoing the `invisible` utility at different screen sizes. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/whitespace.mdx b/src/pages/ZH/docs/whitespace.mdx new file mode 100644 index 000000000..0efcdbd21 --- /dev/null +++ b/src/pages/ZH/docs/whitespace.mdx @@ -0,0 +1,134 @@ +--- +title: "Whitespace" +description: "Utilities for controlling an element's white-space property." +--- + +import utilities from 'utilities?plugin=whitespace' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Normal + +Use `whitespace-normal` to cause text to wrap normally within an element. Newlines and spaces will be collapsed. + + +
    +
    Hey everyone! +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### No Wrap + +Use `whitespace-nowrap` to prevent text from wrapping within an element. Newlines and spaces will be collapsed. + + +
    +
    Hey everyone! +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre + +Use `whitespace-pre` to preserve newlines and spaces within an element. Text will not be wrapped. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre Line + +Use `whitespace-pre-line` to preserve newlines but not spaces within an element. Text will be wrapped normally. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre Wrap + +Use `whitespace-pre-wrap` to preserve newlines and spaces within an element. Text will be wrapped normally. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/width.mdx b/src/pages/ZH/docs/width.mdx new file mode 100644 index 000000000..cd5f1e0bb --- /dev/null +++ b/src/pages/ZH/docs/width.mdx @@ -0,0 +1,171 @@ +--- +title: "Width" +description: "Utilities for setting the width of an element." +--- + +import utilities from 'utilities?plugin=width' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Fixed widths + +Use `w-{number}` or `w-px` to set an element to a fixed width. + + +
    +
    + + + +
    w-48
    +
    w-40
    +
    w-32
    +
    w-24
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +``` + +### Percentage widths + +Use `w-{fraction}` or `w-full` to set an element to a percentage based width. + + +
    +
    +
    w-1/2
    +
    w-1/2
    +
    +
    +
    w-2/5
    +
    w-3/5
    +
    +
    +
    w-1/3
    +
    w-2/3
    +
    + + + +
    w-full
    +
    +     + +```html +
    +
    w-1/2
    +
    w-1/2
    +
    +
    +
    w-2/5
    +
    w-3/5
    +
    +
    +
    w-1/3
    +
    w-2/3
    +
    +
    +
    w-1/4
    +
    w-3/4
    +
    +
    +
    w-1/5
    +
    w-4/5
    +
    +
    +
    w-1/6
    +
    w-5/6
    +
    +
    w-full
    +``` + +### Viewport width + +Use `w-screen` to make an element span the entire width of the viewport. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's width scale is a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale) as well as some additional values specific to widths. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +To customize width separately, use the `theme.width` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ width: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/will-change.mdx b/src/pages/ZH/docs/will-change.mdx new file mode 100644 index 000000000..37fb8b9ec --- /dev/null +++ b/src/pages/ZH/docs/will-change.mdx @@ -0,0 +1,65 @@ +--- +title: "Will Change" +description: "Utilities for optimizing upcoming animations of elements that are expected to change." +--- + +import utilities from 'utilities?plugin=willChange' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Optimizing with will change + +Use `will-change-scroll`, `will-change-contents` and `will-change-transform` to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins. + +```html +
    + +
    +``` + +It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using `will-change-auto`. + +The will-change property is intended to be used as a last resort when dealing with **known performance problems**. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four `will-change` utilities. You can customize these values by editing `theme.willChange` or `theme.extend.willChange` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ willChange: { ++ left-top: 'left, top', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/word-break.mdx b/src/pages/ZH/docs/word-break.mdx new file mode 100644 index 000000000..394274c5e --- /dev/null +++ b/src/pages/ZH/docs/word-break.mdx @@ -0,0 +1,78 @@ +--- +title: "Word Break" +description: "Utilities for controlling word breaks in an element." +--- + +import utilities from 'utilities?plugin=wordBreak' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Normal + +Use `break-normal` to only add line breaks at normal word break points. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +### Break Words + +Use `break-words` to add line breaks mid-word if needed. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +### Break All + +Use `break-all` to add line breaks whenever necessary, without trying to preserve whole words. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/z-index.mdx b/src/pages/ZH/docs/z-index.mdx new file mode 100644 index 000000000..09d0bfbdc --- /dev/null +++ b/src/pages/ZH/docs/z-index.mdx @@ -0,0 +1,83 @@ +--- +title: "Z-Index" +description: "Utilities for controlling the stack order of an element." +--- + +import utilities from 'utilities?plugin=zIndex' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the z-index + +Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `z-{index}` utilities. + + +
    +
    05
    +
    04
    +
    03
    +
    02
    +
    01
    +
    +     + +```html +
    05
    +
    04
    +
    03
    +
    02
    +
    01
    +``` + +### Using negative values + +To use a negative z-index value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six numeric `z-index` utilities and an `auto` utility. You can customize these values by editing `theme.zIndex` or `theme.extend.zIndex` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ zIndex: { ++ '100': '100', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/index.js b/src/pages/index.js index 2f058772d..da7ea5d28 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,20 +1,19 @@ -import { Testimonials } from '@/components/Testimonials' -import { DarkMode } from '@/components/home/DarkMode' -import { ConstraintBased } from '@/components/home/ConstraintBased' -import { BuildAnything } from '@/components/home/BuildAnything' -import { Performance } from '@/components/home/Performance' -import { MobileFirst } from '@/components/home/MobileFirst' -import { StateVariants } from '@/components/home/StateVariants' -import { ComponentDriven } from '@/components/home/ComponentDriven' -import { Customization } from '@/components/home/Customization' -import { ModernFeatures } from '@/components/home/ModernFeatures' -import { EditorTools } from '@/components/home/EditorTools' -import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' -// import { SearchButton } from '@/components/Search' +import { Testimonials } from '@/components/.ZH/Testimonials' +import { DarkMode } from '@/components/.ZH/home/DarkMode' +import { ConstraintBased } from '@/components/.ZH/home/ConstraintBased' +import { BuildAnything } from '@/components/.ZH/home/BuildAnything' +import { Performance } from '@/components/.ZH/home/Performance' +import { MobileFirst } from '@/components/.ZH/home/MobileFirst' +import { StateVariants } from '@/components/.ZH/home/StateVariants' +import { ComponentDriven } from '@/components/.ZH/home/ComponentDriven' +import { Customization } from '@/components/.ZH/home/Customization' +import { ModernFeatures } from '@/components/.ZH/home/ModernFeatures' +import { EditorTools } from '@/components/.ZH/home/EditorTools' +import { ReadyMadeComponents } from '@/components/.ZH/home/ReadyMadeComponents' import { SearchButton } from '@/components/.ZH/Search' -import { Hero } from '@/components/home/Hero' +import { Hero } from '@/components/.ZH/home/Hero' import { Logo } from '@/components/Logo' -import { Footer } from '@/components/home/Footer' +import { Footer } from '@/components/.ZH/home/Footer' import NextLink from 'next/link' import Head from 'next/head' import { NavItems, NavPopover } from '@/components/.ZH/Header' @@ -95,7 +94,7 @@ function Header() { */}
    心動。不如... - + 馬上行動 From eb091f42355c90befa05e4316111ae8c7188950e Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:13:16 +0800 Subject: [PATCH 16/48] fix file match to /ZH/ --- next.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index eaea2fa28..8856d92ac 100644 --- a/next.config.js +++ b/next.config.js @@ -26,12 +26,13 @@ const Prism = require('prismjs') const fallbackLayouts = { // 'src/pages/docs/**/*': ['@/layouts/DocumentationLayout', 'DocumentationLayout'], - 'src/pages/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], + 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], } const fallbackDefaultExports = { // 'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'], - 'src/pages/{docs,components}/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/components/.ZH/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], 'src/pages/blog/**/*': ['@/layouts/BlogPostLayout', 'BlogPostLayout'], } From 278711bcd05c3c2bc8c491111cf38e86ba3f4b8c Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:26:50 +0800 Subject: [PATCH 17/48] change link ZH to zh --- next.config.js | 4 ++-- src/components/.ZH/Header.js | 4 ++-- src/components/.ZH/home/BuildAnything.js | 2 +- src/components/.ZH/home/ComponentDriven.js | 4 ++-- src/components/.ZH/home/ConstraintBased.js | 2 +- src/components/.ZH/home/Customization.js | 2 +- src/components/.ZH/home/DarkMode.js | 2 +- src/components/.ZH/home/EditorTools.js | 2 +- src/components/.ZH/home/MobileFirst.js | 2 +- src/components/.ZH/home/ModernFeatures.js | 2 +- src/components/.ZH/home/Performance.js | 2 +- src/components/.ZH/home/StateVariants.js | 2 +- src/layouts/.ZH/InstallationLayout.js | 20 +++++++++---------- src/layouts/.ZH/SidebarLayout.js | 2 +- src/navs/.ZH/documentation.js | 8 ++++---- .../ZH/docs/installation/framework-guides.js | 2 +- src/pages/index.js | 5 +++-- src/pages/resources.js | 2 +- 18 files changed, 35 insertions(+), 34 deletions(-) diff --git a/next.config.js b/next.config.js index 8856d92ac..051abfc72 100644 --- a/next.config.js +++ b/next.config.js @@ -26,13 +26,13 @@ const Prism = require('prismjs') const fallbackLayouts = { // 'src/pages/docs/**/*': ['@/layouts/DocumentationLayout', 'DocumentationLayout'], - 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], + 'src/pages/zh/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], } const fallbackDefaultExports = { // 'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'], 'src/pages/components/.ZH/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], - 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/zh/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], 'src/pages/blog/**/*': ['@/layouts/BlogPostLayout', 'BlogPostLayout'], } diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js index bb3a030fd..464617a4d 100644 --- a/src/components/.ZH/Header.js +++ b/src/components/.ZH/Header.js @@ -102,7 +102,7 @@ export function NavItems() { return ( <>
  • - + {/* Docs */} 技術文件 @@ -187,7 +187,7 @@ export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section className="mr-3 flex-none w-[2.0625rem] overflow-hidden md:w-auto" onContextMenu={(e) => { e.preventDefault() - Router.push('/ZH/brand') + Router.push('/zh/brand') }} > {/* Tailwind CSS home page */} diff --git a/src/components/.ZH/home/BuildAnything.js b/src/components/.ZH/home/BuildAnything.js index 57f7181bc..ae5590a06 100644 --- a/src/components/.ZH/home/BuildAnything.js +++ b/src/components/.ZH/home/BuildAnything.js @@ -278,7 +278,7 @@ export function BuildAnything() { 因為 Tailwind 就是這麼的好上手，所以它絕不鼓勵你設計出兩次同樣的網站。 即使用了同個色板和尺寸，還是可以很輕易的讓你在下個專案中用同樣的元件，做出完全不同的設計。 - + {/* Get started, installation */} 快點開始，安裝吧 diff --git a/src/components/.ZH/home/ComponentDriven.js b/src/components/.ZH/home/ComponentDriven.js index b3499c10a..485e48ac4 100644 --- a/src/components/.ZH/home/ComponentDriven.js +++ b/src/components/.ZH/home/ComponentDriven.js @@ -343,7 +343,7 @@ function AtApplySection() { to extract repeated utility patterns into custom CSS classes just by copying and pasting */} 想要保持老派格調，不想加入元件框架的世界中嗎？那用 Tailwind 的 @apply 指令把你重複的功能樣式集中到自訂的 CSS class 裡吧。 - + 閱讀更多關於樣式重新使用的內容
    • @@ -564,7 +564,7 @@ export function ComponentDriven() { 如果你想要一直、一直、一直地重複使用你的功能或設計， 那你需要的是把它們做成元件或樣板，這樣你只要改變一次，就能應用在所有地方。 - + 閱讀更多關於樣式重新使用的內容
    diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js index 3a39a0167..56c339820 100644 --- a/src/components/.ZH/home/ConstraintBased.js +++ b/src/components/.ZH/home/ConstraintBased.js @@ -291,7 +291,7 @@ export function ConstraintBased() { 它們讓顏色、間距、文字版式、陰影，以及其他的一切都能井然有序的保持一致性， 締造精良的設計系統。 - + {/* Learn more, utility-first fundamentals */} 了解詳情，功能優先的基本原則 diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js index 90833f555..c599c5476 100644 --- a/src/components/.ZH/home/Customization.js +++ b/src/components/.ZH/home/Customization.js @@ -121,7 +121,7 @@ export function Customization() { 讓 Tailwind 來把它轉換成屬於你客製化的 CSS 框架。

    - + {/* Learn more, configuration */} 了解詳情，關於配置的部分 diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js index 50c1d07b6..c0e603c11 100644 --- a/src/components/.ZH/home/DarkMode.js +++ b/src/components/.ZH/home/DarkMode.js @@ -130,7 +130,7 @@ export function DarkMode() { dark: ，這麼一來，當深色模式開啟時， 背景顏色、文字顏色、邊框顏色甚至是漸層色都能發生變化。 - + {/* Learn more, dark mode */} 了解更多關於深色模式的內容 diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js index 35390700e..b4eab4b85 100644 --- a/src/components/.ZH/home/EditorTools.js +++ b/src/components/.ZH/home/EditorTools.js @@ -331,7 +331,7 @@ export function EditorTools() { 智慧的語法建議、整理以及 class 定義等，全部在你的編輯器裡，而且還不用設定。

    - + {/* Learn more, editor setup */} 閱讀更多關於編輯器的設定 diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js index b622aefe0..7cda5eb72 100644 --- a/src/components/.ZH/home/MobileFirst.js +++ b/src/components/.ZH/home/MobileFirst.js @@ -272,7 +272,7 @@ export function MobileFirst() { 將 {'"螢幕尺寸"'} 擺在任何功能性 class 前面，看看它在特定斷點時如何神奇的變化。

    - + {/* Learn more, responsive design */} 快去看看，關於響應式設計的一切 diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js index 37b0d105f..2eaa772f5 100644 --- a/src/components/.ZH/home/ModernFeatures.js +++ b/src/components/.ZH/home/ModernFeatures.js @@ -135,7 +135,7 @@ export function ModernFeatures() { :focus-visible 這種的現代狀態選擇器，以及更多其他功能。

    - + {/* Learn more, grid template columns */} 去了解網格排版的相關內容 diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js index 928977078..b4a999631 100644 --- a/src/components/.ZH/home/Performance.js +++ b/src/components/.ZH/home/Performance.js @@ -144,7 +144,7 @@ export function Performance() { Tailwind 會在生產環境建置時自動移除未使用的 CSS，這代表著你最後的 CSS 內容量會盡其所能的最小化。 事實上，大部分的 Tailwind 專案只會對客戶端傳送小於 10kB 的 CSS。 - + {/* Learn more, optimizing for production */} 繼續閱讀關於生產環境優化的部分 diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js index b11ce417a..a2b4eb676 100644 --- a/src/components/.ZH/home/StateVariants.js +++ b/src/components/.ZH/home/StateVariants.js @@ -114,7 +114,7 @@ export function StateVariants() { disabled、focus-within、 focus-visible ，甚至是我們自己發明的超酷炫狀態 group-hover。 - + {/* Learn more, handling hover, focus, and other states */} 了解關於 hover、focus 以及其他狀態的詳細說明 diff --git a/src/layouts/.ZH/InstallationLayout.js b/src/layouts/.ZH/InstallationLayout.js index e03171aa3..47c9564b4 100644 --- a/src/layouts/.ZH/InstallationLayout.js +++ b/src/layouts/.ZH/InstallationLayout.js @@ -5,16 +5,16 @@ import Link from 'next/link' import { IconContainer } from '@/components/home/common' let tabs = { - 'Tailwind CLI': '/ZH/docs/installation', - 'Using PostCSS': '/ZH/docs/installation/using-postcss', - 'Framework Guides': '/ZH/docs/installation/framework-guides', - 'Play CDN': '/ZH/docs/installation/play-cdn', + 'Tailwind CLI': '/zh/docs/installation', + 'Using PostCSS': '/zh/docs/installation/using-postcss', + 'Framework Guides': '/zh/docs/installation/framework-guides', + 'Play CDN': '/zh/docs/installation/play-cdn', } let readNext = [ { title: 'Utility-First Fundamentals', - href: '/ZH/docs/utility-first', + href: '/zh/docs/utility-first', body: () => (

    Using a utility-first workflow to build complex components from a constrained set of @@ -25,7 +25,7 @@ let readNext = [ }, { title: 'Responsive Design', - href: '/ZH/docs/responsive-design', + href: '/zh/docs/responsive-design', body: () => (

    Build fully responsive user interfaces that adapt to any screen size using responsive @@ -36,7 +36,7 @@ let readNext = [ }, { title: 'Hover, Focus & Other States', - href: '/ZH/docs/hover-focus-and-other-states', + href: '/zh/docs/hover-focus-and-other-states', body: () => (

    Style elements in interactive states like hover, focus, and more using conditional @@ -47,7 +47,7 @@ let readNext = [ }, { title: 'Dark Mode', - href: '/ZH/docs/dark-mode', + href: '/zh/docs/dark-mode', body: () => (

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    ), @@ -55,7 +55,7 @@ let readNext = [ }, { title: 'Reusing Styles', - href: '/ZH/docs/reusing-styles', + href: '/zh/docs/reusing-styles', body: () => (

    Manage duplication and keep your projects maintainable by creating reusable abstractions. @@ -65,7 +65,7 @@ let readNext = [ }, { title: 'Customizing the Framework', - href: '/ZH/docs/adding-custom-styles', + href: '/zh/docs/adding-custom-styles', body: () => (

    Customize the framework to match your brand and extend it with your own custom styles.

    ), diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js index b99225c81..957c0b8f8 100644 --- a/src/layouts/.ZH/SidebarLayout.js +++ b/src/layouts/.ZH/SidebarLayout.js @@ -225,7 +225,7 @@ function TopLevelNav() { <>

    {/* */} - + {name}

    diff --git a/src/pages/index.js b/src/pages/index.js index da7ea5d28..2003994f8 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -41,7 +41,8 @@ function Header() {
    - Search + {/* Search */} + 搜尋 */}
    心動。不如... - + 馬上行動 diff --git a/src/pages/resources.js b/src/pages/resources.js index 30e502f01..d765e4449 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,4 +1,4 @@ -import { DocumentationLayout } from '@/layouts/ZH/DocumentationLayout' +import { DocumentationLayout } from '@/layouts/zh/DocumentationLayout' import { Button } from '@/components/Button' import clsx from 'clsx' import { BasicLayout } from '@/layouts/BasicLayout' From e5575e5d74b8b7c45b6ae749b0e8ca20ea025fa3 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:33:45 +0800 Subject: [PATCH 18/48] change to temp dir name --- src/pages/{ZH => zhs}/brand.mdx | 0 src/pages/{ZH => zhs}/docs/accent-color.mdx | 0 src/pages/{ZH => zhs}/docs/adding-base-styles.mdx | 0 src/pages/{ZH => zhs}/docs/adding-custom-styles.mdx | 0 src/pages/{ZH => zhs}/docs/adding-new-utilities.mdx | 0 src/pages/{ZH => zhs}/docs/align-content.mdx | 0 src/pages/{ZH => zhs}/docs/align-items.mdx | 0 src/pages/{ZH => zhs}/docs/align-self.mdx | 0 src/pages/{ZH => zhs}/docs/animation.mdx | 0 src/pages/{ZH => zhs}/docs/appearance.mdx | 0 src/pages/{ZH => zhs}/docs/aspect-ratio.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-blur.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-brightness.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-contrast.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-grayscale.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-hue-rotate.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-invert.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-opacity.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-saturate.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-sepia.mdx | 0 src/pages/{ZH => zhs}/docs/background-attachment.mdx | 0 src/pages/{ZH => zhs}/docs/background-blend-mode.mdx | 0 src/pages/{ZH => zhs}/docs/background-clip.mdx | 0 src/pages/{ZH => zhs}/docs/background-color.mdx | 0 src/pages/{ZH => zhs}/docs/background-image.mdx | 0 src/pages/{ZH => zhs}/docs/background-origin.mdx | 0 src/pages/{ZH => zhs}/docs/background-position.mdx | 0 src/pages/{ZH => zhs}/docs/background-repeat.mdx | 0 src/pages/{ZH => zhs}/docs/background-size.mdx | 0 src/pages/{ZH => zhs}/docs/blur.mdx | 0 src/pages/{ZH => zhs}/docs/border-collapse.mdx | 0 src/pages/{ZH => zhs}/docs/border-color.mdx | 0 src/pages/{ZH => zhs}/docs/border-radius.mdx | 0 src/pages/{ZH => zhs}/docs/border-style.mdx | 0 src/pages/{ZH => zhs}/docs/border-width.mdx | 0 src/pages/{ZH => zhs}/docs/box-decoration-break.mdx | 0 src/pages/{ZH => zhs}/docs/box-shadow-color.mdx | 0 src/pages/{ZH => zhs}/docs/box-shadow.mdx | 0 src/pages/{ZH => zhs}/docs/box-sizing.mdx | 0 src/pages/{ZH => zhs}/docs/break-after.mdx | 0 src/pages/{ZH => zhs}/docs/break-before.mdx | 0 src/pages/{ZH => zhs}/docs/break-inside.mdx | 0 src/pages/{ZH => zhs}/docs/brightness.mdx | 0 src/pages/{ZH => zhs}/docs/browser-support.mdx | 0 src/pages/{ZH => zhs}/docs/caret-color.mdx | 0 src/pages/{ZH => zhs}/docs/clear.mdx | 0 src/pages/{ZH => zhs}/docs/columns.mdx | 0 src/pages/{ZH => zhs}/docs/configuration.mdx | 0 src/pages/{ZH => zhs}/docs/container.mdx | 0 src/pages/{ZH => zhs}/docs/content-configuration.mdx | 0 src/pages/{ZH => zhs}/docs/content.mdx | 0 src/pages/{ZH => zhs}/docs/contrast.mdx | 0 src/pages/{ZH => zhs}/docs/cursor.mdx | 0 src/pages/{ZH => zhs}/docs/customizing-colors.mdx | 0 src/pages/{ZH => zhs}/docs/customizing-spacing.mdx | 0 src/pages/{ZH => zhs}/docs/dark-mode.mdx | 0 src/pages/{ZH => zhs}/docs/display.mdx | 0 src/pages/{ZH => zhs}/docs/divide-color.mdx | 0 src/pages/{ZH => zhs}/docs/divide-style.mdx | 0 src/pages/{ZH => zhs}/docs/divide-width.mdx | 0 src/pages/{ZH => zhs}/docs/drop-shadow.mdx | 0 src/pages/{ZH => zhs}/docs/editor-setup.mdx | 0 src/pages/{ZH => zhs}/docs/fill.mdx | 0 src/pages/{ZH => zhs}/docs/flex-basis.mdx | 0 src/pages/{ZH => zhs}/docs/flex-direction.mdx | 0 src/pages/{ZH => zhs}/docs/flex-grow.mdx | 0 src/pages/{ZH => zhs}/docs/flex-shrink.mdx | 0 src/pages/{ZH => zhs}/docs/flex-wrap.mdx | 0 src/pages/{ZH => zhs}/docs/flex.mdx | 0 src/pages/{ZH => zhs}/docs/float.mdx | 0 src/pages/{ZH => zhs}/docs/font-family.mdx | 0 src/pages/{ZH => zhs}/docs/font-size.mdx | 0 src/pages/{ZH => zhs}/docs/font-smoothing.mdx | 0 src/pages/{ZH => zhs}/docs/font-style.mdx | 0 src/pages/{ZH => zhs}/docs/font-variant-numeric.mdx | 0 src/pages/{ZH => zhs}/docs/font-weight.mdx | 0 src/pages/{ZH => zhs}/docs/functions-and-directives.mdx | 0 src/pages/{ZH => zhs}/docs/gap.mdx | 0 src/pages/{ZH => zhs}/docs/gradient-color-stops.mdx | 0 src/pages/{ZH => zhs}/docs/grayscale.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-columns.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-flow.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-rows.mdx | 0 src/pages/{ZH => zhs}/docs/grid-column.mdx | 0 src/pages/{ZH => zhs}/docs/grid-row.mdx | 0 src/pages/{ZH => zhs}/docs/grid-template-columns.mdx | 0 src/pages/{ZH => zhs}/docs/grid-template-rows.mdx | 0 src/pages/{ZH => zhs}/docs/guides/create-react-app.js | 0 src/pages/{ZH => zhs}/docs/guides/gatsby.js | 0 src/pages/{ZH => zhs}/docs/guides/laravel.js | 0 src/pages/{ZH => zhs}/docs/guides/nextjs.js | 0 src/pages/{ZH => zhs}/docs/guides/nuxtjs.js | 0 src/pages/{ZH => zhs}/docs/guides/vite.js | 0 src/pages/{ZH => zhs}/docs/height.mdx | 0 src/pages/{ZH => zhs}/docs/hover-focus-and-other-states.mdx | 0 src/pages/{ZH => zhs}/docs/hue-rotate.mdx | 0 src/pages/{ZH => zhs}/docs/installation/framework-guides.js | 0 src/pages/{ZH => zhs}/docs/installation/index.js | 0 src/pages/{ZH => zhs}/docs/installation/play-cdn.js | 0 src/pages/{ZH => zhs}/docs/installation/using-postcss.js | 0 src/pages/{ZH => zhs}/docs/invert.mdx | 0 src/pages/{ZH => zhs}/docs/isolation.mdx | 0 src/pages/{ZH => zhs}/docs/justify-content.mdx | 0 src/pages/{ZH => zhs}/docs/justify-items.mdx | 0 src/pages/{ZH => zhs}/docs/justify-self.mdx | 0 src/pages/{ZH => zhs}/docs/letter-spacing.mdx | 0 src/pages/{ZH => zhs}/docs/line-height.mdx | 0 src/pages/{ZH => zhs}/docs/list-style-position.mdx | 0 src/pages/{ZH => zhs}/docs/list-style-type.mdx | 0 src/pages/{ZH => zhs}/docs/margin.mdx | 0 src/pages/{ZH => zhs}/docs/max-height.mdx | 0 src/pages/{ZH => zhs}/docs/max-width.mdx | 0 src/pages/{ZH => zhs}/docs/min-height.mdx | 0 src/pages/{ZH => zhs}/docs/min-width.mdx | 0 src/pages/{ZH => zhs}/docs/mix-blend-mode.mdx | 0 src/pages/{ZH => zhs}/docs/object-fit.mdx | 0 src/pages/{ZH => zhs}/docs/object-position.mdx | 0 src/pages/{ZH => zhs}/docs/opacity.mdx | 0 src/pages/{ZH => zhs}/docs/optimizing-for-production.mdx | 0 src/pages/{ZH => zhs}/docs/order.mdx | 0 src/pages/{ZH => zhs}/docs/outline-color.mdx | 0 src/pages/{ZH => zhs}/docs/outline-offset.mdx | 0 src/pages/{ZH => zhs}/docs/outline-style.mdx | 0 src/pages/{ZH => zhs}/docs/outline-width.mdx | 0 src/pages/{ZH => zhs}/docs/overflow.mdx | 0 src/pages/{ZH => zhs}/docs/overscroll-behavior.mdx | 0 src/pages/{ZH => zhs}/docs/padding.mdx | 0 src/pages/{ZH => zhs}/docs/place-content.mdx | 0 src/pages/{ZH => zhs}/docs/place-items.mdx | 0 src/pages/{ZH => zhs}/docs/place-self.mdx | 0 src/pages/{ZH => zhs}/docs/play-cdn.mdx | 0 src/pages/{ZH => zhs}/docs/plugins.mdx | 0 src/pages/{ZH => zhs}/docs/pointer-events.mdx | 0 src/pages/{ZH => zhs}/docs/position.mdx | 0 src/pages/{ZH => zhs}/docs/preflight.mdx | 0 src/pages/{ZH => zhs}/docs/presets.mdx | 0 src/pages/{ZH => zhs}/docs/resize.mdx | 0 src/pages/{ZH => zhs}/docs/responsive-design.mdx | 0 src/pages/{ZH => zhs}/docs/reusing-styles.mdx | 0 src/pages/{ZH => zhs}/docs/ring-color.mdx | 0 src/pages/{ZH => zhs}/docs/ring-offset-color.mdx | 0 src/pages/{ZH => zhs}/docs/ring-offset-width.mdx | 0 src/pages/{ZH => zhs}/docs/ring-width.mdx | 0 src/pages/{ZH => zhs}/docs/rotate.mdx | 0 src/pages/{ZH => zhs}/docs/saturate.mdx | 0 src/pages/{ZH => zhs}/docs/scale.mdx | 0 src/pages/{ZH => zhs}/docs/screen-readers.mdx | 0 src/pages/{ZH => zhs}/docs/screens.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-behavior.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-margin.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-padding.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-align.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-stop.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-type.mdx | 0 src/pages/{ZH => zhs}/docs/sepia.mdx | 0 src/pages/{ZH => zhs}/docs/skew.mdx | 0 src/pages/{ZH => zhs}/docs/space.mdx | 0 src/pages/{ZH => zhs}/docs/stroke-width.mdx | 0 src/pages/{ZH => zhs}/docs/stroke.mdx | 0 src/pages/{ZH => zhs}/docs/table-layout.mdx | 0 src/pages/{ZH => zhs}/docs/tailwind-cli.mdx | 0 src/pages/{ZH => zhs}/docs/text-align.mdx | 0 src/pages/{ZH => zhs}/docs/text-color.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-color.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-style.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-thickness.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration.mdx | 0 src/pages/{ZH => zhs}/docs/text-indent.mdx | 0 src/pages/{ZH => zhs}/docs/text-overflow.mdx | 0 src/pages/{ZH => zhs}/docs/text-transform.mdx | 0 src/pages/{ZH => zhs}/docs/text-underline-offset.mdx | 0 src/pages/{ZH => zhs}/docs/theme.mdx | 0 src/pages/{ZH => zhs}/docs/top-right-bottom-left.mdx | 0 src/pages/{ZH => zhs}/docs/touch-action.mdx | 0 src/pages/{ZH => zhs}/docs/transform-origin.mdx | 0 src/pages/{ZH => zhs}/docs/transition-delay.mdx | 0 src/pages/{ZH => zhs}/docs/transition-duration.mdx | 0 src/pages/{ZH => zhs}/docs/transition-property.mdx | 0 src/pages/{ZH => zhs}/docs/transition-timing-function.mdx | 0 src/pages/{ZH => zhs}/docs/translate.mdx | 0 src/pages/{ZH => zhs}/docs/upgrade-guide.mdx | 0 src/pages/{ZH => zhs}/docs/user-select.mdx | 0 src/pages/{ZH => zhs}/docs/using-with-preprocessors.mdx | 0 src/pages/{ZH => zhs}/docs/utility-first.mdx | 0 src/pages/{ZH => zhs}/docs/vertical-align.mdx | 0 src/pages/{ZH => zhs}/docs/visibility.mdx | 0 src/pages/{ZH => zhs}/docs/whitespace.mdx | 0 src/pages/{ZH => zhs}/docs/width.mdx | 0 src/pages/{ZH => zhs}/docs/will-change.mdx | 0 src/pages/{ZH => zhs}/docs/word-break.mdx | 0 src/pages/{ZH => zhs}/docs/z-index.mdx | 0 191 files changed, 0 insertions(+), 0 deletions(-) rename src/pages/{ZH => zhs}/brand.mdx (100%) rename src/pages/{ZH => zhs}/docs/accent-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-base-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-custom-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-new-utilities.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/animation.mdx (100%) rename src/pages/{ZH => zhs}/docs/appearance.mdx (100%) rename src/pages/{ZH => zhs}/docs/aspect-ratio.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-blur.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-brightness.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-contrast.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-grayscale.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-hue-rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-invert.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-opacity.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-saturate.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-sepia.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-attachment.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-blend-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-clip.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-image.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-origin.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-repeat.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-size.mdx (100%) rename src/pages/{ZH => zhs}/docs/blur.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-collapse.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-radius.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-decoration-break.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-shadow-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-shadow.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-sizing.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-after.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-before.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-inside.mdx (100%) rename src/pages/{ZH => zhs}/docs/brightness.mdx (100%) rename src/pages/{ZH => zhs}/docs/browser-support.mdx (100%) rename src/pages/{ZH => zhs}/docs/caret-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/clear.mdx (100%) rename src/pages/{ZH => zhs}/docs/columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/configuration.mdx (100%) rename src/pages/{ZH => zhs}/docs/container.mdx (100%) rename src/pages/{ZH => zhs}/docs/content-configuration.mdx (100%) rename src/pages/{ZH => zhs}/docs/content.mdx (100%) rename src/pages/{ZH => zhs}/docs/contrast.mdx (100%) rename src/pages/{ZH => zhs}/docs/cursor.mdx (100%) rename src/pages/{ZH => zhs}/docs/customizing-colors.mdx (100%) rename src/pages/{ZH => zhs}/docs/customizing-spacing.mdx (100%) rename src/pages/{ZH => zhs}/docs/dark-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/display.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/drop-shadow.mdx (100%) rename src/pages/{ZH => zhs}/docs/editor-setup.mdx (100%) rename src/pages/{ZH => zhs}/docs/fill.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-basis.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-direction.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-grow.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-shrink.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-wrap.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex.mdx (100%) rename src/pages/{ZH => zhs}/docs/float.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-family.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-size.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-smoothing.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-variant-numeric.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-weight.mdx (100%) rename src/pages/{ZH => zhs}/docs/functions-and-directives.mdx (100%) rename src/pages/{ZH => zhs}/docs/gap.mdx (100%) rename src/pages/{ZH => zhs}/docs/gradient-color-stops.mdx (100%) rename src/pages/{ZH => zhs}/docs/grayscale.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-flow.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-rows.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-column.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-row.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-template-columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-template-rows.mdx (100%) rename src/pages/{ZH => zhs}/docs/guides/create-react-app.js (100%) rename src/pages/{ZH => zhs}/docs/guides/gatsby.js (100%) rename src/pages/{ZH => zhs}/docs/guides/laravel.js (100%) rename src/pages/{ZH => zhs}/docs/guides/nextjs.js (100%) rename src/pages/{ZH => zhs}/docs/guides/nuxtjs.js (100%) rename src/pages/{ZH => zhs}/docs/guides/vite.js (100%) rename src/pages/{ZH => zhs}/docs/height.mdx (100%) rename src/pages/{ZH => zhs}/docs/hover-focus-and-other-states.mdx (100%) rename src/pages/{ZH => zhs}/docs/hue-rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/installation/framework-guides.js (100%) rename src/pages/{ZH => zhs}/docs/installation/index.js (100%) rename src/pages/{ZH => zhs}/docs/installation/play-cdn.js (100%) rename src/pages/{ZH => zhs}/docs/installation/using-postcss.js (100%) rename src/pages/{ZH => zhs}/docs/invert.mdx (100%) rename src/pages/{ZH => zhs}/docs/isolation.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/letter-spacing.mdx (100%) rename src/pages/{ZH => zhs}/docs/line-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/list-style-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/list-style-type.mdx (100%) rename src/pages/{ZH => zhs}/docs/margin.mdx (100%) rename src/pages/{ZH => zhs}/docs/max-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/max-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/min-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/min-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/mix-blend-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/object-fit.mdx (100%) rename src/pages/{ZH => zhs}/docs/object-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/opacity.mdx (100%) rename src/pages/{ZH => zhs}/docs/optimizing-for-production.mdx (100%) rename src/pages/{ZH => zhs}/docs/order.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-offset.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/overflow.mdx (100%) rename src/pages/{ZH => zhs}/docs/overscroll-behavior.mdx (100%) rename src/pages/{ZH => zhs}/docs/padding.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/play-cdn.mdx (100%) rename src/pages/{ZH => zhs}/docs/plugins.mdx (100%) rename src/pages/{ZH => zhs}/docs/pointer-events.mdx (100%) rename src/pages/{ZH => zhs}/docs/position.mdx (100%) rename src/pages/{ZH => zhs}/docs/preflight.mdx (100%) rename src/pages/{ZH => zhs}/docs/presets.mdx (100%) rename src/pages/{ZH => zhs}/docs/resize.mdx (100%) rename src/pages/{ZH => zhs}/docs/responsive-design.mdx (100%) rename src/pages/{ZH => zhs}/docs/reusing-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-offset-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-offset-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/saturate.mdx (100%) rename src/pages/{ZH => zhs}/docs/scale.mdx (100%) rename src/pages/{ZH => zhs}/docs/screen-readers.mdx (100%) rename src/pages/{ZH => zhs}/docs/screens.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-behavior.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-margin.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-padding.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-stop.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-type.mdx (100%) rename src/pages/{ZH => zhs}/docs/sepia.mdx (100%) rename src/pages/{ZH => zhs}/docs/skew.mdx (100%) rename src/pages/{ZH => zhs}/docs/space.mdx (100%) rename src/pages/{ZH => zhs}/docs/stroke-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/stroke.mdx (100%) rename src/pages/{ZH => zhs}/docs/table-layout.mdx (100%) rename src/pages/{ZH => zhs}/docs/tailwind-cli.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-thickness.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-indent.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-overflow.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-transform.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-underline-offset.mdx (100%) rename src/pages/{ZH => zhs}/docs/theme.mdx (100%) rename src/pages/{ZH => zhs}/docs/top-right-bottom-left.mdx (100%) rename src/pages/{ZH => zhs}/docs/touch-action.mdx (100%) rename src/pages/{ZH => zhs}/docs/transform-origin.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-delay.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-duration.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-property.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-timing-function.mdx (100%) rename src/pages/{ZH => zhs}/docs/translate.mdx (100%) rename src/pages/{ZH => zhs}/docs/upgrade-guide.mdx (100%) rename src/pages/{ZH => zhs}/docs/user-select.mdx (100%) rename src/pages/{ZH => zhs}/docs/using-with-preprocessors.mdx (100%) rename src/pages/{ZH => zhs}/docs/utility-first.mdx (100%) rename src/pages/{ZH => zhs}/docs/vertical-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/visibility.mdx (100%) rename src/pages/{ZH => zhs}/docs/whitespace.mdx (100%) rename src/pages/{ZH => zhs}/docs/width.mdx (100%) rename src/pages/{ZH => zhs}/docs/will-change.mdx (100%) rename src/pages/{ZH => zhs}/docs/word-break.mdx (100%) rename src/pages/{ZH => zhs}/docs/z-index.mdx (100%) diff --git a/src/pages/ZH/brand.mdx b/src/pages/zhs/brand.mdx similarity index 100% rename from src/pages/ZH/brand.mdx rename to src/pages/zhs/brand.mdx diff --git a/src/pages/ZH/docs/accent-color.mdx b/src/pages/zhs/docs/accent-color.mdx similarity index 100% rename from src/pages/ZH/docs/accent-color.mdx rename to src/pages/zhs/docs/accent-color.mdx diff --git a/src/pages/ZH/docs/adding-base-styles.mdx b/src/pages/zhs/docs/adding-base-styles.mdx similarity index 100% rename from src/pages/ZH/docs/adding-base-styles.mdx rename to src/pages/zhs/docs/adding-base-styles.mdx diff --git a/src/pages/ZH/docs/adding-custom-styles.mdx b/src/pages/zhs/docs/adding-custom-styles.mdx similarity index 100% rename from src/pages/ZH/docs/adding-custom-styles.mdx rename to src/pages/zhs/docs/adding-custom-styles.mdx diff --git a/src/pages/ZH/docs/adding-new-utilities.mdx b/src/pages/zhs/docs/adding-new-utilities.mdx similarity index 100% rename from src/pages/ZH/docs/adding-new-utilities.mdx rename to src/pages/zhs/docs/adding-new-utilities.mdx diff --git a/src/pages/ZH/docs/align-content.mdx b/src/pages/zhs/docs/align-content.mdx similarity index 100% rename from src/pages/ZH/docs/align-content.mdx rename to src/pages/zhs/docs/align-content.mdx diff --git a/src/pages/ZH/docs/align-items.mdx b/src/pages/zhs/docs/align-items.mdx similarity index 100% rename from src/pages/ZH/docs/align-items.mdx rename to src/pages/zhs/docs/align-items.mdx diff --git a/src/pages/ZH/docs/align-self.mdx b/src/pages/zhs/docs/align-self.mdx similarity index 100% rename from src/pages/ZH/docs/align-self.mdx rename to src/pages/zhs/docs/align-self.mdx diff --git a/src/pages/ZH/docs/animation.mdx b/src/pages/zhs/docs/animation.mdx similarity index 100% rename from src/pages/ZH/docs/animation.mdx rename to src/pages/zhs/docs/animation.mdx diff --git a/src/pages/ZH/docs/appearance.mdx b/src/pages/zhs/docs/appearance.mdx similarity index 100% rename from src/pages/ZH/docs/appearance.mdx rename to src/pages/zhs/docs/appearance.mdx diff --git a/src/pages/ZH/docs/aspect-ratio.mdx b/src/pages/zhs/docs/aspect-ratio.mdx similarity index 100% rename from src/pages/ZH/docs/aspect-ratio.mdx rename to src/pages/zhs/docs/aspect-ratio.mdx diff --git a/src/pages/ZH/docs/backdrop-blur.mdx b/src/pages/zhs/docs/backdrop-blur.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-blur.mdx rename to src/pages/zhs/docs/backdrop-blur.mdx diff --git a/src/pages/ZH/docs/backdrop-brightness.mdx b/src/pages/zhs/docs/backdrop-brightness.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-brightness.mdx rename to src/pages/zhs/docs/backdrop-brightness.mdx diff --git a/src/pages/ZH/docs/backdrop-contrast.mdx b/src/pages/zhs/docs/backdrop-contrast.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-contrast.mdx rename to src/pages/zhs/docs/backdrop-contrast.mdx diff --git a/src/pages/ZH/docs/backdrop-grayscale.mdx b/src/pages/zhs/docs/backdrop-grayscale.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-grayscale.mdx rename to src/pages/zhs/docs/backdrop-grayscale.mdx diff --git a/src/pages/ZH/docs/backdrop-hue-rotate.mdx b/src/pages/zhs/docs/backdrop-hue-rotate.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-hue-rotate.mdx rename to src/pages/zhs/docs/backdrop-hue-rotate.mdx diff --git a/src/pages/ZH/docs/backdrop-invert.mdx b/src/pages/zhs/docs/backdrop-invert.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-invert.mdx rename to src/pages/zhs/docs/backdrop-invert.mdx diff --git a/src/pages/ZH/docs/backdrop-opacity.mdx b/src/pages/zhs/docs/backdrop-opacity.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-opacity.mdx rename to src/pages/zhs/docs/backdrop-opacity.mdx diff --git a/src/pages/ZH/docs/backdrop-saturate.mdx b/src/pages/zhs/docs/backdrop-saturate.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-saturate.mdx rename to src/pages/zhs/docs/backdrop-saturate.mdx diff --git a/src/pages/ZH/docs/backdrop-sepia.mdx b/src/pages/zhs/docs/backdrop-sepia.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-sepia.mdx rename to src/pages/zhs/docs/backdrop-sepia.mdx diff --git a/src/pages/ZH/docs/background-attachment.mdx b/src/pages/zhs/docs/background-attachment.mdx similarity index 100% rename from src/pages/ZH/docs/background-attachment.mdx rename to src/pages/zhs/docs/background-attachment.mdx diff --git a/src/pages/ZH/docs/background-blend-mode.mdx b/src/pages/zhs/docs/background-blend-mode.mdx similarity index 100% rename from src/pages/ZH/docs/background-blend-mode.mdx rename to src/pages/zhs/docs/background-blend-mode.mdx diff --git a/src/pages/ZH/docs/background-clip.mdx b/src/pages/zhs/docs/background-clip.mdx similarity index 100% rename from src/pages/ZH/docs/background-clip.mdx rename to src/pages/zhs/docs/background-clip.mdx diff --git a/src/pages/ZH/docs/background-color.mdx b/src/pages/zhs/docs/background-color.mdx similarity index 100% rename from src/pages/ZH/docs/background-color.mdx rename to src/pages/zhs/docs/background-color.mdx diff --git a/src/pages/ZH/docs/background-image.mdx b/src/pages/zhs/docs/background-image.mdx similarity index 100% rename from src/pages/ZH/docs/background-image.mdx rename to src/pages/zhs/docs/background-image.mdx diff --git a/src/pages/ZH/docs/background-origin.mdx b/src/pages/zhs/docs/background-origin.mdx similarity index 100% rename from src/pages/ZH/docs/background-origin.mdx rename to src/pages/zhs/docs/background-origin.mdx diff --git a/src/pages/ZH/docs/background-position.mdx b/src/pages/zhs/docs/background-position.mdx similarity index 100% rename from src/pages/ZH/docs/background-position.mdx rename to src/pages/zhs/docs/background-position.mdx diff --git a/src/pages/ZH/docs/background-repeat.mdx b/src/pages/zhs/docs/background-repeat.mdx similarity index 100% rename from src/pages/ZH/docs/background-repeat.mdx rename to src/pages/zhs/docs/background-repeat.mdx diff --git a/src/pages/ZH/docs/background-size.mdx b/src/pages/zhs/docs/background-size.mdx similarity index 100% rename from src/pages/ZH/docs/background-size.mdx rename to src/pages/zhs/docs/background-size.mdx diff --git a/src/pages/ZH/docs/blur.mdx b/src/pages/zhs/docs/blur.mdx similarity index 100% rename from src/pages/ZH/docs/blur.mdx rename to src/pages/zhs/docs/blur.mdx diff --git a/src/pages/ZH/docs/border-collapse.mdx b/src/pages/zhs/docs/border-collapse.mdx similarity index 100% rename from src/pages/ZH/docs/border-collapse.mdx rename to src/pages/zhs/docs/border-collapse.mdx diff --git a/src/pages/ZH/docs/border-color.mdx b/src/pages/zhs/docs/border-color.mdx similarity index 100% rename from src/pages/ZH/docs/border-color.mdx rename to src/pages/zhs/docs/border-color.mdx diff --git a/src/pages/ZH/docs/border-radius.mdx b/src/pages/zhs/docs/border-radius.mdx similarity index 100% rename from src/pages/ZH/docs/border-radius.mdx rename to src/pages/zhs/docs/border-radius.mdx diff --git a/src/pages/ZH/docs/border-style.mdx b/src/pages/zhs/docs/border-style.mdx similarity index 100% rename from src/pages/ZH/docs/border-style.mdx rename to src/pages/zhs/docs/border-style.mdx diff --git a/src/pages/ZH/docs/border-width.mdx b/src/pages/zhs/docs/border-width.mdx similarity index 100% rename from src/pages/ZH/docs/border-width.mdx rename to src/pages/zhs/docs/border-width.mdx diff --git a/src/pages/ZH/docs/box-decoration-break.mdx b/src/pages/zhs/docs/box-decoration-break.mdx similarity index 100% rename from src/pages/ZH/docs/box-decoration-break.mdx rename to src/pages/zhs/docs/box-decoration-break.mdx diff --git a/src/pages/ZH/docs/box-shadow-color.mdx b/src/pages/zhs/docs/box-shadow-color.mdx similarity index 100% rename from src/pages/ZH/docs/box-shadow-color.mdx rename to src/pages/zhs/docs/box-shadow-color.mdx diff --git a/src/pages/ZH/docs/box-shadow.mdx b/src/pages/zhs/docs/box-shadow.mdx similarity index 100% rename from src/pages/ZH/docs/box-shadow.mdx rename to src/pages/zhs/docs/box-shadow.mdx diff --git a/src/pages/ZH/docs/box-sizing.mdx b/src/pages/zhs/docs/box-sizing.mdx similarity index 100% rename from src/pages/ZH/docs/box-sizing.mdx rename to src/pages/zhs/docs/box-sizing.mdx diff --git a/src/pages/ZH/docs/break-after.mdx b/src/pages/zhs/docs/break-after.mdx similarity index 100% rename from src/pages/ZH/docs/break-after.mdx rename to src/pages/zhs/docs/break-after.mdx diff --git a/src/pages/ZH/docs/break-before.mdx b/src/pages/zhs/docs/break-before.mdx similarity index 100% rename from src/pages/ZH/docs/break-before.mdx rename to src/pages/zhs/docs/break-before.mdx diff --git a/src/pages/ZH/docs/break-inside.mdx b/src/pages/zhs/docs/break-inside.mdx similarity index 100% rename from src/pages/ZH/docs/break-inside.mdx rename to src/pages/zhs/docs/break-inside.mdx diff --git a/src/pages/ZH/docs/brightness.mdx b/src/pages/zhs/docs/brightness.mdx similarity index 100% rename from src/pages/ZH/docs/brightness.mdx rename to src/pages/zhs/docs/brightness.mdx diff --git a/src/pages/ZH/docs/browser-support.mdx b/src/pages/zhs/docs/browser-support.mdx similarity index 100% rename from src/pages/ZH/docs/browser-support.mdx rename to src/pages/zhs/docs/browser-support.mdx diff --git a/src/pages/ZH/docs/caret-color.mdx b/src/pages/zhs/docs/caret-color.mdx similarity index 100% rename from src/pages/ZH/docs/caret-color.mdx rename to src/pages/zhs/docs/caret-color.mdx diff --git a/src/pages/ZH/docs/clear.mdx b/src/pages/zhs/docs/clear.mdx similarity index 100% rename from src/pages/ZH/docs/clear.mdx rename to src/pages/zhs/docs/clear.mdx diff --git a/src/pages/ZH/docs/columns.mdx b/src/pages/zhs/docs/columns.mdx similarity index 100% rename from src/pages/ZH/docs/columns.mdx rename to src/pages/zhs/docs/columns.mdx diff --git a/src/pages/ZH/docs/configuration.mdx b/src/pages/zhs/docs/configuration.mdx similarity index 100% rename from src/pages/ZH/docs/configuration.mdx rename to src/pages/zhs/docs/configuration.mdx diff --git a/src/pages/ZH/docs/container.mdx b/src/pages/zhs/docs/container.mdx similarity index 100% rename from src/pages/ZH/docs/container.mdx rename to src/pages/zhs/docs/container.mdx diff --git a/src/pages/ZH/docs/content-configuration.mdx b/src/pages/zhs/docs/content-configuration.mdx similarity index 100% rename from src/pages/ZH/docs/content-configuration.mdx rename to src/pages/zhs/docs/content-configuration.mdx diff --git a/src/pages/ZH/docs/content.mdx b/src/pages/zhs/docs/content.mdx similarity index 100% rename from src/pages/ZH/docs/content.mdx rename to src/pages/zhs/docs/content.mdx diff --git a/src/pages/ZH/docs/contrast.mdx b/src/pages/zhs/docs/contrast.mdx similarity index 100% rename from src/pages/ZH/docs/contrast.mdx rename to src/pages/zhs/docs/contrast.mdx diff --git a/src/pages/ZH/docs/cursor.mdx b/src/pages/zhs/docs/cursor.mdx similarity index 100% rename from src/pages/ZH/docs/cursor.mdx rename to src/pages/zhs/docs/cursor.mdx diff --git a/src/pages/ZH/docs/customizing-colors.mdx b/src/pages/zhs/docs/customizing-colors.mdx similarity index 100% rename from src/pages/ZH/docs/customizing-colors.mdx rename to src/pages/zhs/docs/customizing-colors.mdx diff --git a/src/pages/ZH/docs/customizing-spacing.mdx b/src/pages/zhs/docs/customizing-spacing.mdx similarity index 100% rename from src/pages/ZH/docs/customizing-spacing.mdx rename to src/pages/zhs/docs/customizing-spacing.mdx diff --git a/src/pages/ZH/docs/dark-mode.mdx b/src/pages/zhs/docs/dark-mode.mdx similarity index 100% rename from src/pages/ZH/docs/dark-mode.mdx rename to src/pages/zhs/docs/dark-mode.mdx diff --git a/src/pages/ZH/docs/display.mdx b/src/pages/zhs/docs/display.mdx similarity index 100% rename from src/pages/ZH/docs/display.mdx rename to src/pages/zhs/docs/display.mdx diff --git a/src/pages/ZH/docs/divide-color.mdx b/src/pages/zhs/docs/divide-color.mdx similarity index 100% rename from src/pages/ZH/docs/divide-color.mdx rename to src/pages/zhs/docs/divide-color.mdx diff --git a/src/pages/ZH/docs/divide-style.mdx b/src/pages/zhs/docs/divide-style.mdx similarity index 100% rename from src/pages/ZH/docs/divide-style.mdx rename to src/pages/zhs/docs/divide-style.mdx diff --git a/src/pages/ZH/docs/divide-width.mdx b/src/pages/zhs/docs/divide-width.mdx similarity index 100% rename from src/pages/ZH/docs/divide-width.mdx rename to src/pages/zhs/docs/divide-width.mdx diff --git a/src/pages/ZH/docs/drop-shadow.mdx b/src/pages/zhs/docs/drop-shadow.mdx similarity index 100% rename from src/pages/ZH/docs/drop-shadow.mdx rename to src/pages/zhs/docs/drop-shadow.mdx diff --git a/src/pages/ZH/docs/editor-setup.mdx b/src/pages/zhs/docs/editor-setup.mdx similarity index 100% rename from src/pages/ZH/docs/editor-setup.mdx rename to src/pages/zhs/docs/editor-setup.mdx diff --git a/src/pages/ZH/docs/fill.mdx b/src/pages/zhs/docs/fill.mdx similarity index 100% rename from src/pages/ZH/docs/fill.mdx rename to src/pages/zhs/docs/fill.mdx diff --git a/src/pages/ZH/docs/flex-basis.mdx b/src/pages/zhs/docs/flex-basis.mdx similarity index 100% rename from src/pages/ZH/docs/flex-basis.mdx rename to src/pages/zhs/docs/flex-basis.mdx diff --git a/src/pages/ZH/docs/flex-direction.mdx b/src/pages/zhs/docs/flex-direction.mdx similarity index 100% rename from src/pages/ZH/docs/flex-direction.mdx rename to src/pages/zhs/docs/flex-direction.mdx diff --git a/src/pages/ZH/docs/flex-grow.mdx b/src/pages/zhs/docs/flex-grow.mdx similarity index 100% rename from src/pages/ZH/docs/flex-grow.mdx rename to src/pages/zhs/docs/flex-grow.mdx diff --git a/src/pages/ZH/docs/flex-shrink.mdx b/src/pages/zhs/docs/flex-shrink.mdx similarity index 100% rename from src/pages/ZH/docs/flex-shrink.mdx rename to src/pages/zhs/docs/flex-shrink.mdx diff --git a/src/pages/ZH/docs/flex-wrap.mdx b/src/pages/zhs/docs/flex-wrap.mdx similarity index 100% rename from src/pages/ZH/docs/flex-wrap.mdx rename to src/pages/zhs/docs/flex-wrap.mdx diff --git a/src/pages/ZH/docs/flex.mdx b/src/pages/zhs/docs/flex.mdx similarity index 100% rename from src/pages/ZH/docs/flex.mdx rename to src/pages/zhs/docs/flex.mdx diff --git a/src/pages/ZH/docs/float.mdx b/src/pages/zhs/docs/float.mdx similarity index 100% rename from src/pages/ZH/docs/float.mdx rename to src/pages/zhs/docs/float.mdx diff --git a/src/pages/ZH/docs/font-family.mdx b/src/pages/zhs/docs/font-family.mdx similarity index 100% rename from src/pages/ZH/docs/font-family.mdx rename to src/pages/zhs/docs/font-family.mdx diff --git a/src/pages/ZH/docs/font-size.mdx b/src/pages/zhs/docs/font-size.mdx similarity index 100% rename from src/pages/ZH/docs/font-size.mdx rename to src/pages/zhs/docs/font-size.mdx diff --git a/src/pages/ZH/docs/font-smoothing.mdx b/src/pages/zhs/docs/font-smoothing.mdx similarity index 100% rename from src/pages/ZH/docs/font-smoothing.mdx rename to src/pages/zhs/docs/font-smoothing.mdx diff --git a/src/pages/ZH/docs/font-style.mdx b/src/pages/zhs/docs/font-style.mdx similarity index 100% rename from src/pages/ZH/docs/font-style.mdx rename to src/pages/zhs/docs/font-style.mdx diff --git a/src/pages/ZH/docs/font-variant-numeric.mdx b/src/pages/zhs/docs/font-variant-numeric.mdx similarity index 100% rename from src/pages/ZH/docs/font-variant-numeric.mdx rename to src/pages/zhs/docs/font-variant-numeric.mdx diff --git a/src/pages/ZH/docs/font-weight.mdx b/src/pages/zhs/docs/font-weight.mdx similarity index 100% rename from src/pages/ZH/docs/font-weight.mdx rename to src/pages/zhs/docs/font-weight.mdx diff --git a/src/pages/ZH/docs/functions-and-directives.mdx b/src/pages/zhs/docs/functions-and-directives.mdx similarity index 100% rename from src/pages/ZH/docs/functions-and-directives.mdx rename to src/pages/zhs/docs/functions-and-directives.mdx diff --git a/src/pages/ZH/docs/gap.mdx b/src/pages/zhs/docs/gap.mdx similarity index 100% rename from src/pages/ZH/docs/gap.mdx rename to src/pages/zhs/docs/gap.mdx diff --git a/src/pages/ZH/docs/gradient-color-stops.mdx b/src/pages/zhs/docs/gradient-color-stops.mdx similarity index 100% rename from src/pages/ZH/docs/gradient-color-stops.mdx rename to src/pages/zhs/docs/gradient-color-stops.mdx diff --git a/src/pages/ZH/docs/grayscale.mdx b/src/pages/zhs/docs/grayscale.mdx similarity index 100% rename from src/pages/ZH/docs/grayscale.mdx rename to src/pages/zhs/docs/grayscale.mdx diff --git a/src/pages/ZH/docs/grid-auto-columns.mdx b/src/pages/zhs/docs/grid-auto-columns.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-columns.mdx rename to src/pages/zhs/docs/grid-auto-columns.mdx diff --git a/src/pages/ZH/docs/grid-auto-flow.mdx b/src/pages/zhs/docs/grid-auto-flow.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-flow.mdx rename to src/pages/zhs/docs/grid-auto-flow.mdx diff --git a/src/pages/ZH/docs/grid-auto-rows.mdx b/src/pages/zhs/docs/grid-auto-rows.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-rows.mdx rename to src/pages/zhs/docs/grid-auto-rows.mdx diff --git a/src/pages/ZH/docs/grid-column.mdx b/src/pages/zhs/docs/grid-column.mdx similarity index 100% rename from src/pages/ZH/docs/grid-column.mdx rename to src/pages/zhs/docs/grid-column.mdx diff --git a/src/pages/ZH/docs/grid-row.mdx b/src/pages/zhs/docs/grid-row.mdx similarity index 100% rename from src/pages/ZH/docs/grid-row.mdx rename to src/pages/zhs/docs/grid-row.mdx diff --git a/src/pages/ZH/docs/grid-template-columns.mdx b/src/pages/zhs/docs/grid-template-columns.mdx similarity index 100% rename from src/pages/ZH/docs/grid-template-columns.mdx rename to src/pages/zhs/docs/grid-template-columns.mdx diff --git a/src/pages/ZH/docs/grid-template-rows.mdx b/src/pages/zhs/docs/grid-template-rows.mdx similarity index 100% rename from src/pages/ZH/docs/grid-template-rows.mdx rename to src/pages/zhs/docs/grid-template-rows.mdx diff --git a/src/pages/ZH/docs/guides/create-react-app.js b/src/pages/zhs/docs/guides/create-react-app.js similarity index 100% rename from src/pages/ZH/docs/guides/create-react-app.js rename to src/pages/zhs/docs/guides/create-react-app.js diff --git a/src/pages/ZH/docs/guides/gatsby.js b/src/pages/zhs/docs/guides/gatsby.js similarity index 100% rename from src/pages/ZH/docs/guides/gatsby.js rename to src/pages/zhs/docs/guides/gatsby.js diff --git a/src/pages/ZH/docs/guides/laravel.js b/src/pages/zhs/docs/guides/laravel.js similarity index 100% rename from src/pages/ZH/docs/guides/laravel.js rename to src/pages/zhs/docs/guides/laravel.js diff --git a/src/pages/ZH/docs/guides/nextjs.js b/src/pages/zhs/docs/guides/nextjs.js similarity index 100% rename from src/pages/ZH/docs/guides/nextjs.js rename to src/pages/zhs/docs/guides/nextjs.js diff --git a/src/pages/ZH/docs/guides/nuxtjs.js b/src/pages/zhs/docs/guides/nuxtjs.js similarity index 100% rename from src/pages/ZH/docs/guides/nuxtjs.js rename to src/pages/zhs/docs/guides/nuxtjs.js diff --git a/src/pages/ZH/docs/guides/vite.js b/src/pages/zhs/docs/guides/vite.js similarity index 100% rename from src/pages/ZH/docs/guides/vite.js rename to src/pages/zhs/docs/guides/vite.js diff --git a/src/pages/ZH/docs/height.mdx b/src/pages/zhs/docs/height.mdx similarity index 100% rename from src/pages/ZH/docs/height.mdx rename to src/pages/zhs/docs/height.mdx diff --git a/src/pages/ZH/docs/hover-focus-and-other-states.mdx b/src/pages/zhs/docs/hover-focus-and-other-states.mdx similarity index 100% rename from src/pages/ZH/docs/hover-focus-and-other-states.mdx rename to src/pages/zhs/docs/hover-focus-and-other-states.mdx diff --git a/src/pages/ZH/docs/hue-rotate.mdx b/src/pages/zhs/docs/hue-rotate.mdx similarity index 100% rename from src/pages/ZH/docs/hue-rotate.mdx rename to src/pages/zhs/docs/hue-rotate.mdx diff --git a/src/pages/ZH/docs/installation/framework-guides.js b/src/pages/zhs/docs/installation/framework-guides.js similarity index 100% rename from src/pages/ZH/docs/installation/framework-guides.js rename to src/pages/zhs/docs/installation/framework-guides.js diff --git a/src/pages/ZH/docs/installation/index.js b/src/pages/zhs/docs/installation/index.js similarity index 100% rename from src/pages/ZH/docs/installation/index.js rename to src/pages/zhs/docs/installation/index.js diff --git a/src/pages/ZH/docs/installation/play-cdn.js b/src/pages/zhs/docs/installation/play-cdn.js similarity index 100% rename from src/pages/ZH/docs/installation/play-cdn.js rename to src/pages/zhs/docs/installation/play-cdn.js diff --git a/src/pages/ZH/docs/installation/using-postcss.js b/src/pages/zhs/docs/installation/using-postcss.js similarity index 100% rename from src/pages/ZH/docs/installation/using-postcss.js rename to src/pages/zhs/docs/installation/using-postcss.js diff --git a/src/pages/ZH/docs/invert.mdx b/src/pages/zhs/docs/invert.mdx similarity index 100% rename from src/pages/ZH/docs/invert.mdx rename to src/pages/zhs/docs/invert.mdx diff --git a/src/pages/ZH/docs/isolation.mdx b/src/pages/zhs/docs/isolation.mdx similarity index 100% rename from src/pages/ZH/docs/isolation.mdx rename to src/pages/zhs/docs/isolation.mdx diff --git a/src/pages/ZH/docs/justify-content.mdx b/src/pages/zhs/docs/justify-content.mdx similarity index 100% rename from src/pages/ZH/docs/justify-content.mdx rename to src/pages/zhs/docs/justify-content.mdx diff --git a/src/pages/ZH/docs/justify-items.mdx b/src/pages/zhs/docs/justify-items.mdx similarity index 100% rename from src/pages/ZH/docs/justify-items.mdx rename to src/pages/zhs/docs/justify-items.mdx diff --git a/src/pages/ZH/docs/justify-self.mdx b/src/pages/zhs/docs/justify-self.mdx similarity index 100% rename from src/pages/ZH/docs/justify-self.mdx rename to src/pages/zhs/docs/justify-self.mdx diff --git a/src/pages/ZH/docs/letter-spacing.mdx b/src/pages/zhs/docs/letter-spacing.mdx similarity index 100% rename from src/pages/ZH/docs/letter-spacing.mdx rename to src/pages/zhs/docs/letter-spacing.mdx diff --git a/src/pages/ZH/docs/line-height.mdx b/src/pages/zhs/docs/line-height.mdx similarity index 100% rename from src/pages/ZH/docs/line-height.mdx rename to src/pages/zhs/docs/line-height.mdx diff --git a/src/pages/ZH/docs/list-style-position.mdx b/src/pages/zhs/docs/list-style-position.mdx similarity index 100% rename from src/pages/ZH/docs/list-style-position.mdx rename to src/pages/zhs/docs/list-style-position.mdx diff --git a/src/pages/ZH/docs/list-style-type.mdx b/src/pages/zhs/docs/list-style-type.mdx similarity index 100% rename from src/pages/ZH/docs/list-style-type.mdx rename to src/pages/zhs/docs/list-style-type.mdx diff --git a/src/pages/ZH/docs/margin.mdx b/src/pages/zhs/docs/margin.mdx similarity index 100% rename from src/pages/ZH/docs/margin.mdx rename to src/pages/zhs/docs/margin.mdx diff --git a/src/pages/ZH/docs/max-height.mdx b/src/pages/zhs/docs/max-height.mdx similarity index 100% rename from src/pages/ZH/docs/max-height.mdx rename to src/pages/zhs/docs/max-height.mdx diff --git a/src/pages/ZH/docs/max-width.mdx b/src/pages/zhs/docs/max-width.mdx similarity index 100% rename from src/pages/ZH/docs/max-width.mdx rename to src/pages/zhs/docs/max-width.mdx diff --git a/src/pages/ZH/docs/min-height.mdx b/src/pages/zhs/docs/min-height.mdx similarity index 100% rename from src/pages/ZH/docs/min-height.mdx rename to src/pages/zhs/docs/min-height.mdx diff --git a/src/pages/ZH/docs/min-width.mdx b/src/pages/zhs/docs/min-width.mdx similarity index 100% rename from src/pages/ZH/docs/min-width.mdx rename to src/pages/zhs/docs/min-width.mdx diff --git a/src/pages/ZH/docs/mix-blend-mode.mdx b/src/pages/zhs/docs/mix-blend-mode.mdx similarity index 100% rename from src/pages/ZH/docs/mix-blend-mode.mdx rename to src/pages/zhs/docs/mix-blend-mode.mdx diff --git a/src/pages/ZH/docs/object-fit.mdx b/src/pages/zhs/docs/object-fit.mdx similarity index 100% rename from src/pages/ZH/docs/object-fit.mdx rename to src/pages/zhs/docs/object-fit.mdx diff --git a/src/pages/ZH/docs/object-position.mdx b/src/pages/zhs/docs/object-position.mdx similarity index 100% rename from src/pages/ZH/docs/object-position.mdx rename to src/pages/zhs/docs/object-position.mdx diff --git a/src/pages/ZH/docs/opacity.mdx b/src/pages/zhs/docs/opacity.mdx similarity index 100% rename from src/pages/ZH/docs/opacity.mdx rename to src/pages/zhs/docs/opacity.mdx diff --git a/src/pages/ZH/docs/optimizing-for-production.mdx b/src/pages/zhs/docs/optimizing-for-production.mdx similarity index 100% rename from src/pages/ZH/docs/optimizing-for-production.mdx rename to src/pages/zhs/docs/optimizing-for-production.mdx diff --git a/src/pages/ZH/docs/order.mdx b/src/pages/zhs/docs/order.mdx similarity index 100% rename from src/pages/ZH/docs/order.mdx rename to src/pages/zhs/docs/order.mdx diff --git a/src/pages/ZH/docs/outline-color.mdx b/src/pages/zhs/docs/outline-color.mdx similarity index 100% rename from src/pages/ZH/docs/outline-color.mdx rename to src/pages/zhs/docs/outline-color.mdx diff --git a/src/pages/ZH/docs/outline-offset.mdx b/src/pages/zhs/docs/outline-offset.mdx similarity index 100% rename from src/pages/ZH/docs/outline-offset.mdx rename to src/pages/zhs/docs/outline-offset.mdx diff --git a/src/pages/ZH/docs/outline-style.mdx b/src/pages/zhs/docs/outline-style.mdx similarity index 100% rename from src/pages/ZH/docs/outline-style.mdx rename to src/pages/zhs/docs/outline-style.mdx diff --git a/src/pages/ZH/docs/outline-width.mdx b/src/pages/zhs/docs/outline-width.mdx similarity index 100% rename from src/pages/ZH/docs/outline-width.mdx rename to src/pages/zhs/docs/outline-width.mdx diff --git a/src/pages/ZH/docs/overflow.mdx b/src/pages/zhs/docs/overflow.mdx similarity index 100% rename from src/pages/ZH/docs/overflow.mdx rename to src/pages/zhs/docs/overflow.mdx diff --git a/src/pages/ZH/docs/overscroll-behavior.mdx b/src/pages/zhs/docs/overscroll-behavior.mdx similarity index 100% rename from src/pages/ZH/docs/overscroll-behavior.mdx rename to src/pages/zhs/docs/overscroll-behavior.mdx diff --git a/src/pages/ZH/docs/padding.mdx b/src/pages/zhs/docs/padding.mdx similarity index 100% rename from src/pages/ZH/docs/padding.mdx rename to src/pages/zhs/docs/padding.mdx diff --git a/src/pages/ZH/docs/place-content.mdx b/src/pages/zhs/docs/place-content.mdx similarity index 100% rename from src/pages/ZH/docs/place-content.mdx rename to src/pages/zhs/docs/place-content.mdx diff --git a/src/pages/ZH/docs/place-items.mdx b/src/pages/zhs/docs/place-items.mdx similarity index 100% rename from src/pages/ZH/docs/place-items.mdx rename to src/pages/zhs/docs/place-items.mdx diff --git a/src/pages/ZH/docs/place-self.mdx b/src/pages/zhs/docs/place-self.mdx similarity index 100% rename from src/pages/ZH/docs/place-self.mdx rename to src/pages/zhs/docs/place-self.mdx diff --git a/src/pages/ZH/docs/play-cdn.mdx b/src/pages/zhs/docs/play-cdn.mdx similarity index 100% rename from src/pages/ZH/docs/play-cdn.mdx rename to src/pages/zhs/docs/play-cdn.mdx diff --git a/src/pages/ZH/docs/plugins.mdx b/src/pages/zhs/docs/plugins.mdx similarity index 100% rename from src/pages/ZH/docs/plugins.mdx rename to src/pages/zhs/docs/plugins.mdx diff --git a/src/pages/ZH/docs/pointer-events.mdx b/src/pages/zhs/docs/pointer-events.mdx similarity index 100% rename from src/pages/ZH/docs/pointer-events.mdx rename to src/pages/zhs/docs/pointer-events.mdx diff --git a/src/pages/ZH/docs/position.mdx b/src/pages/zhs/docs/position.mdx similarity index 100% rename from src/pages/ZH/docs/position.mdx rename to src/pages/zhs/docs/position.mdx diff --git a/src/pages/ZH/docs/preflight.mdx b/src/pages/zhs/docs/preflight.mdx similarity index 100% rename from src/pages/ZH/docs/preflight.mdx rename to src/pages/zhs/docs/preflight.mdx diff --git a/src/pages/ZH/docs/presets.mdx b/src/pages/zhs/docs/presets.mdx similarity index 100% rename from src/pages/ZH/docs/presets.mdx rename to src/pages/zhs/docs/presets.mdx diff --git a/src/pages/ZH/docs/resize.mdx b/src/pages/zhs/docs/resize.mdx similarity index 100% rename from src/pages/ZH/docs/resize.mdx rename to src/pages/zhs/docs/resize.mdx diff --git a/src/pages/ZH/docs/responsive-design.mdx b/src/pages/zhs/docs/responsive-design.mdx similarity index 100% rename from src/pages/ZH/docs/responsive-design.mdx rename to src/pages/zhs/docs/responsive-design.mdx diff --git a/src/pages/ZH/docs/reusing-styles.mdx b/src/pages/zhs/docs/reusing-styles.mdx similarity index 100% rename from src/pages/ZH/docs/reusing-styles.mdx rename to src/pages/zhs/docs/reusing-styles.mdx diff --git a/src/pages/ZH/docs/ring-color.mdx b/src/pages/zhs/docs/ring-color.mdx similarity index 100% rename from src/pages/ZH/docs/ring-color.mdx rename to src/pages/zhs/docs/ring-color.mdx diff --git a/src/pages/ZH/docs/ring-offset-color.mdx b/src/pages/zhs/docs/ring-offset-color.mdx similarity index 100% rename from src/pages/ZH/docs/ring-offset-color.mdx rename to src/pages/zhs/docs/ring-offset-color.mdx diff --git a/src/pages/ZH/docs/ring-offset-width.mdx b/src/pages/zhs/docs/ring-offset-width.mdx similarity index 100% rename from src/pages/ZH/docs/ring-offset-width.mdx rename to src/pages/zhs/docs/ring-offset-width.mdx diff --git a/src/pages/ZH/docs/ring-width.mdx b/src/pages/zhs/docs/ring-width.mdx similarity index 100% rename from src/pages/ZH/docs/ring-width.mdx rename to src/pages/zhs/docs/ring-width.mdx diff --git a/src/pages/ZH/docs/rotate.mdx b/src/pages/zhs/docs/rotate.mdx similarity index 100% rename from src/pages/ZH/docs/rotate.mdx rename to src/pages/zhs/docs/rotate.mdx diff --git a/src/pages/ZH/docs/saturate.mdx b/src/pages/zhs/docs/saturate.mdx similarity index 100% rename from src/pages/ZH/docs/saturate.mdx rename to src/pages/zhs/docs/saturate.mdx diff --git a/src/pages/ZH/docs/scale.mdx b/src/pages/zhs/docs/scale.mdx similarity index 100% rename from src/pages/ZH/docs/scale.mdx rename to src/pages/zhs/docs/scale.mdx diff --git a/src/pages/ZH/docs/screen-readers.mdx b/src/pages/zhs/docs/screen-readers.mdx similarity index 100% rename from src/pages/ZH/docs/screen-readers.mdx rename to src/pages/zhs/docs/screen-readers.mdx diff --git a/src/pages/ZH/docs/screens.mdx b/src/pages/zhs/docs/screens.mdx similarity index 100% rename from src/pages/ZH/docs/screens.mdx rename to src/pages/zhs/docs/screens.mdx diff --git a/src/pages/ZH/docs/scroll-behavior.mdx b/src/pages/zhs/docs/scroll-behavior.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-behavior.mdx rename to src/pages/zhs/docs/scroll-behavior.mdx diff --git a/src/pages/ZH/docs/scroll-margin.mdx b/src/pages/zhs/docs/scroll-margin.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-margin.mdx rename to src/pages/zhs/docs/scroll-margin.mdx diff --git a/src/pages/ZH/docs/scroll-padding.mdx b/src/pages/zhs/docs/scroll-padding.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-padding.mdx rename to src/pages/zhs/docs/scroll-padding.mdx diff --git a/src/pages/ZH/docs/scroll-snap-align.mdx b/src/pages/zhs/docs/scroll-snap-align.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-align.mdx rename to src/pages/zhs/docs/scroll-snap-align.mdx diff --git a/src/pages/ZH/docs/scroll-snap-stop.mdx b/src/pages/zhs/docs/scroll-snap-stop.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-stop.mdx rename to src/pages/zhs/docs/scroll-snap-stop.mdx diff --git a/src/pages/ZH/docs/scroll-snap-type.mdx b/src/pages/zhs/docs/scroll-snap-type.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-type.mdx rename to src/pages/zhs/docs/scroll-snap-type.mdx diff --git a/src/pages/ZH/docs/sepia.mdx b/src/pages/zhs/docs/sepia.mdx similarity index 100% rename from src/pages/ZH/docs/sepia.mdx rename to src/pages/zhs/docs/sepia.mdx diff --git a/src/pages/ZH/docs/skew.mdx b/src/pages/zhs/docs/skew.mdx similarity index 100% rename from src/pages/ZH/docs/skew.mdx rename to src/pages/zhs/docs/skew.mdx diff --git a/src/pages/ZH/docs/space.mdx b/src/pages/zhs/docs/space.mdx similarity index 100% rename from src/pages/ZH/docs/space.mdx rename to src/pages/zhs/docs/space.mdx diff --git a/src/pages/ZH/docs/stroke-width.mdx b/src/pages/zhs/docs/stroke-width.mdx similarity index 100% rename from src/pages/ZH/docs/stroke-width.mdx rename to src/pages/zhs/docs/stroke-width.mdx diff --git a/src/pages/ZH/docs/stroke.mdx b/src/pages/zhs/docs/stroke.mdx similarity index 100% rename from src/pages/ZH/docs/stroke.mdx rename to src/pages/zhs/docs/stroke.mdx diff --git a/src/pages/ZH/docs/table-layout.mdx b/src/pages/zhs/docs/table-layout.mdx similarity index 100% rename from src/pages/ZH/docs/table-layout.mdx rename to src/pages/zhs/docs/table-layout.mdx diff --git a/src/pages/ZH/docs/tailwind-cli.mdx b/src/pages/zhs/docs/tailwind-cli.mdx similarity index 100% rename from src/pages/ZH/docs/tailwind-cli.mdx rename to src/pages/zhs/docs/tailwind-cli.mdx diff --git a/src/pages/ZH/docs/text-align.mdx b/src/pages/zhs/docs/text-align.mdx similarity index 100% rename from src/pages/ZH/docs/text-align.mdx rename to src/pages/zhs/docs/text-align.mdx diff --git a/src/pages/ZH/docs/text-color.mdx b/src/pages/zhs/docs/text-color.mdx similarity index 100% rename from src/pages/ZH/docs/text-color.mdx rename to src/pages/zhs/docs/text-color.mdx diff --git a/src/pages/ZH/docs/text-decoration-color.mdx b/src/pages/zhs/docs/text-decoration-color.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-color.mdx rename to src/pages/zhs/docs/text-decoration-color.mdx diff --git a/src/pages/ZH/docs/text-decoration-style.mdx b/src/pages/zhs/docs/text-decoration-style.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-style.mdx rename to src/pages/zhs/docs/text-decoration-style.mdx diff --git a/src/pages/ZH/docs/text-decoration-thickness.mdx b/src/pages/zhs/docs/text-decoration-thickness.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-thickness.mdx rename to src/pages/zhs/docs/text-decoration-thickness.mdx diff --git a/src/pages/ZH/docs/text-decoration.mdx b/src/pages/zhs/docs/text-decoration.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration.mdx rename to src/pages/zhs/docs/text-decoration.mdx diff --git a/src/pages/ZH/docs/text-indent.mdx b/src/pages/zhs/docs/text-indent.mdx similarity index 100% rename from src/pages/ZH/docs/text-indent.mdx rename to src/pages/zhs/docs/text-indent.mdx diff --git a/src/pages/ZH/docs/text-overflow.mdx b/src/pages/zhs/docs/text-overflow.mdx similarity index 100% rename from src/pages/ZH/docs/text-overflow.mdx rename to src/pages/zhs/docs/text-overflow.mdx diff --git a/src/pages/ZH/docs/text-transform.mdx b/src/pages/zhs/docs/text-transform.mdx similarity index 100% rename from src/pages/ZH/docs/text-transform.mdx rename to src/pages/zhs/docs/text-transform.mdx diff --git a/src/pages/ZH/docs/text-underline-offset.mdx b/src/pages/zhs/docs/text-underline-offset.mdx similarity index 100% rename from src/pages/ZH/docs/text-underline-offset.mdx rename to src/pages/zhs/docs/text-underline-offset.mdx diff --git a/src/pages/ZH/docs/theme.mdx b/src/pages/zhs/docs/theme.mdx similarity index 100% rename from src/pages/ZH/docs/theme.mdx rename to src/pages/zhs/docs/theme.mdx diff --git a/src/pages/ZH/docs/top-right-bottom-left.mdx b/src/pages/zhs/docs/top-right-bottom-left.mdx similarity index 100% rename from src/pages/ZH/docs/top-right-bottom-left.mdx rename to src/pages/zhs/docs/top-right-bottom-left.mdx diff --git a/src/pages/ZH/docs/touch-action.mdx b/src/pages/zhs/docs/touch-action.mdx similarity index 100% rename from src/pages/ZH/docs/touch-action.mdx rename to src/pages/zhs/docs/touch-action.mdx diff --git a/src/pages/ZH/docs/transform-origin.mdx b/src/pages/zhs/docs/transform-origin.mdx similarity index 100% rename from src/pages/ZH/docs/transform-origin.mdx rename to src/pages/zhs/docs/transform-origin.mdx diff --git a/src/pages/ZH/docs/transition-delay.mdx b/src/pages/zhs/docs/transition-delay.mdx similarity index 100% rename from src/pages/ZH/docs/transition-delay.mdx rename to src/pages/zhs/docs/transition-delay.mdx diff --git a/src/pages/ZH/docs/transition-duration.mdx b/src/pages/zhs/docs/transition-duration.mdx similarity index 100% rename from src/pages/ZH/docs/transition-duration.mdx rename to src/pages/zhs/docs/transition-duration.mdx diff --git a/src/pages/ZH/docs/transition-property.mdx b/src/pages/zhs/docs/transition-property.mdx similarity index 100% rename from src/pages/ZH/docs/transition-property.mdx rename to src/pages/zhs/docs/transition-property.mdx diff --git a/src/pages/ZH/docs/transition-timing-function.mdx b/src/pages/zhs/docs/transition-timing-function.mdx similarity index 100% rename from src/pages/ZH/docs/transition-timing-function.mdx rename to src/pages/zhs/docs/transition-timing-function.mdx diff --git a/src/pages/ZH/docs/translate.mdx b/src/pages/zhs/docs/translate.mdx similarity index 100% rename from src/pages/ZH/docs/translate.mdx rename to src/pages/zhs/docs/translate.mdx diff --git a/src/pages/ZH/docs/upgrade-guide.mdx b/src/pages/zhs/docs/upgrade-guide.mdx similarity index 100% rename from src/pages/ZH/docs/upgrade-guide.mdx rename to src/pages/zhs/docs/upgrade-guide.mdx diff --git a/src/pages/ZH/docs/user-select.mdx b/src/pages/zhs/docs/user-select.mdx similarity index 100% rename from src/pages/ZH/docs/user-select.mdx rename to src/pages/zhs/docs/user-select.mdx diff --git a/src/pages/ZH/docs/using-with-preprocessors.mdx b/src/pages/zhs/docs/using-with-preprocessors.mdx similarity index 100% rename from src/pages/ZH/docs/using-with-preprocessors.mdx rename to src/pages/zhs/docs/using-with-preprocessors.mdx diff --git a/src/pages/ZH/docs/utility-first.mdx b/src/pages/zhs/docs/utility-first.mdx similarity index 100% rename from src/pages/ZH/docs/utility-first.mdx rename to src/pages/zhs/docs/utility-first.mdx diff --git a/src/pages/ZH/docs/vertical-align.mdx b/src/pages/zhs/docs/vertical-align.mdx similarity index 100% rename from src/pages/ZH/docs/vertical-align.mdx rename to src/pages/zhs/docs/vertical-align.mdx diff --git a/src/pages/ZH/docs/visibility.mdx b/src/pages/zhs/docs/visibility.mdx similarity index 100% rename from src/pages/ZH/docs/visibility.mdx rename to src/pages/zhs/docs/visibility.mdx diff --git a/src/pages/ZH/docs/whitespace.mdx b/src/pages/zhs/docs/whitespace.mdx similarity index 100% rename from src/pages/ZH/docs/whitespace.mdx rename to src/pages/zhs/docs/whitespace.mdx diff --git a/src/pages/ZH/docs/width.mdx b/src/pages/zhs/docs/width.mdx similarity index 100% rename from src/pages/ZH/docs/width.mdx rename to src/pages/zhs/docs/width.mdx diff --git a/src/pages/ZH/docs/will-change.mdx b/src/pages/zhs/docs/will-change.mdx similarity index 100% rename from src/pages/ZH/docs/will-change.mdx rename to src/pages/zhs/docs/will-change.mdx diff --git a/src/pages/ZH/docs/word-break.mdx b/src/pages/zhs/docs/word-break.mdx similarity index 100% rename from src/pages/ZH/docs/word-break.mdx rename to src/pages/zhs/docs/word-break.mdx diff --git a/src/pages/ZH/docs/z-index.mdx b/src/pages/zhs/docs/z-index.mdx similarity index 100% rename from src/pages/ZH/docs/z-index.mdx rename to src/pages/zhs/docs/z-index.mdx From 541a63fbb9d3147daf7c0fd815b3b91c454b5ef1 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:34:43 +0800 Subject: [PATCH 19/48] dir name change back --- src/pages/{zhs => zh}/brand.mdx | 0 src/pages/{zhs => zh}/docs/accent-color.mdx | 0 src/pages/{zhs => zh}/docs/adding-base-styles.mdx | 0 src/pages/{zhs => zh}/docs/adding-custom-styles.mdx | 0 src/pages/{zhs => zh}/docs/adding-new-utilities.mdx | 0 src/pages/{zhs => zh}/docs/align-content.mdx | 0 src/pages/{zhs => zh}/docs/align-items.mdx | 0 src/pages/{zhs => zh}/docs/align-self.mdx | 0 src/pages/{zhs => zh}/docs/animation.mdx | 0 src/pages/{zhs => zh}/docs/appearance.mdx | 0 src/pages/{zhs => zh}/docs/aspect-ratio.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-blur.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-brightness.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-contrast.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-grayscale.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-hue-rotate.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-invert.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-opacity.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-saturate.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-sepia.mdx | 0 src/pages/{zhs => zh}/docs/background-attachment.mdx | 0 src/pages/{zhs => zh}/docs/background-blend-mode.mdx | 0 src/pages/{zhs => zh}/docs/background-clip.mdx | 0 src/pages/{zhs => zh}/docs/background-color.mdx | 0 src/pages/{zhs => zh}/docs/background-image.mdx | 0 src/pages/{zhs => zh}/docs/background-origin.mdx | 0 src/pages/{zhs => zh}/docs/background-position.mdx | 0 src/pages/{zhs => zh}/docs/background-repeat.mdx | 0 src/pages/{zhs => zh}/docs/background-size.mdx | 0 src/pages/{zhs => zh}/docs/blur.mdx | 0 src/pages/{zhs => zh}/docs/border-collapse.mdx | 0 src/pages/{zhs => zh}/docs/border-color.mdx | 0 src/pages/{zhs => zh}/docs/border-radius.mdx | 0 src/pages/{zhs => zh}/docs/border-style.mdx | 0 src/pages/{zhs => zh}/docs/border-width.mdx | 0 src/pages/{zhs => zh}/docs/box-decoration-break.mdx | 0 src/pages/{zhs => zh}/docs/box-shadow-color.mdx | 0 src/pages/{zhs => zh}/docs/box-shadow.mdx | 0 src/pages/{zhs => zh}/docs/box-sizing.mdx | 0 src/pages/{zhs => zh}/docs/break-after.mdx | 0 src/pages/{zhs => zh}/docs/break-before.mdx | 0 src/pages/{zhs => zh}/docs/break-inside.mdx | 0 src/pages/{zhs => zh}/docs/brightness.mdx | 0 src/pages/{zhs => zh}/docs/browser-support.mdx | 0 src/pages/{zhs => zh}/docs/caret-color.mdx | 0 src/pages/{zhs => zh}/docs/clear.mdx | 0 src/pages/{zhs => zh}/docs/columns.mdx | 0 src/pages/{zhs => zh}/docs/configuration.mdx | 0 src/pages/{zhs => zh}/docs/container.mdx | 0 src/pages/{zhs => zh}/docs/content-configuration.mdx | 0 src/pages/{zhs => zh}/docs/content.mdx | 0 src/pages/{zhs => zh}/docs/contrast.mdx | 0 src/pages/{zhs => zh}/docs/cursor.mdx | 0 src/pages/{zhs => zh}/docs/customizing-colors.mdx | 0 src/pages/{zhs => zh}/docs/customizing-spacing.mdx | 0 src/pages/{zhs => zh}/docs/dark-mode.mdx | 0 src/pages/{zhs => zh}/docs/display.mdx | 0 src/pages/{zhs => zh}/docs/divide-color.mdx | 0 src/pages/{zhs => zh}/docs/divide-style.mdx | 0 src/pages/{zhs => zh}/docs/divide-width.mdx | 0 src/pages/{zhs => zh}/docs/drop-shadow.mdx | 0 src/pages/{zhs => zh}/docs/editor-setup.mdx | 0 src/pages/{zhs => zh}/docs/fill.mdx | 0 src/pages/{zhs => zh}/docs/flex-basis.mdx | 0 src/pages/{zhs => zh}/docs/flex-direction.mdx | 0 src/pages/{zhs => zh}/docs/flex-grow.mdx | 0 src/pages/{zhs => zh}/docs/flex-shrink.mdx | 0 src/pages/{zhs => zh}/docs/flex-wrap.mdx | 0 src/pages/{zhs => zh}/docs/flex.mdx | 0 src/pages/{zhs => zh}/docs/float.mdx | 0 src/pages/{zhs => zh}/docs/font-family.mdx | 0 src/pages/{zhs => zh}/docs/font-size.mdx | 0 src/pages/{zhs => zh}/docs/font-smoothing.mdx | 0 src/pages/{zhs => zh}/docs/font-style.mdx | 0 src/pages/{zhs => zh}/docs/font-variant-numeric.mdx | 0 src/pages/{zhs => zh}/docs/font-weight.mdx | 0 src/pages/{zhs => zh}/docs/functions-and-directives.mdx | 0 src/pages/{zhs => zh}/docs/gap.mdx | 0 src/pages/{zhs => zh}/docs/gradient-color-stops.mdx | 0 src/pages/{zhs => zh}/docs/grayscale.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-columns.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-flow.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-rows.mdx | 0 src/pages/{zhs => zh}/docs/grid-column.mdx | 0 src/pages/{zhs => zh}/docs/grid-row.mdx | 0 src/pages/{zhs => zh}/docs/grid-template-columns.mdx | 0 src/pages/{zhs => zh}/docs/grid-template-rows.mdx | 0 src/pages/{zhs => zh}/docs/guides/create-react-app.js | 0 src/pages/{zhs => zh}/docs/guides/gatsby.js | 0 src/pages/{zhs => zh}/docs/guides/laravel.js | 0 src/pages/{zhs => zh}/docs/guides/nextjs.js | 0 src/pages/{zhs => zh}/docs/guides/nuxtjs.js | 0 src/pages/{zhs => zh}/docs/guides/vite.js | 0 src/pages/{zhs => zh}/docs/height.mdx | 0 src/pages/{zhs => zh}/docs/hover-focus-and-other-states.mdx | 0 src/pages/{zhs => zh}/docs/hue-rotate.mdx | 0 src/pages/{zhs => zh}/docs/installation/framework-guides.js | 0 src/pages/{zhs => zh}/docs/installation/index.js | 0 src/pages/{zhs => zh}/docs/installation/play-cdn.js | 0 src/pages/{zhs => zh}/docs/installation/using-postcss.js | 0 src/pages/{zhs => zh}/docs/invert.mdx | 0 src/pages/{zhs => zh}/docs/isolation.mdx | 0 src/pages/{zhs => zh}/docs/justify-content.mdx | 0 src/pages/{zhs => zh}/docs/justify-items.mdx | 0 src/pages/{zhs => zh}/docs/justify-self.mdx | 0 src/pages/{zhs => zh}/docs/letter-spacing.mdx | 0 src/pages/{zhs => zh}/docs/line-height.mdx | 0 src/pages/{zhs => zh}/docs/list-style-position.mdx | 0 src/pages/{zhs => zh}/docs/list-style-type.mdx | 0 src/pages/{zhs => zh}/docs/margin.mdx | 0 src/pages/{zhs => zh}/docs/max-height.mdx | 0 src/pages/{zhs => zh}/docs/max-width.mdx | 0 src/pages/{zhs => zh}/docs/min-height.mdx | 0 src/pages/{zhs => zh}/docs/min-width.mdx | 0 src/pages/{zhs => zh}/docs/mix-blend-mode.mdx | 0 src/pages/{zhs => zh}/docs/object-fit.mdx | 0 src/pages/{zhs => zh}/docs/object-position.mdx | 0 src/pages/{zhs => zh}/docs/opacity.mdx | 0 src/pages/{zhs => zh}/docs/optimizing-for-production.mdx | 0 src/pages/{zhs => zh}/docs/order.mdx | 0 src/pages/{zhs => zh}/docs/outline-color.mdx | 0 src/pages/{zhs => zh}/docs/outline-offset.mdx | 0 src/pages/{zhs => zh}/docs/outline-style.mdx | 0 src/pages/{zhs => zh}/docs/outline-width.mdx | 0 src/pages/{zhs => zh}/docs/overflow.mdx | 0 src/pages/{zhs => zh}/docs/overscroll-behavior.mdx | 0 src/pages/{zhs => zh}/docs/padding.mdx | 0 src/pages/{zhs => zh}/docs/place-content.mdx | 0 src/pages/{zhs => zh}/docs/place-items.mdx | 0 src/pages/{zhs => zh}/docs/place-self.mdx | 0 src/pages/{zhs => zh}/docs/play-cdn.mdx | 0 src/pages/{zhs => zh}/docs/plugins.mdx | 0 src/pages/{zhs => zh}/docs/pointer-events.mdx | 0 src/pages/{zhs => zh}/docs/position.mdx | 0 src/pages/{zhs => zh}/docs/preflight.mdx | 0 src/pages/{zhs => zh}/docs/presets.mdx | 0 src/pages/{zhs => zh}/docs/resize.mdx | 0 src/pages/{zhs => zh}/docs/responsive-design.mdx | 0 src/pages/{zhs => zh}/docs/reusing-styles.mdx | 0 src/pages/{zhs => zh}/docs/ring-color.mdx | 0 src/pages/{zhs => zh}/docs/ring-offset-color.mdx | 0 src/pages/{zhs => zh}/docs/ring-offset-width.mdx | 0 src/pages/{zhs => zh}/docs/ring-width.mdx | 0 src/pages/{zhs => zh}/docs/rotate.mdx | 0 src/pages/{zhs => zh}/docs/saturate.mdx | 0 src/pages/{zhs => zh}/docs/scale.mdx | 0 src/pages/{zhs => zh}/docs/screen-readers.mdx | 0 src/pages/{zhs => zh}/docs/screens.mdx | 0 src/pages/{zhs => zh}/docs/scroll-behavior.mdx | 0 src/pages/{zhs => zh}/docs/scroll-margin.mdx | 0 src/pages/{zhs => zh}/docs/scroll-padding.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-align.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-stop.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-type.mdx | 0 src/pages/{zhs => zh}/docs/sepia.mdx | 0 src/pages/{zhs => zh}/docs/skew.mdx | 0 src/pages/{zhs => zh}/docs/space.mdx | 0 src/pages/{zhs => zh}/docs/stroke-width.mdx | 0 src/pages/{zhs => zh}/docs/stroke.mdx | 0 src/pages/{zhs => zh}/docs/table-layout.mdx | 0 src/pages/{zhs => zh}/docs/tailwind-cli.mdx | 0 src/pages/{zhs => zh}/docs/text-align.mdx | 0 src/pages/{zhs => zh}/docs/text-color.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-color.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-style.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-thickness.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration.mdx | 0 src/pages/{zhs => zh}/docs/text-indent.mdx | 0 src/pages/{zhs => zh}/docs/text-overflow.mdx | 0 src/pages/{zhs => zh}/docs/text-transform.mdx | 0 src/pages/{zhs => zh}/docs/text-underline-offset.mdx | 0 src/pages/{zhs => zh}/docs/theme.mdx | 0 src/pages/{zhs => zh}/docs/top-right-bottom-left.mdx | 0 src/pages/{zhs => zh}/docs/touch-action.mdx | 0 src/pages/{zhs => zh}/docs/transform-origin.mdx | 0 src/pages/{zhs => zh}/docs/transition-delay.mdx | 0 src/pages/{zhs => zh}/docs/transition-duration.mdx | 0 src/pages/{zhs => zh}/docs/transition-property.mdx | 0 src/pages/{zhs => zh}/docs/transition-timing-function.mdx | 0 src/pages/{zhs => zh}/docs/translate.mdx | 0 src/pages/{zhs => zh}/docs/upgrade-guide.mdx | 0 src/pages/{zhs => zh}/docs/user-select.mdx | 0 src/pages/{zhs => zh}/docs/using-with-preprocessors.mdx | 0 src/pages/{zhs => zh}/docs/utility-first.mdx | 0 src/pages/{zhs => zh}/docs/vertical-align.mdx | 0 src/pages/{zhs => zh}/docs/visibility.mdx | 0 src/pages/{zhs => zh}/docs/whitespace.mdx | 0 src/pages/{zhs => zh}/docs/width.mdx | 0 src/pages/{zhs => zh}/docs/will-change.mdx | 0 src/pages/{zhs => zh}/docs/word-break.mdx | 0 src/pages/{zhs => zh}/docs/z-index.mdx | 0 191 files changed, 0 insertions(+), 0 deletions(-) rename src/pages/{zhs => zh}/brand.mdx (100%) rename src/pages/{zhs => zh}/docs/accent-color.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-base-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-custom-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-new-utilities.mdx (100%) rename src/pages/{zhs => zh}/docs/align-content.mdx (100%) rename src/pages/{zhs => zh}/docs/align-items.mdx (100%) rename src/pages/{zhs => zh}/docs/align-self.mdx (100%) rename src/pages/{zhs => zh}/docs/animation.mdx (100%) rename src/pages/{zhs => zh}/docs/appearance.mdx (100%) rename src/pages/{zhs => zh}/docs/aspect-ratio.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-blur.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-brightness.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-contrast.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-grayscale.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-hue-rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-invert.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-opacity.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-saturate.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-sepia.mdx (100%) rename src/pages/{zhs => zh}/docs/background-attachment.mdx (100%) rename src/pages/{zhs => zh}/docs/background-blend-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/background-clip.mdx (100%) rename src/pages/{zhs => zh}/docs/background-color.mdx (100%) rename src/pages/{zhs => zh}/docs/background-image.mdx (100%) rename src/pages/{zhs => zh}/docs/background-origin.mdx (100%) rename src/pages/{zhs => zh}/docs/background-position.mdx (100%) rename src/pages/{zhs => zh}/docs/background-repeat.mdx (100%) rename src/pages/{zhs => zh}/docs/background-size.mdx (100%) rename src/pages/{zhs => zh}/docs/blur.mdx (100%) rename src/pages/{zhs => zh}/docs/border-collapse.mdx (100%) rename src/pages/{zhs => zh}/docs/border-color.mdx (100%) rename src/pages/{zhs => zh}/docs/border-radius.mdx (100%) rename src/pages/{zhs => zh}/docs/border-style.mdx (100%) rename src/pages/{zhs => zh}/docs/border-width.mdx (100%) rename src/pages/{zhs => zh}/docs/box-decoration-break.mdx (100%) rename src/pages/{zhs => zh}/docs/box-shadow-color.mdx (100%) rename src/pages/{zhs => zh}/docs/box-shadow.mdx (100%) rename src/pages/{zhs => zh}/docs/box-sizing.mdx (100%) rename src/pages/{zhs => zh}/docs/break-after.mdx (100%) rename src/pages/{zhs => zh}/docs/break-before.mdx (100%) rename src/pages/{zhs => zh}/docs/break-inside.mdx (100%) rename src/pages/{zhs => zh}/docs/brightness.mdx (100%) rename src/pages/{zhs => zh}/docs/browser-support.mdx (100%) rename src/pages/{zhs => zh}/docs/caret-color.mdx (100%) rename src/pages/{zhs => zh}/docs/clear.mdx (100%) rename src/pages/{zhs => zh}/docs/columns.mdx (100%) rename src/pages/{zhs => zh}/docs/configuration.mdx (100%) rename src/pages/{zhs => zh}/docs/container.mdx (100%) rename src/pages/{zhs => zh}/docs/content-configuration.mdx (100%) rename src/pages/{zhs => zh}/docs/content.mdx (100%) rename src/pages/{zhs => zh}/docs/contrast.mdx (100%) rename src/pages/{zhs => zh}/docs/cursor.mdx (100%) rename src/pages/{zhs => zh}/docs/customizing-colors.mdx (100%) rename src/pages/{zhs => zh}/docs/customizing-spacing.mdx (100%) rename src/pages/{zhs => zh}/docs/dark-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/display.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-color.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-style.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-width.mdx (100%) rename src/pages/{zhs => zh}/docs/drop-shadow.mdx (100%) rename src/pages/{zhs => zh}/docs/editor-setup.mdx (100%) rename src/pages/{zhs => zh}/docs/fill.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-basis.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-direction.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-grow.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-shrink.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-wrap.mdx (100%) rename src/pages/{zhs => zh}/docs/flex.mdx (100%) rename src/pages/{zhs => zh}/docs/float.mdx (100%) rename src/pages/{zhs => zh}/docs/font-family.mdx (100%) rename src/pages/{zhs => zh}/docs/font-size.mdx (100%) rename src/pages/{zhs => zh}/docs/font-smoothing.mdx (100%) rename src/pages/{zhs => zh}/docs/font-style.mdx (100%) rename src/pages/{zhs => zh}/docs/font-variant-numeric.mdx (100%) rename src/pages/{zhs => zh}/docs/font-weight.mdx (100%) rename src/pages/{zhs => zh}/docs/functions-and-directives.mdx (100%) rename src/pages/{zhs => zh}/docs/gap.mdx (100%) rename src/pages/{zhs => zh}/docs/gradient-color-stops.mdx (100%) rename src/pages/{zhs => zh}/docs/grayscale.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-columns.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-flow.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-rows.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-column.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-row.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-template-columns.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-template-rows.mdx (100%) rename src/pages/{zhs => zh}/docs/guides/create-react-app.js (100%) rename src/pages/{zhs => zh}/docs/guides/gatsby.js (100%) rename src/pages/{zhs => zh}/docs/guides/laravel.js (100%) rename src/pages/{zhs => zh}/docs/guides/nextjs.js (100%) rename src/pages/{zhs => zh}/docs/guides/nuxtjs.js (100%) rename src/pages/{zhs => zh}/docs/guides/vite.js (100%) rename src/pages/{zhs => zh}/docs/height.mdx (100%) rename src/pages/{zhs => zh}/docs/hover-focus-and-other-states.mdx (100%) rename src/pages/{zhs => zh}/docs/hue-rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/installation/framework-guides.js (100%) rename src/pages/{zhs => zh}/docs/installation/index.js (100%) rename src/pages/{zhs => zh}/docs/installation/play-cdn.js (100%) rename src/pages/{zhs => zh}/docs/installation/using-postcss.js (100%) rename src/pages/{zhs => zh}/docs/invert.mdx (100%) rename src/pages/{zhs => zh}/docs/isolation.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-content.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-items.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-self.mdx (100%) rename src/pages/{zhs => zh}/docs/letter-spacing.mdx (100%) rename src/pages/{zhs => zh}/docs/line-height.mdx (100%) rename src/pages/{zhs => zh}/docs/list-style-position.mdx (100%) rename src/pages/{zhs => zh}/docs/list-style-type.mdx (100%) rename src/pages/{zhs => zh}/docs/margin.mdx (100%) rename src/pages/{zhs => zh}/docs/max-height.mdx (100%) rename src/pages/{zhs => zh}/docs/max-width.mdx (100%) rename src/pages/{zhs => zh}/docs/min-height.mdx (100%) rename src/pages/{zhs => zh}/docs/min-width.mdx (100%) rename src/pages/{zhs => zh}/docs/mix-blend-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/object-fit.mdx (100%) rename src/pages/{zhs => zh}/docs/object-position.mdx (100%) rename src/pages/{zhs => zh}/docs/opacity.mdx (100%) rename src/pages/{zhs => zh}/docs/optimizing-for-production.mdx (100%) rename src/pages/{zhs => zh}/docs/order.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-color.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-offset.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-style.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-width.mdx (100%) rename src/pages/{zhs => zh}/docs/overflow.mdx (100%) rename src/pages/{zhs => zh}/docs/overscroll-behavior.mdx (100%) rename src/pages/{zhs => zh}/docs/padding.mdx (100%) rename src/pages/{zhs => zh}/docs/place-content.mdx (100%) rename src/pages/{zhs => zh}/docs/place-items.mdx (100%) rename src/pages/{zhs => zh}/docs/place-self.mdx (100%) rename src/pages/{zhs => zh}/docs/play-cdn.mdx (100%) rename src/pages/{zhs => zh}/docs/plugins.mdx (100%) rename src/pages/{zhs => zh}/docs/pointer-events.mdx (100%) rename src/pages/{zhs => zh}/docs/position.mdx (100%) rename src/pages/{zhs => zh}/docs/preflight.mdx (100%) rename src/pages/{zhs => zh}/docs/presets.mdx (100%) rename src/pages/{zhs => zh}/docs/resize.mdx (100%) rename src/pages/{zhs => zh}/docs/responsive-design.mdx (100%) rename src/pages/{zhs => zh}/docs/reusing-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-color.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-offset-color.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-offset-width.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-width.mdx (100%) rename src/pages/{zhs => zh}/docs/rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/saturate.mdx (100%) rename src/pages/{zhs => zh}/docs/scale.mdx (100%) rename src/pages/{zhs => zh}/docs/screen-readers.mdx (100%) rename src/pages/{zhs => zh}/docs/screens.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-behavior.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-margin.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-padding.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-align.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-stop.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-type.mdx (100%) rename src/pages/{zhs => zh}/docs/sepia.mdx (100%) rename src/pages/{zhs => zh}/docs/skew.mdx (100%) rename src/pages/{zhs => zh}/docs/space.mdx (100%) rename src/pages/{zhs => zh}/docs/stroke-width.mdx (100%) rename src/pages/{zhs => zh}/docs/stroke.mdx (100%) rename src/pages/{zhs => zh}/docs/table-layout.mdx (100%) rename src/pages/{zhs => zh}/docs/tailwind-cli.mdx (100%) rename src/pages/{zhs => zh}/docs/text-align.mdx (100%) rename src/pages/{zhs => zh}/docs/text-color.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-color.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-style.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-thickness.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration.mdx (100%) rename src/pages/{zhs => zh}/docs/text-indent.mdx (100%) rename src/pages/{zhs => zh}/docs/text-overflow.mdx (100%) rename src/pages/{zhs => zh}/docs/text-transform.mdx (100%) rename src/pages/{zhs => zh}/docs/text-underline-offset.mdx (100%) rename src/pages/{zhs => zh}/docs/theme.mdx (100%) rename src/pages/{zhs => zh}/docs/top-right-bottom-left.mdx (100%) rename src/pages/{zhs => zh}/docs/touch-action.mdx (100%) rename src/pages/{zhs => zh}/docs/transform-origin.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-delay.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-duration.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-property.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-timing-function.mdx (100%) rename src/pages/{zhs => zh}/docs/translate.mdx (100%) rename src/pages/{zhs => zh}/docs/upgrade-guide.mdx (100%) rename src/pages/{zhs => zh}/docs/user-select.mdx (100%) rename src/pages/{zhs => zh}/docs/using-with-preprocessors.mdx (100%) rename src/pages/{zhs => zh}/docs/utility-first.mdx (100%) rename src/pages/{zhs => zh}/docs/vertical-align.mdx (100%) rename src/pages/{zhs => zh}/docs/visibility.mdx (100%) rename src/pages/{zhs => zh}/docs/whitespace.mdx (100%) rename src/pages/{zhs => zh}/docs/width.mdx (100%) rename src/pages/{zhs => zh}/docs/will-change.mdx (100%) rename src/pages/{zhs => zh}/docs/word-break.mdx (100%) rename src/pages/{zhs => zh}/docs/z-index.mdx (100%) diff --git a/src/pages/zhs/brand.mdx b/src/pages/zh/brand.mdx similarity index 100% rename from src/pages/zhs/brand.mdx rename to src/pages/zh/brand.mdx diff --git a/src/pages/zhs/docs/accent-color.mdx b/src/pages/zh/docs/accent-color.mdx similarity index 100% rename from src/pages/zhs/docs/accent-color.mdx rename to src/pages/zh/docs/accent-color.mdx diff --git a/src/pages/zhs/docs/adding-base-styles.mdx b/src/pages/zh/docs/adding-base-styles.mdx similarity index 100% rename from src/pages/zhs/docs/adding-base-styles.mdx rename to src/pages/zh/docs/adding-base-styles.mdx diff --git a/src/pages/zhs/docs/adding-custom-styles.mdx b/src/pages/zh/docs/adding-custom-styles.mdx similarity index 100% rename from src/pages/zhs/docs/adding-custom-styles.mdx rename to src/pages/zh/docs/adding-custom-styles.mdx diff --git a/src/pages/zhs/docs/adding-new-utilities.mdx b/src/pages/zh/docs/adding-new-utilities.mdx similarity index 100% rename from src/pages/zhs/docs/adding-new-utilities.mdx rename to src/pages/zh/docs/adding-new-utilities.mdx diff --git a/src/pages/zhs/docs/align-content.mdx b/src/pages/zh/docs/align-content.mdx similarity index 100% rename from src/pages/zhs/docs/align-content.mdx rename to src/pages/zh/docs/align-content.mdx diff --git a/src/pages/zhs/docs/align-items.mdx b/src/pages/zh/docs/align-items.mdx similarity index 100% rename from src/pages/zhs/docs/align-items.mdx rename to src/pages/zh/docs/align-items.mdx diff --git a/src/pages/zhs/docs/align-self.mdx b/src/pages/zh/docs/align-self.mdx similarity index 100% rename from src/pages/zhs/docs/align-self.mdx rename to src/pages/zh/docs/align-self.mdx diff --git a/src/pages/zhs/docs/animation.mdx b/src/pages/zh/docs/animation.mdx similarity index 100% rename from src/pages/zhs/docs/animation.mdx rename to src/pages/zh/docs/animation.mdx diff --git a/src/pages/zhs/docs/appearance.mdx b/src/pages/zh/docs/appearance.mdx similarity index 100% rename from src/pages/zhs/docs/appearance.mdx rename to src/pages/zh/docs/appearance.mdx diff --git a/src/pages/zhs/docs/aspect-ratio.mdx b/src/pages/zh/docs/aspect-ratio.mdx similarity index 100% rename from src/pages/zhs/docs/aspect-ratio.mdx rename to src/pages/zh/docs/aspect-ratio.mdx diff --git a/src/pages/zhs/docs/backdrop-blur.mdx b/src/pages/zh/docs/backdrop-blur.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-blur.mdx rename to src/pages/zh/docs/backdrop-blur.mdx diff --git a/src/pages/zhs/docs/backdrop-brightness.mdx b/src/pages/zh/docs/backdrop-brightness.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-brightness.mdx rename to src/pages/zh/docs/backdrop-brightness.mdx diff --git a/src/pages/zhs/docs/backdrop-contrast.mdx b/src/pages/zh/docs/backdrop-contrast.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-contrast.mdx rename to src/pages/zh/docs/backdrop-contrast.mdx diff --git a/src/pages/zhs/docs/backdrop-grayscale.mdx b/src/pages/zh/docs/backdrop-grayscale.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-grayscale.mdx rename to src/pages/zh/docs/backdrop-grayscale.mdx diff --git a/src/pages/zhs/docs/backdrop-hue-rotate.mdx b/src/pages/zh/docs/backdrop-hue-rotate.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-hue-rotate.mdx rename to src/pages/zh/docs/backdrop-hue-rotate.mdx diff --git a/src/pages/zhs/docs/backdrop-invert.mdx b/src/pages/zh/docs/backdrop-invert.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-invert.mdx rename to src/pages/zh/docs/backdrop-invert.mdx diff --git a/src/pages/zhs/docs/backdrop-opacity.mdx b/src/pages/zh/docs/backdrop-opacity.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-opacity.mdx rename to src/pages/zh/docs/backdrop-opacity.mdx diff --git a/src/pages/zhs/docs/backdrop-saturate.mdx b/src/pages/zh/docs/backdrop-saturate.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-saturate.mdx rename to src/pages/zh/docs/backdrop-saturate.mdx diff --git a/src/pages/zhs/docs/backdrop-sepia.mdx b/src/pages/zh/docs/backdrop-sepia.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-sepia.mdx rename to src/pages/zh/docs/backdrop-sepia.mdx diff --git a/src/pages/zhs/docs/background-attachment.mdx b/src/pages/zh/docs/background-attachment.mdx similarity index 100% rename from src/pages/zhs/docs/background-attachment.mdx rename to src/pages/zh/docs/background-attachment.mdx diff --git a/src/pages/zhs/docs/background-blend-mode.mdx b/src/pages/zh/docs/background-blend-mode.mdx similarity index 100% rename from src/pages/zhs/docs/background-blend-mode.mdx rename to src/pages/zh/docs/background-blend-mode.mdx diff --git a/src/pages/zhs/docs/background-clip.mdx b/src/pages/zh/docs/background-clip.mdx similarity index 100% rename from src/pages/zhs/docs/background-clip.mdx rename to src/pages/zh/docs/background-clip.mdx diff --git a/src/pages/zhs/docs/background-color.mdx b/src/pages/zh/docs/background-color.mdx similarity index 100% rename from src/pages/zhs/docs/background-color.mdx rename to src/pages/zh/docs/background-color.mdx diff --git a/src/pages/zhs/docs/background-image.mdx b/src/pages/zh/docs/background-image.mdx similarity index 100% rename from src/pages/zhs/docs/background-image.mdx rename to src/pages/zh/docs/background-image.mdx diff --git a/src/pages/zhs/docs/background-origin.mdx b/src/pages/zh/docs/background-origin.mdx similarity index 100% rename from src/pages/zhs/docs/background-origin.mdx rename to src/pages/zh/docs/background-origin.mdx diff --git a/src/pages/zhs/docs/background-position.mdx b/src/pages/zh/docs/background-position.mdx similarity index 100% rename from src/pages/zhs/docs/background-position.mdx rename to src/pages/zh/docs/background-position.mdx diff --git a/src/pages/zhs/docs/background-repeat.mdx b/src/pages/zh/docs/background-repeat.mdx similarity index 100% rename from src/pages/zhs/docs/background-repeat.mdx rename to src/pages/zh/docs/background-repeat.mdx diff --git a/src/pages/zhs/docs/background-size.mdx b/src/pages/zh/docs/background-size.mdx similarity index 100% rename from src/pages/zhs/docs/background-size.mdx rename to src/pages/zh/docs/background-size.mdx diff --git a/src/pages/zhs/docs/blur.mdx b/src/pages/zh/docs/blur.mdx similarity index 100% rename from src/pages/zhs/docs/blur.mdx rename to src/pages/zh/docs/blur.mdx diff --git a/src/pages/zhs/docs/border-collapse.mdx b/src/pages/zh/docs/border-collapse.mdx similarity index 100% rename from src/pages/zhs/docs/border-collapse.mdx rename to src/pages/zh/docs/border-collapse.mdx diff --git a/src/pages/zhs/docs/border-color.mdx b/src/pages/zh/docs/border-color.mdx similarity index 100% rename from src/pages/zhs/docs/border-color.mdx rename to src/pages/zh/docs/border-color.mdx diff --git a/src/pages/zhs/docs/border-radius.mdx b/src/pages/zh/docs/border-radius.mdx similarity index 100% rename from src/pages/zhs/docs/border-radius.mdx rename to src/pages/zh/docs/border-radius.mdx diff --git a/src/pages/zhs/docs/border-style.mdx b/src/pages/zh/docs/border-style.mdx similarity index 100% rename from src/pages/zhs/docs/border-style.mdx rename to src/pages/zh/docs/border-style.mdx diff --git a/src/pages/zhs/docs/border-width.mdx b/src/pages/zh/docs/border-width.mdx similarity index 100% rename from src/pages/zhs/docs/border-width.mdx rename to src/pages/zh/docs/border-width.mdx diff --git a/src/pages/zhs/docs/box-decoration-break.mdx b/src/pages/zh/docs/box-decoration-break.mdx similarity index 100% rename from src/pages/zhs/docs/box-decoration-break.mdx rename to src/pages/zh/docs/box-decoration-break.mdx diff --git a/src/pages/zhs/docs/box-shadow-color.mdx b/src/pages/zh/docs/box-shadow-color.mdx similarity index 100% rename from src/pages/zhs/docs/box-shadow-color.mdx rename to src/pages/zh/docs/box-shadow-color.mdx diff --git a/src/pages/zhs/docs/box-shadow.mdx b/src/pages/zh/docs/box-shadow.mdx similarity index 100% rename from src/pages/zhs/docs/box-shadow.mdx rename to src/pages/zh/docs/box-shadow.mdx diff --git a/src/pages/zhs/docs/box-sizing.mdx b/src/pages/zh/docs/box-sizing.mdx similarity index 100% rename from src/pages/zhs/docs/box-sizing.mdx rename to src/pages/zh/docs/box-sizing.mdx diff --git a/src/pages/zhs/docs/break-after.mdx b/src/pages/zh/docs/break-after.mdx similarity index 100% rename from src/pages/zhs/docs/break-after.mdx rename to src/pages/zh/docs/break-after.mdx diff --git a/src/pages/zhs/docs/break-before.mdx b/src/pages/zh/docs/break-before.mdx similarity index 100% rename from src/pages/zhs/docs/break-before.mdx rename to src/pages/zh/docs/break-before.mdx diff --git a/src/pages/zhs/docs/break-inside.mdx b/src/pages/zh/docs/break-inside.mdx similarity index 100% rename from src/pages/zhs/docs/break-inside.mdx rename to src/pages/zh/docs/break-inside.mdx diff --git a/src/pages/zhs/docs/brightness.mdx b/src/pages/zh/docs/brightness.mdx similarity index 100% rename from src/pages/zhs/docs/brightness.mdx rename to src/pages/zh/docs/brightness.mdx diff --git a/src/pages/zhs/docs/browser-support.mdx b/src/pages/zh/docs/browser-support.mdx similarity index 100% rename from src/pages/zhs/docs/browser-support.mdx rename to src/pages/zh/docs/browser-support.mdx diff --git a/src/pages/zhs/docs/caret-color.mdx b/src/pages/zh/docs/caret-color.mdx similarity index 100% rename from src/pages/zhs/docs/caret-color.mdx rename to src/pages/zh/docs/caret-color.mdx diff --git a/src/pages/zhs/docs/clear.mdx b/src/pages/zh/docs/clear.mdx similarity index 100% rename from src/pages/zhs/docs/clear.mdx rename to src/pages/zh/docs/clear.mdx diff --git a/src/pages/zhs/docs/columns.mdx b/src/pages/zh/docs/columns.mdx similarity index 100% rename from src/pages/zhs/docs/columns.mdx rename to src/pages/zh/docs/columns.mdx diff --git a/src/pages/zhs/docs/configuration.mdx b/src/pages/zh/docs/configuration.mdx similarity index 100% rename from src/pages/zhs/docs/configuration.mdx rename to src/pages/zh/docs/configuration.mdx diff --git a/src/pages/zhs/docs/container.mdx b/src/pages/zh/docs/container.mdx similarity index 100% rename from src/pages/zhs/docs/container.mdx rename to src/pages/zh/docs/container.mdx diff --git a/src/pages/zhs/docs/content-configuration.mdx b/src/pages/zh/docs/content-configuration.mdx similarity index 100% rename from src/pages/zhs/docs/content-configuration.mdx rename to src/pages/zh/docs/content-configuration.mdx diff --git a/src/pages/zhs/docs/content.mdx b/src/pages/zh/docs/content.mdx similarity index 100% rename from src/pages/zhs/docs/content.mdx rename to src/pages/zh/docs/content.mdx diff --git a/src/pages/zhs/docs/contrast.mdx b/src/pages/zh/docs/contrast.mdx similarity index 100% rename from src/pages/zhs/docs/contrast.mdx rename to src/pages/zh/docs/contrast.mdx diff --git a/src/pages/zhs/docs/cursor.mdx b/src/pages/zh/docs/cursor.mdx similarity index 100% rename from src/pages/zhs/docs/cursor.mdx rename to src/pages/zh/docs/cursor.mdx diff --git a/src/pages/zhs/docs/customizing-colors.mdx b/src/pages/zh/docs/customizing-colors.mdx similarity index 100% rename from src/pages/zhs/docs/customizing-colors.mdx rename to src/pages/zh/docs/customizing-colors.mdx diff --git a/src/pages/zhs/docs/customizing-spacing.mdx b/src/pages/zh/docs/customizing-spacing.mdx similarity index 100% rename from src/pages/zhs/docs/customizing-spacing.mdx rename to src/pages/zh/docs/customizing-spacing.mdx diff --git a/src/pages/zhs/docs/dark-mode.mdx b/src/pages/zh/docs/dark-mode.mdx similarity index 100% rename from src/pages/zhs/docs/dark-mode.mdx rename to src/pages/zh/docs/dark-mode.mdx diff --git a/src/pages/zhs/docs/display.mdx b/src/pages/zh/docs/display.mdx similarity index 100% rename from src/pages/zhs/docs/display.mdx rename to src/pages/zh/docs/display.mdx diff --git a/src/pages/zhs/docs/divide-color.mdx b/src/pages/zh/docs/divide-color.mdx similarity index 100% rename from src/pages/zhs/docs/divide-color.mdx rename to src/pages/zh/docs/divide-color.mdx diff --git a/src/pages/zhs/docs/divide-style.mdx b/src/pages/zh/docs/divide-style.mdx similarity index 100% rename from src/pages/zhs/docs/divide-style.mdx rename to src/pages/zh/docs/divide-style.mdx diff --git a/src/pages/zhs/docs/divide-width.mdx b/src/pages/zh/docs/divide-width.mdx similarity index 100% rename from src/pages/zhs/docs/divide-width.mdx rename to src/pages/zh/docs/divide-width.mdx diff --git a/src/pages/zhs/docs/drop-shadow.mdx b/src/pages/zh/docs/drop-shadow.mdx similarity index 100% rename from src/pages/zhs/docs/drop-shadow.mdx rename to src/pages/zh/docs/drop-shadow.mdx diff --git a/src/pages/zhs/docs/editor-setup.mdx b/src/pages/zh/docs/editor-setup.mdx similarity index 100% rename from src/pages/zhs/docs/editor-setup.mdx rename to src/pages/zh/docs/editor-setup.mdx diff --git a/src/pages/zhs/docs/fill.mdx b/src/pages/zh/docs/fill.mdx similarity index 100% rename from src/pages/zhs/docs/fill.mdx rename to src/pages/zh/docs/fill.mdx diff --git a/src/pages/zhs/docs/flex-basis.mdx b/src/pages/zh/docs/flex-basis.mdx similarity index 100% rename from src/pages/zhs/docs/flex-basis.mdx rename to src/pages/zh/docs/flex-basis.mdx diff --git a/src/pages/zhs/docs/flex-direction.mdx b/src/pages/zh/docs/flex-direction.mdx similarity index 100% rename from src/pages/zhs/docs/flex-direction.mdx rename to src/pages/zh/docs/flex-direction.mdx diff --git a/src/pages/zhs/docs/flex-grow.mdx b/src/pages/zh/docs/flex-grow.mdx similarity index 100% rename from src/pages/zhs/docs/flex-grow.mdx rename to src/pages/zh/docs/flex-grow.mdx diff --git a/src/pages/zhs/docs/flex-shrink.mdx b/src/pages/zh/docs/flex-shrink.mdx similarity index 100% rename from src/pages/zhs/docs/flex-shrink.mdx rename to src/pages/zh/docs/flex-shrink.mdx diff --git a/src/pages/zhs/docs/flex-wrap.mdx b/src/pages/zh/docs/flex-wrap.mdx similarity index 100% rename from src/pages/zhs/docs/flex-wrap.mdx rename to src/pages/zh/docs/flex-wrap.mdx diff --git a/src/pages/zhs/docs/flex.mdx b/src/pages/zh/docs/flex.mdx similarity index 100% rename from src/pages/zhs/docs/flex.mdx rename to src/pages/zh/docs/flex.mdx diff --git a/src/pages/zhs/docs/float.mdx b/src/pages/zh/docs/float.mdx similarity index 100% rename from src/pages/zhs/docs/float.mdx rename to src/pages/zh/docs/float.mdx diff --git a/src/pages/zhs/docs/font-family.mdx b/src/pages/zh/docs/font-family.mdx similarity index 100% rename from src/pages/zhs/docs/font-family.mdx rename to src/pages/zh/docs/font-family.mdx diff --git a/src/pages/zhs/docs/font-size.mdx b/src/pages/zh/docs/font-size.mdx similarity index 100% rename from src/pages/zhs/docs/font-size.mdx rename to src/pages/zh/docs/font-size.mdx diff --git a/src/pages/zhs/docs/font-smoothing.mdx b/src/pages/zh/docs/font-smoothing.mdx similarity index 100% rename from src/pages/zhs/docs/font-smoothing.mdx rename to src/pages/zh/docs/font-smoothing.mdx diff --git a/src/pages/zhs/docs/font-style.mdx b/src/pages/zh/docs/font-style.mdx similarity index 100% rename from src/pages/zhs/docs/font-style.mdx rename to src/pages/zh/docs/font-style.mdx diff --git a/src/pages/zhs/docs/font-variant-numeric.mdx b/src/pages/zh/docs/font-variant-numeric.mdx similarity index 100% rename from src/pages/zhs/docs/font-variant-numeric.mdx rename to src/pages/zh/docs/font-variant-numeric.mdx diff --git a/src/pages/zhs/docs/font-weight.mdx b/src/pages/zh/docs/font-weight.mdx similarity index 100% rename from src/pages/zhs/docs/font-weight.mdx rename to src/pages/zh/docs/font-weight.mdx diff --git a/src/pages/zhs/docs/functions-and-directives.mdx b/src/pages/zh/docs/functions-and-directives.mdx similarity index 100% rename from src/pages/zhs/docs/functions-and-directives.mdx rename to src/pages/zh/docs/functions-and-directives.mdx diff --git a/src/pages/zhs/docs/gap.mdx b/src/pages/zh/docs/gap.mdx similarity index 100% rename from src/pages/zhs/docs/gap.mdx rename to src/pages/zh/docs/gap.mdx diff --git a/src/pages/zhs/docs/gradient-color-stops.mdx b/src/pages/zh/docs/gradient-color-stops.mdx similarity index 100% rename from src/pages/zhs/docs/gradient-color-stops.mdx rename to src/pages/zh/docs/gradient-color-stops.mdx diff --git a/src/pages/zhs/docs/grayscale.mdx b/src/pages/zh/docs/grayscale.mdx similarity index 100% rename from src/pages/zhs/docs/grayscale.mdx rename to src/pages/zh/docs/grayscale.mdx diff --git a/src/pages/zhs/docs/grid-auto-columns.mdx b/src/pages/zh/docs/grid-auto-columns.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-columns.mdx rename to src/pages/zh/docs/grid-auto-columns.mdx diff --git a/src/pages/zhs/docs/grid-auto-flow.mdx b/src/pages/zh/docs/grid-auto-flow.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-flow.mdx rename to src/pages/zh/docs/grid-auto-flow.mdx diff --git a/src/pages/zhs/docs/grid-auto-rows.mdx b/src/pages/zh/docs/grid-auto-rows.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-rows.mdx rename to src/pages/zh/docs/grid-auto-rows.mdx diff --git a/src/pages/zhs/docs/grid-column.mdx b/src/pages/zh/docs/grid-column.mdx similarity index 100% rename from src/pages/zhs/docs/grid-column.mdx rename to src/pages/zh/docs/grid-column.mdx diff --git a/src/pages/zhs/docs/grid-row.mdx b/src/pages/zh/docs/grid-row.mdx similarity index 100% rename from src/pages/zhs/docs/grid-row.mdx rename to src/pages/zh/docs/grid-row.mdx diff --git a/src/pages/zhs/docs/grid-template-columns.mdx b/src/pages/zh/docs/grid-template-columns.mdx similarity index 100% rename from src/pages/zhs/docs/grid-template-columns.mdx rename to src/pages/zh/docs/grid-template-columns.mdx diff --git a/src/pages/zhs/docs/grid-template-rows.mdx b/src/pages/zh/docs/grid-template-rows.mdx similarity index 100% rename from src/pages/zhs/docs/grid-template-rows.mdx rename to src/pages/zh/docs/grid-template-rows.mdx diff --git a/src/pages/zhs/docs/guides/create-react-app.js b/src/pages/zh/docs/guides/create-react-app.js similarity index 100% rename from src/pages/zhs/docs/guides/create-react-app.js rename to src/pages/zh/docs/guides/create-react-app.js diff --git a/src/pages/zhs/docs/guides/gatsby.js b/src/pages/zh/docs/guides/gatsby.js similarity index 100% rename from src/pages/zhs/docs/guides/gatsby.js rename to src/pages/zh/docs/guides/gatsby.js diff --git a/src/pages/zhs/docs/guides/laravel.js b/src/pages/zh/docs/guides/laravel.js similarity index 100% rename from src/pages/zhs/docs/guides/laravel.js rename to src/pages/zh/docs/guides/laravel.js diff --git a/src/pages/zhs/docs/guides/nextjs.js b/src/pages/zh/docs/guides/nextjs.js similarity index 100% rename from src/pages/zhs/docs/guides/nextjs.js rename to src/pages/zh/docs/guides/nextjs.js diff --git a/src/pages/zhs/docs/guides/nuxtjs.js b/src/pages/zh/docs/guides/nuxtjs.js similarity index 100% rename from src/pages/zhs/docs/guides/nuxtjs.js rename to src/pages/zh/docs/guides/nuxtjs.js diff --git a/src/pages/zhs/docs/guides/vite.js b/src/pages/zh/docs/guides/vite.js similarity index 100% rename from src/pages/zhs/docs/guides/vite.js rename to src/pages/zh/docs/guides/vite.js diff --git a/src/pages/zhs/docs/height.mdx b/src/pages/zh/docs/height.mdx similarity index 100% rename from src/pages/zhs/docs/height.mdx rename to src/pages/zh/docs/height.mdx diff --git a/src/pages/zhs/docs/hover-focus-and-other-states.mdx b/src/pages/zh/docs/hover-focus-and-other-states.mdx similarity index 100% rename from src/pages/zhs/docs/hover-focus-and-other-states.mdx rename to src/pages/zh/docs/hover-focus-and-other-states.mdx diff --git a/src/pages/zhs/docs/hue-rotate.mdx b/src/pages/zh/docs/hue-rotate.mdx similarity index 100% rename from src/pages/zhs/docs/hue-rotate.mdx rename to src/pages/zh/docs/hue-rotate.mdx diff --git a/src/pages/zhs/docs/installation/framework-guides.js b/src/pages/zh/docs/installation/framework-guides.js similarity index 100% rename from src/pages/zhs/docs/installation/framework-guides.js rename to src/pages/zh/docs/installation/framework-guides.js diff --git a/src/pages/zhs/docs/installation/index.js b/src/pages/zh/docs/installation/index.js similarity index 100% rename from src/pages/zhs/docs/installation/index.js rename to src/pages/zh/docs/installation/index.js diff --git a/src/pages/zhs/docs/installation/play-cdn.js b/src/pages/zh/docs/installation/play-cdn.js similarity index 100% rename from src/pages/zhs/docs/installation/play-cdn.js rename to src/pages/zh/docs/installation/play-cdn.js diff --git a/src/pages/zhs/docs/installation/using-postcss.js b/src/pages/zh/docs/installation/using-postcss.js similarity index 100% rename from src/pages/zhs/docs/installation/using-postcss.js rename to src/pages/zh/docs/installation/using-postcss.js diff --git a/src/pages/zhs/docs/invert.mdx b/src/pages/zh/docs/invert.mdx similarity index 100% rename from src/pages/zhs/docs/invert.mdx rename to src/pages/zh/docs/invert.mdx diff --git a/src/pages/zhs/docs/isolation.mdx b/src/pages/zh/docs/isolation.mdx similarity index 100% rename from src/pages/zhs/docs/isolation.mdx rename to src/pages/zh/docs/isolation.mdx diff --git a/src/pages/zhs/docs/justify-content.mdx b/src/pages/zh/docs/justify-content.mdx similarity index 100% rename from src/pages/zhs/docs/justify-content.mdx rename to src/pages/zh/docs/justify-content.mdx diff --git a/src/pages/zhs/docs/justify-items.mdx b/src/pages/zh/docs/justify-items.mdx similarity index 100% rename from src/pages/zhs/docs/justify-items.mdx rename to src/pages/zh/docs/justify-items.mdx diff --git a/src/pages/zhs/docs/justify-self.mdx b/src/pages/zh/docs/justify-self.mdx similarity index 100% rename from src/pages/zhs/docs/justify-self.mdx rename to src/pages/zh/docs/justify-self.mdx diff --git a/src/pages/zhs/docs/letter-spacing.mdx b/src/pages/zh/docs/letter-spacing.mdx similarity index 100% rename from src/pages/zhs/docs/letter-spacing.mdx rename to src/pages/zh/docs/letter-spacing.mdx diff --git a/src/pages/zhs/docs/line-height.mdx b/src/pages/zh/docs/line-height.mdx similarity index 100% rename from src/pages/zhs/docs/line-height.mdx rename to src/pages/zh/docs/line-height.mdx diff --git a/src/pages/zhs/docs/list-style-position.mdx b/src/pages/zh/docs/list-style-position.mdx similarity index 100% rename from src/pages/zhs/docs/list-style-position.mdx rename to src/pages/zh/docs/list-style-position.mdx diff --git a/src/pages/zhs/docs/list-style-type.mdx b/src/pages/zh/docs/list-style-type.mdx similarity index 100% rename from src/pages/zhs/docs/list-style-type.mdx rename to src/pages/zh/docs/list-style-type.mdx diff --git a/src/pages/zhs/docs/margin.mdx b/src/pages/zh/docs/margin.mdx similarity index 100% rename from src/pages/zhs/docs/margin.mdx rename to src/pages/zh/docs/margin.mdx diff --git a/src/pages/zhs/docs/max-height.mdx b/src/pages/zh/docs/max-height.mdx similarity index 100% rename from src/pages/zhs/docs/max-height.mdx rename to src/pages/zh/docs/max-height.mdx diff --git a/src/pages/zhs/docs/max-width.mdx b/src/pages/zh/docs/max-width.mdx similarity index 100% rename from src/pages/zhs/docs/max-width.mdx rename to src/pages/zh/docs/max-width.mdx diff --git a/src/pages/zhs/docs/min-height.mdx b/src/pages/zh/docs/min-height.mdx similarity index 100% rename from src/pages/zhs/docs/min-height.mdx rename to src/pages/zh/docs/min-height.mdx diff --git a/src/pages/zhs/docs/min-width.mdx b/src/pages/zh/docs/min-width.mdx similarity index 100% rename from src/pages/zhs/docs/min-width.mdx rename to src/pages/zh/docs/min-width.mdx diff --git a/src/pages/zhs/docs/mix-blend-mode.mdx b/src/pages/zh/docs/mix-blend-mode.mdx similarity index 100% rename from src/pages/zhs/docs/mix-blend-mode.mdx rename to src/pages/zh/docs/mix-blend-mode.mdx diff --git a/src/pages/zhs/docs/object-fit.mdx b/src/pages/zh/docs/object-fit.mdx similarity index 100% rename from src/pages/zhs/docs/object-fit.mdx rename to src/pages/zh/docs/object-fit.mdx diff --git a/src/pages/zhs/docs/object-position.mdx b/src/pages/zh/docs/object-position.mdx similarity index 100% rename from src/pages/zhs/docs/object-position.mdx rename to src/pages/zh/docs/object-position.mdx diff --git a/src/pages/zhs/docs/opacity.mdx b/src/pages/zh/docs/opacity.mdx similarity index 100% rename from src/pages/zhs/docs/opacity.mdx rename to src/pages/zh/docs/opacity.mdx diff --git a/src/pages/zhs/docs/optimizing-for-production.mdx b/src/pages/zh/docs/optimizing-for-production.mdx similarity index 100% rename from src/pages/zhs/docs/optimizing-for-production.mdx rename to src/pages/zh/docs/optimizing-for-production.mdx diff --git a/src/pages/zhs/docs/order.mdx b/src/pages/zh/docs/order.mdx similarity index 100% rename from src/pages/zhs/docs/order.mdx rename to src/pages/zh/docs/order.mdx diff --git a/src/pages/zhs/docs/outline-color.mdx b/src/pages/zh/docs/outline-color.mdx similarity index 100% rename from src/pages/zhs/docs/outline-color.mdx rename to src/pages/zh/docs/outline-color.mdx diff --git a/src/pages/zhs/docs/outline-offset.mdx b/src/pages/zh/docs/outline-offset.mdx similarity index 100% rename from src/pages/zhs/docs/outline-offset.mdx rename to src/pages/zh/docs/outline-offset.mdx diff --git a/src/pages/zhs/docs/outline-style.mdx b/src/pages/zh/docs/outline-style.mdx similarity index 100% rename from src/pages/zhs/docs/outline-style.mdx rename to src/pages/zh/docs/outline-style.mdx diff --git a/src/pages/zhs/docs/outline-width.mdx b/src/pages/zh/docs/outline-width.mdx similarity index 100% rename from src/pages/zhs/docs/outline-width.mdx rename to src/pages/zh/docs/outline-width.mdx diff --git a/src/pages/zhs/docs/overflow.mdx b/src/pages/zh/docs/overflow.mdx similarity index 100% rename from src/pages/zhs/docs/overflow.mdx rename to src/pages/zh/docs/overflow.mdx diff --git a/src/pages/zhs/docs/overscroll-behavior.mdx b/src/pages/zh/docs/overscroll-behavior.mdx similarity index 100% rename from src/pages/zhs/docs/overscroll-behavior.mdx rename to src/pages/zh/docs/overscroll-behavior.mdx diff --git a/src/pages/zhs/docs/padding.mdx b/src/pages/zh/docs/padding.mdx similarity index 100% rename from src/pages/zhs/docs/padding.mdx rename to src/pages/zh/docs/padding.mdx diff --git a/src/pages/zhs/docs/place-content.mdx b/src/pages/zh/docs/place-content.mdx similarity index 100% rename from src/pages/zhs/docs/place-content.mdx rename to src/pages/zh/docs/place-content.mdx diff --git a/src/pages/zhs/docs/place-items.mdx b/src/pages/zh/docs/place-items.mdx similarity index 100% rename from src/pages/zhs/docs/place-items.mdx rename to src/pages/zh/docs/place-items.mdx diff --git a/src/pages/zhs/docs/place-self.mdx b/src/pages/zh/docs/place-self.mdx similarity index 100% rename from src/pages/zhs/docs/place-self.mdx rename to src/pages/zh/docs/place-self.mdx diff --git a/src/pages/zhs/docs/play-cdn.mdx b/src/pages/zh/docs/play-cdn.mdx similarity index 100% rename from src/pages/zhs/docs/play-cdn.mdx rename to src/pages/zh/docs/play-cdn.mdx diff --git a/src/pages/zhs/docs/plugins.mdx b/src/pages/zh/docs/plugins.mdx similarity index 100% rename from src/pages/zhs/docs/plugins.mdx rename to src/pages/zh/docs/plugins.mdx diff --git a/src/pages/zhs/docs/pointer-events.mdx b/src/pages/zh/docs/pointer-events.mdx similarity index 100% rename from src/pages/zhs/docs/pointer-events.mdx rename to src/pages/zh/docs/pointer-events.mdx diff --git a/src/pages/zhs/docs/position.mdx b/src/pages/zh/docs/position.mdx similarity index 100% rename from src/pages/zhs/docs/position.mdx rename to src/pages/zh/docs/position.mdx diff --git a/src/pages/zhs/docs/preflight.mdx b/src/pages/zh/docs/preflight.mdx similarity index 100% rename from src/pages/zhs/docs/preflight.mdx rename to src/pages/zh/docs/preflight.mdx diff --git a/src/pages/zhs/docs/presets.mdx b/src/pages/zh/docs/presets.mdx similarity index 100% rename from src/pages/zhs/docs/presets.mdx rename to src/pages/zh/docs/presets.mdx diff --git a/src/pages/zhs/docs/resize.mdx b/src/pages/zh/docs/resize.mdx similarity index 100% rename from src/pages/zhs/docs/resize.mdx rename to src/pages/zh/docs/resize.mdx diff --git a/src/pages/zhs/docs/responsive-design.mdx b/src/pages/zh/docs/responsive-design.mdx similarity index 100% rename from src/pages/zhs/docs/responsive-design.mdx rename to src/pages/zh/docs/responsive-design.mdx diff --git a/src/pages/zhs/docs/reusing-styles.mdx b/src/pages/zh/docs/reusing-styles.mdx similarity index 100% rename from src/pages/zhs/docs/reusing-styles.mdx rename to src/pages/zh/docs/reusing-styles.mdx diff --git a/src/pages/zhs/docs/ring-color.mdx b/src/pages/zh/docs/ring-color.mdx similarity index 100% rename from src/pages/zhs/docs/ring-color.mdx rename to src/pages/zh/docs/ring-color.mdx diff --git a/src/pages/zhs/docs/ring-offset-color.mdx b/src/pages/zh/docs/ring-offset-color.mdx similarity index 100% rename from src/pages/zhs/docs/ring-offset-color.mdx rename to src/pages/zh/docs/ring-offset-color.mdx diff --git a/src/pages/zhs/docs/ring-offset-width.mdx b/src/pages/zh/docs/ring-offset-width.mdx similarity index 100% rename from src/pages/zhs/docs/ring-offset-width.mdx rename to src/pages/zh/docs/ring-offset-width.mdx diff --git a/src/pages/zhs/docs/ring-width.mdx b/src/pages/zh/docs/ring-width.mdx similarity index 100% rename from src/pages/zhs/docs/ring-width.mdx rename to src/pages/zh/docs/ring-width.mdx diff --git a/src/pages/zhs/docs/rotate.mdx b/src/pages/zh/docs/rotate.mdx similarity index 100% rename from src/pages/zhs/docs/rotate.mdx rename to src/pages/zh/docs/rotate.mdx diff --git a/src/pages/zhs/docs/saturate.mdx b/src/pages/zh/docs/saturate.mdx similarity index 100% rename from src/pages/zhs/docs/saturate.mdx rename to src/pages/zh/docs/saturate.mdx diff --git a/src/pages/zhs/docs/scale.mdx b/src/pages/zh/docs/scale.mdx similarity index 100% rename from src/pages/zhs/docs/scale.mdx rename to src/pages/zh/docs/scale.mdx diff --git a/src/pages/zhs/docs/screen-readers.mdx b/src/pages/zh/docs/screen-readers.mdx similarity index 100% rename from src/pages/zhs/docs/screen-readers.mdx rename to src/pages/zh/docs/screen-readers.mdx diff --git a/src/pages/zhs/docs/screens.mdx b/src/pages/zh/docs/screens.mdx similarity index 100% rename from src/pages/zhs/docs/screens.mdx rename to src/pages/zh/docs/screens.mdx diff --git a/src/pages/zhs/docs/scroll-behavior.mdx b/src/pages/zh/docs/scroll-behavior.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-behavior.mdx rename to src/pages/zh/docs/scroll-behavior.mdx diff --git a/src/pages/zhs/docs/scroll-margin.mdx b/src/pages/zh/docs/scroll-margin.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-margin.mdx rename to src/pages/zh/docs/scroll-margin.mdx diff --git a/src/pages/zhs/docs/scroll-padding.mdx b/src/pages/zh/docs/scroll-padding.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-padding.mdx rename to src/pages/zh/docs/scroll-padding.mdx diff --git a/src/pages/zhs/docs/scroll-snap-align.mdx b/src/pages/zh/docs/scroll-snap-align.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-align.mdx rename to src/pages/zh/docs/scroll-snap-align.mdx diff --git a/src/pages/zhs/docs/scroll-snap-stop.mdx b/src/pages/zh/docs/scroll-snap-stop.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-stop.mdx rename to src/pages/zh/docs/scroll-snap-stop.mdx diff --git a/src/pages/zhs/docs/scroll-snap-type.mdx b/src/pages/zh/docs/scroll-snap-type.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-type.mdx rename to src/pages/zh/docs/scroll-snap-type.mdx diff --git a/src/pages/zhs/docs/sepia.mdx b/src/pages/zh/docs/sepia.mdx similarity index 100% rename from src/pages/zhs/docs/sepia.mdx rename to src/pages/zh/docs/sepia.mdx diff --git a/src/pages/zhs/docs/skew.mdx b/src/pages/zh/docs/skew.mdx similarity index 100% rename from src/pages/zhs/docs/skew.mdx rename to src/pages/zh/docs/skew.mdx diff --git a/src/pages/zhs/docs/space.mdx b/src/pages/zh/docs/space.mdx similarity index 100% rename from src/pages/zhs/docs/space.mdx rename to src/pages/zh/docs/space.mdx diff --git a/src/pages/zhs/docs/stroke-width.mdx b/src/pages/zh/docs/stroke-width.mdx similarity index 100% rename from src/pages/zhs/docs/stroke-width.mdx rename to src/pages/zh/docs/stroke-width.mdx diff --git a/src/pages/zhs/docs/stroke.mdx b/src/pages/zh/docs/stroke.mdx similarity index 100% rename from src/pages/zhs/docs/stroke.mdx rename to src/pages/zh/docs/stroke.mdx diff --git a/src/pages/zhs/docs/table-layout.mdx b/src/pages/zh/docs/table-layout.mdx similarity index 100% rename from src/pages/zhs/docs/table-layout.mdx rename to src/pages/zh/docs/table-layout.mdx diff --git a/src/pages/zhs/docs/tailwind-cli.mdx b/src/pages/zh/docs/tailwind-cli.mdx similarity index 100% rename from src/pages/zhs/docs/tailwind-cli.mdx rename to src/pages/zh/docs/tailwind-cli.mdx diff --git a/src/pages/zhs/docs/text-align.mdx b/src/pages/zh/docs/text-align.mdx similarity index 100% rename from src/pages/zhs/docs/text-align.mdx rename to src/pages/zh/docs/text-align.mdx diff --git a/src/pages/zhs/docs/text-color.mdx b/src/pages/zh/docs/text-color.mdx similarity index 100% rename from src/pages/zhs/docs/text-color.mdx rename to src/pages/zh/docs/text-color.mdx diff --git a/src/pages/zhs/docs/text-decoration-color.mdx b/src/pages/zh/docs/text-decoration-color.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-color.mdx rename to src/pages/zh/docs/text-decoration-color.mdx diff --git a/src/pages/zhs/docs/text-decoration-style.mdx b/src/pages/zh/docs/text-decoration-style.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-style.mdx rename to src/pages/zh/docs/text-decoration-style.mdx diff --git a/src/pages/zhs/docs/text-decoration-thickness.mdx b/src/pages/zh/docs/text-decoration-thickness.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-thickness.mdx rename to src/pages/zh/docs/text-decoration-thickness.mdx diff --git a/src/pages/zhs/docs/text-decoration.mdx b/src/pages/zh/docs/text-decoration.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration.mdx rename to src/pages/zh/docs/text-decoration.mdx diff --git a/src/pages/zhs/docs/text-indent.mdx b/src/pages/zh/docs/text-indent.mdx similarity index 100% rename from src/pages/zhs/docs/text-indent.mdx rename to src/pages/zh/docs/text-indent.mdx diff --git a/src/pages/zhs/docs/text-overflow.mdx b/src/pages/zh/docs/text-overflow.mdx similarity index 100% rename from src/pages/zhs/docs/text-overflow.mdx rename to src/pages/zh/docs/text-overflow.mdx diff --git a/src/pages/zhs/docs/text-transform.mdx b/src/pages/zh/docs/text-transform.mdx similarity index 100% rename from src/pages/zhs/docs/text-transform.mdx rename to src/pages/zh/docs/text-transform.mdx diff --git a/src/pages/zhs/docs/text-underline-offset.mdx b/src/pages/zh/docs/text-underline-offset.mdx similarity index 100% rename from src/pages/zhs/docs/text-underline-offset.mdx rename to src/pages/zh/docs/text-underline-offset.mdx diff --git a/src/pages/zhs/docs/theme.mdx b/src/pages/zh/docs/theme.mdx similarity index 100% rename from src/pages/zhs/docs/theme.mdx rename to src/pages/zh/docs/theme.mdx diff --git a/src/pages/zhs/docs/top-right-bottom-left.mdx b/src/pages/zh/docs/top-right-bottom-left.mdx similarity index 100% rename from src/pages/zhs/docs/top-right-bottom-left.mdx rename to src/pages/zh/docs/top-right-bottom-left.mdx diff --git a/src/pages/zhs/docs/touch-action.mdx b/src/pages/zh/docs/touch-action.mdx similarity index 100% rename from src/pages/zhs/docs/touch-action.mdx rename to src/pages/zh/docs/touch-action.mdx diff --git a/src/pages/zhs/docs/transform-origin.mdx b/src/pages/zh/docs/transform-origin.mdx similarity index 100% rename from src/pages/zhs/docs/transform-origin.mdx rename to src/pages/zh/docs/transform-origin.mdx diff --git a/src/pages/zhs/docs/transition-delay.mdx b/src/pages/zh/docs/transition-delay.mdx similarity index 100% rename from src/pages/zhs/docs/transition-delay.mdx rename to src/pages/zh/docs/transition-delay.mdx diff --git a/src/pages/zhs/docs/transition-duration.mdx b/src/pages/zh/docs/transition-duration.mdx similarity index 100% rename from src/pages/zhs/docs/transition-duration.mdx rename to src/pages/zh/docs/transition-duration.mdx diff --git a/src/pages/zhs/docs/transition-property.mdx b/src/pages/zh/docs/transition-property.mdx similarity index 100% rename from src/pages/zhs/docs/transition-property.mdx rename to src/pages/zh/docs/transition-property.mdx diff --git a/src/pages/zhs/docs/transition-timing-function.mdx b/src/pages/zh/docs/transition-timing-function.mdx similarity index 100% rename from src/pages/zhs/docs/transition-timing-function.mdx rename to src/pages/zh/docs/transition-timing-function.mdx diff --git a/src/pages/zhs/docs/translate.mdx b/src/pages/zh/docs/translate.mdx similarity index 100% rename from src/pages/zhs/docs/translate.mdx rename to src/pages/zh/docs/translate.mdx diff --git a/src/pages/zhs/docs/upgrade-guide.mdx b/src/pages/zh/docs/upgrade-guide.mdx similarity index 100% rename from src/pages/zhs/docs/upgrade-guide.mdx rename to src/pages/zh/docs/upgrade-guide.mdx diff --git a/src/pages/zhs/docs/user-select.mdx b/src/pages/zh/docs/user-select.mdx similarity index 100% rename from src/pages/zhs/docs/user-select.mdx rename to src/pages/zh/docs/user-select.mdx diff --git a/src/pages/zhs/docs/using-with-preprocessors.mdx b/src/pages/zh/docs/using-with-preprocessors.mdx similarity index 100% rename from src/pages/zhs/docs/using-with-preprocessors.mdx rename to src/pages/zh/docs/using-with-preprocessors.mdx diff --git a/src/pages/zhs/docs/utility-first.mdx b/src/pages/zh/docs/utility-first.mdx similarity index 100% rename from src/pages/zhs/docs/utility-first.mdx rename to src/pages/zh/docs/utility-first.mdx diff --git a/src/pages/zhs/docs/vertical-align.mdx b/src/pages/zh/docs/vertical-align.mdx similarity index 100% rename from src/pages/zhs/docs/vertical-align.mdx rename to src/pages/zh/docs/vertical-align.mdx diff --git a/src/pages/zhs/docs/visibility.mdx b/src/pages/zh/docs/visibility.mdx similarity index 100% rename from src/pages/zhs/docs/visibility.mdx rename to src/pages/zh/docs/visibility.mdx diff --git a/src/pages/zhs/docs/whitespace.mdx b/src/pages/zh/docs/whitespace.mdx similarity index 100% rename from src/pages/zhs/docs/whitespace.mdx rename to src/pages/zh/docs/whitespace.mdx diff --git a/src/pages/zhs/docs/width.mdx b/src/pages/zh/docs/width.mdx similarity index 100% rename from src/pages/zhs/docs/width.mdx rename to src/pages/zh/docs/width.mdx diff --git a/src/pages/zhs/docs/will-change.mdx b/src/pages/zh/docs/will-change.mdx similarity index 100% rename from src/pages/zhs/docs/will-change.mdx rename to src/pages/zh/docs/will-change.mdx diff --git a/src/pages/zhs/docs/word-break.mdx b/src/pages/zh/docs/word-break.mdx similarity index 100% rename from src/pages/zhs/docs/word-break.mdx rename to src/pages/zh/docs/word-break.mdx diff --git a/src/pages/zhs/docs/z-index.mdx b/src/pages/zh/docs/z-index.mdx similarity index 100% rename from src/pages/zhs/docs/z-index.mdx rename to src/pages/zh/docs/z-index.mdx From 106fe8aecaaadfb91bf336230f4486750fa9ab06 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:30:11 +0800 Subject: [PATCH 20/48] copy components to components/.ZH --- src/components/.ZH/Footer.js | 86 ++ src/components/.ZH/Header.js | 275 ++++++ src/components/.ZH/Heading.js | 80 ++ src/components/.ZH/HtmlZenGarden.js | 798 ++++++++++++++++++ src/components/.ZH/Search.js | 198 +++++ src/components/.ZH/home/BuildAnything.js | 332 ++++++++ src/components/.ZH/home/ComponentDriven.js | 665 +++++++++++++++ src/components/.ZH/home/ConstraintBased.js | 367 ++++++++ src/components/.ZH/home/Customization.js | 350 ++++++++ src/components/.ZH/home/DarkMode.js | 194 +++++ src/components/.ZH/home/EditorTools.js | 425 ++++++++++ src/components/.ZH/home/Footer.js | 54 ++ src/components/.ZH/home/Hero.js | 488 +++++++++++ src/components/.ZH/home/MobileFirst.js | 336 ++++++++ src/components/.ZH/home/ModernFeatures.js | 251 ++++++ src/components/.ZH/home/Performance.js | 351 ++++++++ .../.ZH/home/ReadyMadeComponents.js | 91 ++ src/components/.ZH/home/StateVariants.js | 293 +++++++ src/components/.ZH/home/common.js | 135 +++ 19 files changed, 5769 insertions(+) create mode 100644 src/components/.ZH/Footer.js create mode 100644 src/components/.ZH/Header.js create mode 100644 src/components/.ZH/Heading.js create mode 100644 src/components/.ZH/HtmlZenGarden.js create mode 100644 src/components/.ZH/Search.js create mode 100644 src/components/.ZH/home/BuildAnything.js create mode 100644 src/components/.ZH/home/ComponentDriven.js create mode 100644 src/components/.ZH/home/ConstraintBased.js create mode 100644 src/components/.ZH/home/Customization.js create mode 100644 src/components/.ZH/home/DarkMode.js create mode 100644 src/components/.ZH/home/EditorTools.js create mode 100644 src/components/.ZH/home/Footer.js create mode 100644 src/components/.ZH/home/Hero.js create mode 100644 src/components/.ZH/home/MobileFirst.js create mode 100644 src/components/.ZH/home/ModernFeatures.js create mode 100644 src/components/.ZH/home/Performance.js create mode 100644 src/components/.ZH/home/ReadyMadeComponents.js create mode 100644 src/components/.ZH/home/StateVariants.js create mode 100644 src/components/.ZH/home/common.js diff --git a/src/components/.ZH/Footer.js b/src/components/.ZH/Footer.js new file mode 100644 index 000000000..cf1e9e1fb --- /dev/null +++ b/src/components/.ZH/Footer.js @@ -0,0 +1,86 @@ +import Link from 'next/link' +import clsx from 'clsx' + +export function Footer({ children, previous, next }) { + return ( + + ) +} diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js new file mode 100644 index 000000000..f31163c73 --- /dev/null +++ b/src/components/.ZH/Header.js @@ -0,0 +1,275 @@ +import Link from 'next/link' +import { VersionSwitcher } from '@/components/VersionSwitcher' +// import { SearchButton } from '@/components/Search' +import { SearchButton } from '@/components/.ZH/Search' +import Router from 'next/router' +import { Logo } from '@/components/Logo' +import { Dialog } from '@headlessui/react' +import { useEffect, useState } from 'react' +import clsx from 'clsx' + +function Featured() { + return ( + + + Tailwind CSS v3.0 + + + {/* Just-in-Time all the time, colored shadows, scroll snap and more */} + Just-in-Time all the time, colored shadows, scroll snap and more + + + + + ) +} + +export function NavPopover() { + let [isOpen, setIsOpen] = useState(false) + + useEffect(() => { + if (!isOpen) return + function handleRouteChange() { + setIsOpen(false) + } + Router.events.on('routeChangeComplete', handleRouteChange) + return () => { + Router.events.off('routeChangeComplete', handleRouteChange) + } + }, [isOpen]) + + return ( + <> + + + +
    + +
      + +
    +
    +     + + ) +} + +export function NavItems() { + return ( + <> +
  • + + {/* Docs */} + 文件 + +
    • +
  • + + {/* Components */} + 元件庫 + +
    • +
  • + + {/* Blog */} + 部落格 + +
    • +
  • + + Tailwind CSS on GitHub + + +
    • + + ) +} + +export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section }) { + let [isOpaque, setIsOpaque] = useState(false) + + useEffect(() => { + let offset = 50 + function onScroll() { + if (!isOpaque && window.scrollY > offset) { + setIsOpaque(true) + } else if (isOpaque && window.scrollY <= offset) { + setIsOpaque(false) + } + } + window.addEventListener('scroll', onScroll, { passive: true }) + return () => { + window.removeEventListener('scroll', onScroll, { passive: true }) + } + }, [isOpaque]) + + return ( + <> +
    +
    + + + + +
    +
    +
    +
    + + {hasNav && ( +
    + + {title && ( +
      + {section && ( +
    1. + {section} + +
      2. + )} +
    2. {title}
      3. +
    + )} +
    + )} +
    +
    + + ) +} diff --git a/src/components/.ZH/Heading.js b/src/components/.ZH/Heading.js new file mode 100644 index 000000000..aae845bad --- /dev/null +++ b/src/components/.ZH/Heading.js @@ -0,0 +1,80 @@ +import { useEffect, useContext, useRef } from 'react' +import { ContentsContext } from '@/layouts/.ZH/ContentsLayout' +import { useTop } from '@/hooks/useTop' +import clsx from 'clsx' + +export function Heading({ + level, + id, + children, + number, + badge, + className = '', + hidden = false, + ignore = false, + style = {}, + nextElement, + ...props +}) { + let Component = `h${level}` + const context = useContext(ContentsContext) + + let ref = useRef() + let top = useTop(ref) + + useEffect(() => { + if (!context) return + if (typeof top !== 'undefined') { + context.registerHeading(id, top) + } + return () => { + context.unregisterHeading(id) + } + }, [top, id, context?.registerHeading, context?.unregisterHeading]) + + return ( + + {!hidden && ( + + ​ +
    + +
    +     + )} + {number && ( + + {number} + + )} + {children} + {badge && ( + + {badge} + + )} +     + ) +} diff --git a/src/components/.ZH/HtmlZenGarden.js b/src/components/.ZH/HtmlZenGarden.js new file mode 100644 index 000000000..27a913934 --- /dev/null +++ b/src/components/.ZH/HtmlZenGarden.js @@ -0,0 +1,798 @@ +import { AnimateSharedLayout, motion } from 'framer-motion' +import { font as pallyVariable } from '../fonts/generated/Pally-Variable.module.css' +import { font as synonymVariable } from '../fonts/generated/Synonym-Variable.module.css' +import { font as sourceSerifProRegular } from '../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as ibmPlexMonoSemiBold } from '../fonts/generated/IBMPlexMono-SemiBold.module.css' +import { usePrevious } from '@/hooks/usePrevious' +import { useCallback, useEffect, useRef, useState } from 'react' +import debounce from 'debounce' +import dlv from 'dlv' +import { fit } from '@/utils/fit' +import clsx from 'clsx' +import colors from 'tailwindcss/colors' + +const themes = { + Simple: { + wrapper: { borderRadius: 12 }, + container: '', + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 192 + if (css) { + return col ? '100%' : '192px' + } else { + return col ? containerWidth : 192 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 + return col ? 191 : 305 + }, + borderRadius: [ + [8, 8, 0, 0], + [8, 8, 0, 0], + [8, 0, 0, 8], + ], + src: require('@/img/classic-utility-jacket.jpg').default, + originalWidth: 1200, + originalHeight: 1600, + }, + contentContainer: 'p-6', + header: '-mt-6 pt-6 pb-6', + heading: 'flex-auto', + stock: 'flex-none w-full mt-2', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + height: 42, + borderRadius: 8, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.gray[900], + text: 'text-white font-semibold', + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: 'text-gray-900 font-semibold', + }, + like: { + color: colors.gray[300], + }, + }, + size: { + container: '', + list: 'space-x-3', + button: { + activeFont: 'font-semibold', + size: 38, + borderRadius: 8, + color: colors.gray[700], + activeBackgroundColor: colors.gray[900], + activeColor: colors.white, + }, + }, + smallprint: { + container: ['mt-6', 'mt-6', 'mt-6 mb-1'], + inner: 'text-sm text-gray-700', + }, + }, + Playful: { + wrapper: { borderRadius: 12 }, + // container: ['p-6', 'p-6', ''], + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 224 + if (css) { + return col ? 'calc(100% + 1rem)' : '224px' + } else { + return col ? containerWidth + 16 : 224 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 + 16 + return col ? 191 : 305 + 16 + }, + borderRadius: 8, + src: require('@/img/kids-jumper.jpg').default, + originalWidth: 1200, + originalHeight: 1700, + className: ['-mt-2 -mx-2', '-mt-2 -mx-2', '-my-2 -ml-2'], + }, + contentContainer: 'p-6', + header: ['pb-4', 'pb-4', '-mt-6 pt-6 pb-4'], + heading: 'flex-auto', + price: 'mt-2 w-full flex-none order-1', + stock: 'flex-none ml-3', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + height: 46, + borderRadius: 46 / 2, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.violet[600], + text: `text-base text-white font-medium ${pallyVariable}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-base text-gray-900 font-medium ${pallyVariable}`, + }, + like: { + color: colors.violet[600], + backgroundColor: colors.violet[50], + borderColor: colors.violet[50], + }, + }, + size: { + container: '', + list: 'space-x-3', + button: { + font: `font-bold ${pallyVariable}`, + size: 38, + borderRadius: 38 / 2, + borderColor: colors.white, + color: colors.violet[400], + activeBackgroundColor: colors.violet[600], + activeBorderColor: colors.violet[600], + activeColor: colors.white, + }, + }, + smallprint: { container: 'mt-5', inner: `text-sm ${pallyVariable}` }, + }, + Elegant: { + wrapper: { borderRadius: 0 }, + container: 'p-1.5', + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 210 + if (css) { + return col ? '100%' : '210px' + } else { + return col ? containerWidth - 12 : 210 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 305 - 12 + return col ? 177 : 305 - 12 + }, + borderRadius: 0, + src: require('@/img/fancy-suit-jacket.jpg').default, + originalWidth: 1200, + originalHeight: 2128, + }, + contentContainer: ['p-6 pt-0 -mx-1.5 -mb-1.5', 'p-6 pt-0 -mx-1.5 -mb-1.5', 'p-6 pt-0 -my-1.5'], + header: 'py-6', + heading: 'w-full flex-none mb-3', + stock: 'flex-none ml-auto', + button: { + grid: ['1fr auto', '1fr 1fr auto', '1fr 1fr auto'], + height: 46, + borderRadius: 0, + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.gray[900], + text: `text-white font-medium tracking-wide uppercase ${synonymVariable}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-gray-900 font-medium tracking-wide uppercase ${synonymVariable}`, + }, + like: { + color: colors.gray[300], + }, + }, + size: { + container: '', + button: { + font: `font-medium ${synonymVariable}`, + size: 32, + borderRadius: 32 / 2, + color: colors.gray[500], + activeBackgroundColor: colors.gray[100], + activeColor: colors.gray[900], + }, + }, + smallprint: { + container: 'mt-[1.375rem]', + inner: `text-sm ${synonymVariable}`, + }, + }, + Brutalist: { + wrapper: { borderRadius: 0 }, + container: ['p-4 pb-6', 'p-4 pb-6', 'p-6 pb-[1.0625rem]'], + image: { + width({ containerWidth, col }, css = false) { + if (!containerWidth) return 184 + if (css) { + return col ? '100%' : '184px' + } else { + return col ? containerWidth - 32 : 184 + } + }, + height({ containerWidth, col }) { + if (!containerWidth) return 224 + return col ? 160 : 224 + }, + borderRadius: 0, + src: require('@/img/retro-shoe.jpg').default, + originalWidth: 1200, + originalHeight: 1772, + }, + contentContainer: ['px-2', 'px-2', 'pl-8'], + header: ['py-6', 'py-6', '-mt-6 py-6'], + heading: 'w-full flex-none mb-2', + stock: 'flex-auto ml-3', + button: { + grid: ['1fr auto', '1fr 1fr auto', 'auto auto 1fr'], + width: 30, + height: 46, + borderRadius: 0, + className: 'px-6', + primary: { + class: ['col-span-2', '', ''], + backgroundColor: colors.teal[400], + borderColor: colors.black, + text: `text-base text-black uppercase ${ibmPlexMonoSemiBold}`, + }, + secondary: { + backgroundColor: colors.white, + borderColor: colors.gray[200], + text: `text-base text-black uppercase ${ibmPlexMonoSemiBold}`, + }, + like: { + container: ' ', + className: 'justify-center', + color: colors.black, + borderColor: colors.white, + }, + }, + size: { + container: 'my-6', + list: 'space-x-3', + button: { + font: ibmPlexMonoRegular, + size: 42, + borderRadius: 0, + color: colors.black, + activeBackgroundColor: colors.black, + activeColor: colors.white, + }, + }, + smallprint: { + container: 'mt-4', + inner: `${ibmPlexMonoRegular} text-xs leading-6`, + }, + }, +} + +const imageAnimationVariants = { + visible: { opacity: [0, 1], zIndex: 2 }, + prev: { zIndex: 1 }, + hidden: { zIndex: 0 }, +} + +export function HtmlZenGarden({ theme }) { + const prevTheme = usePrevious(theme) + const [{ width: containerWidth, col, above }, setContainerState] = useState({ + width: 0, + col: false, + }) + const containerRef = useRef() + + const updateWidth = useCallback( + debounce(() => { + if (!containerRef.current) return + const newWidth = Math.round(containerRef.current.getBoundingClientRect().width) + const newCol = + window.innerWidth < 640 + ? 'sm' + : window.innerWidth >= 1024 && window.innerWidth < 1280 + ? 'lg' + : false + const newAbove = window.innerWidth < 1024 + if (newWidth !== containerWidth || newCol !== col || newAbove !== above) { + setContainerState({ width: newWidth, col: newCol, above: newAbove }) + } + }, 300) + ) + + useEffect(() => { + const observer = new window.ResizeObserver(updateWidth) + observer.observe(containerRef.current) + updateWidth() + return () => { + observer.disconnect() + } + }, [containerWidth, col, updateWidth]) + + const getThemeValue = (key, defaultValue) => { + const value = dlv(themes[theme], key, defaultValue) + return Array.isArray(value) ? value[col === 'sm' ? 0 : col === 'lg' ? 1 : 2] : value + } + + const getImageRadius = (key) => { + let radius = themes[theme].image.borderRadius + if (!Array.isArray(radius)) { + return { + borderTopLeftRadius: radius, + borderTopRightRadius: radius, + borderBottomRightRadius: radius, + borderBottomLeftRadius: radius, + } + } + if (Array.isArray(radius[0])) { + radius = radius[col === 'sm' ? 0 : col === 'lg' ? 1 : 2] + } + if (!Array.isArray(radius)) { + return { + borderTopLeftRadius: radius, + borderTopRightRadius: radius, + borderBottomRightRadius: radius, + borderBottomLeftRadius: radius, + } + } + return { + borderTopLeftRadius: radius[0], + borderTopRightRadius: radius[1], + borderBottomRightRadius: radius[2], + borderBottomLeftRadius: radius[3], + } + } + + return ( + +
    + {!containerWidth ? ( +
    + ) : ( + + +
    + + {Object.keys(themes).map((name, i) => ( + + ))} + + +
    +
    +
    + +
    + + Classic Utility + Jacket + + + Kids Jumpsuit + + + Dogtooth Style Jacket + + + Retro Shoe + +
    +
    + + $110.00 + + + $39.00 + + + $350.00 + + + $89.00 + +
    +
    + + In stock + + + In stock + + + In stock + + + In stock + +
    +
    +
    + + {['XS', 'S', 'M', 'L', 'XL'].map((size) => ( + + {size === 'XS' && ( + + )} + + {Object.keys(themes).map((name) => ( + + {size === 'XS' && name === 'Brutalist' ? ( + <> + {/* + */} + {size} + + ) : ( + size + )} + + ))} + + ))} + +
    + +
    +
    + + {Object.keys(themes).map((name, i) => ( + + Buy now + + ))} + +
    +
    + + {Object.keys(themes).map((name, i) => ( + + Add to bag + + ))} + +
    +
    + + + + + +
    +
    +
    + {Object.keys(themes).map((name) => ( + + + Free shipping on all + continental US orders. + + + ))} +
    +
    +     +     + )} +
    + + ) +} diff --git a/src/components/.ZH/Search.js b/src/components/.ZH/Search.js new file mode 100644 index 000000000..aeabb3ea3 --- /dev/null +++ b/src/components/.ZH/Search.js @@ -0,0 +1,198 @@ +import { useState, useCallback, useRef, createContext, useContext, useEffect } from 'react' +import { createPortal } from 'react-dom' +import Link from 'next/link' +import Head from 'next/head' +import { useRouter } from 'next/router' +import { DocSearchModal } from '@docsearch/react' +import clsx from 'clsx' +import { useActionKey } from '@/hooks/useActionKey' + +const INDEX_NAME = 'tailwindcss' +const API_KEY = '5fc87cef58bb80203d2207578309fab6' +const APP_ID = 'KNPXZI5B0M' + +const SearchContext = createContext() + +export function SearchProvider({ children }) { + const router = useRouter() + const [isOpen, setIsOpen] = useState(false) + const [initialQuery, setInitialQuery] = useState(null) + + const onOpen = useCallback(() => { + setIsOpen(true) + }, [setIsOpen]) + + const onClose = useCallback(() => { + setIsOpen(false) + }, [setIsOpen]) + + const onInput = useCallback( + (e) => { + setIsOpen(true) + setInitialQuery(e.key) + }, + [setIsOpen, setInitialQuery] + ) + + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + }) + + return ( + <> + + + + + {children} + + {isOpen && + createPortal( + { + return items.map((item, index) => { + // We transform the absolute URL into a relative URL to + // leverage Next's preloading. + const a = document.createElement('a') + a.href = item.url + + const hash = a.hash === '#content-wrapper' ? '' : a.hash + + return { + ...item, + url: `${a.pathname}${hash}`, + __is_result: () => true, + __is_parent: () => item.type === 'lvl1' && items.length > 1 && index === 0, + __is_child: () => + item.type !== 'lvl1' && + items.length > 1 && + items[0].type === 'lvl1' && + index !== 0, + __is_first: () => index === 1, + __is_last: () => index === items.length - 1 && index !== 0, + } + }) + }} + />, + document.body + )} + + ) +} + +function Hit({ hit, children }) { + return ( + + + {children} + + + ) +} + +export function SearchButton({ children, ...props }) { + let searchButtonRef = useRef() + let actionKey = useActionKey() + let { onOpen, onInput } = useContext(SearchContext) + + useEffect(() => { + function onKeyDown(event) { + if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) { + if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) { + onInput(event) + } + } + } + window.addEventListener('keydown', onKeyDown) + return () => { + window.removeEventListener('keydown', onKeyDown) + } + }, [onInput, searchButtonRef]) + + return ( + + ) +} + +function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) { + useEffect(() => { + function onKeyDown(event) { + function open() { + // We check that no other DocSearch modal is showing before opening + // another one. + if (!document.body.classList.contains('DocSearch--active')) { + onOpen() + } + } + + if ( + (event.keyCode === 27 && isOpen) || + (event.key === 'k' && (event.metaKey || event.ctrlKey)) || + (!isEditingContent(event) && event.key === '/' && !isOpen) + ) { + event.preventDefault() + + if (isOpen) { + onClose() + } else if (!document.body.classList.contains('DocSearch--active')) { + open() + } + } + } + + window.addEventListener('keydown', onKeyDown) + return () => { + window.removeEventListener('keydown', onKeyDown) + } + }, [isOpen, onOpen, onClose]) +} + +function isEditingContent(event) { + let element = event.target + let tagName = element.tagName + return ( + element.isContentEditable || + tagName === 'INPUT' || + tagName === 'SELECT' || + tagName === 'TEXTAREA' + ) +} diff --git a/src/components/.ZH/home/BuildAnything.js b/src/components/.ZH/home/BuildAnything.js new file mode 100644 index 000000000..a3bfadf11 --- /dev/null +++ b/src/components/.ZH/home/BuildAnything.js @@ -0,0 +1,332 @@ +import { Fragment, useEffect, useRef, useState } from 'react' +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + themeTabs, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/build-anything.png' +import { HtmlZenGarden } from '@/components/HtmlZenGarden' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/build-anything.html?highlight' + +const code = { + Simple: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $110.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Playful: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $110.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Elegant: `
    +
    + +
    +
    +
    +

    Classic Utility Jacket

    +
    $350.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, + Brutalist: `
    +
    + +
    +
    +
    +

    Retro Shoe

    +
    $89.00
    +
    In stock
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    Free shipping on all continental US orders.

    +
    +
    `, +} + +function extractClasses(code) { + return code.match(/class="[^"]+"/g).map((attr) => attr.substring(7, attr.length - 1)) +} + +const classes = { + Simple: extractClasses(code.Simple), + Playful: extractClasses(code.Playful), + Elegant: extractClasses(code.Elegant), + Brutalist: extractClasses(code.Brutalist), +} + +const content = { + Simple: ['/classic-utility-jacket.jpg', 'Classic Utility Jacket', '$110.00'], + Playful: ['/kids-jumpsuit.jpg', 'Kids Jumpsuit', '$39.00'], + Elegant: ['/dogtooth-style-jacket.jpg', 'DogTooth Style Jacket', '$350.00'], + Brutalist: ['/retro-shoe.jpg', 'Retro Shoe', '$89.00'], +} + +export function BuildAnything() { + const [theme, setTheme] = useState('Simple') + let classIndex = 0 + let contentIndex = 0 + + const initial = useRef(true) + + useEffect(() => { + initial.current = false + }, []) + + return ( +
    +
    + + + + Build anything + + Build whatever you want, seriously. + + + Because Tailwind is so low-level, it never encourages you to design the same site twice. + Even with the same color palette and sizing scale, it's easy to build the same component + with a completely different look in the next project. + + + Get started, installation + +
    + +
    +
    + } + right={ + + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.content === '_') { + let cls = classes[theme][classIndex++] + return ( + + {cls} + + ) + } + + if (token.content.includes('__content__')) { + let text = content[theme][contentIndex++] + return ( + + {token.content.split(/(__content__)/).map((part, i) => + i === 1 ? ( + + {text} + + ) : ( + part + ) + )} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/ComponentDriven.js b/src/components/.ZH/home/ComponentDriven.js new file mode 100644 index 000000000..e9fc5e2a5 --- /dev/null +++ b/src/components/.ZH/home/ComponentDriven.js @@ -0,0 +1,665 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { GridLockup } from '@/components/GridLockup' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { Fragment, useEffect, useState } from 'react' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import iconUrl from '@/img/icons/home/component-driven.png' +import { Tabs } from '@/components/Tabs' +import { AnimatePresence, motion } from 'framer-motion' +import clsx from 'clsx' +import { useInView } from 'react-intersection-observer' + +import { lines as reactMoviesSample } from '../../samples/react/movies.jsx?highlight' +import { lines as reactNavSample } from '../../samples/react/nav.jsx?highlight' +import { lines as reactNavItemSample } from '../../samples/react/nav-item.jsx?highlight' +import { lines as reactListSample } from '../../samples/react/list.jsx?highlight' +import { lines as reactListItemSample } from '../../samples/react/list-item.jsx?highlight' + +import { lines as vueMoviesSample } from '../../samples/vue/movies.html?highlight' +import { lines as vueNavSample } from '../../samples/vue/nav.html?highlight' +import { lines as vueNavItemSample } from '../../samples/vue/nav-item.html?highlight' +import { lines as vueListSample } from '../../samples/vue/list.html?highlight' +import { lines as vueListItemSample } from '../../samples/vue/list-item.html?highlight' + +import { lines as angularMoviesSample } from '../../samples/angular/movies.js?highlight' +import { lines as angularNavSample } from '../../samples/angular/nav.js?highlight' +import { lines as angularNavItemSample } from '../../samples/angular/nav-item.js?highlight' +import { lines as angularListSample } from '../../samples/angular/list.js?highlight' +import { lines as angularListItemSample } from '../../samples/angular/list-item.js?highlight' + +import { lines as bladeMoviesSample } from '../../samples/blade/movies.html?highlight' +import { lines as bladeNavSample } from '../../samples/blade/nav.html?highlight' +import { lines as bladeNavItemSample } from '../../samples/blade/nav-item.html?highlight' +import { lines as bladeListSample } from '../../samples/blade/list.html?highlight' +import { lines as bladeListItemSample } from '../../samples/blade/list-item.html?highlight' + +import { lines as css } from '../../samples/apply.txt?highlight=css' +import { lines as html } from '../../samples/apply.html?highlight' + +function highlightDecorators(lines) { + for (let i = 0; i < lines.length; i++) { + for (let j = 0; j < lines[i].length; j++) { + if (lines[i][j].types.includes('function') && lines[i][j - 1].content.trim() === '@') { + lines[i][j - 1].types = ['function'] + } + } + } + return lines +} + +const movies = [ + { + title: 'Prognosis Negative', + starRating: '2.66', + rating: 'PG-13', + year: '2021', + genre: 'Comedy', + runtime: '1h 46m', + cast: 'Simon Pegg, Zach Galifianakis', + image: require('@/img/prognosis-negative.jpg').default, + }, + { + title: 'Rochelle, Rochelle', + starRating: '3.25', + rating: 'R', + year: '2020', + genre: 'Romance', + runtime: '1h 56m', + cast: 'Emilia Clarke', + image: require('@/img/rochelle-rochelle.jpg').default, + }, + { + title: 'Death Blow', + starRating: '4.95', + rating: '18A', + year: '2020', + genre: 'Action', + runtime: '2h 5m', + cast: 'Idris Elba, John Cena, Thandiwe Newton', + image: require('@/img/death-blow.jpg').default, + }, +] + +const tabs = { + React: { + 'Movies.js': reactMoviesSample, + 'Nav.js': reactNavSample, + 'NavItem.js': reactNavItemSample, + 'List.js': reactListSample, + 'ListItem.js': reactListItemSample, + }, + Vue: { + 'Movies.vue': vueMoviesSample, + 'Nav.vue': vueNavSample, + 'NavItem.vue': vueNavItemSample, + 'List.vue': vueListSample, + 'ListItem.vue': vueListItemSample, + }, + Angular: { + 'movies.component.ts': highlightDecorators(angularMoviesSample), + 'nav.component.ts': highlightDecorators(angularNavSample), + 'nav-item.component.ts': highlightDecorators(angularNavItemSample), + 'list.component.ts': highlightDecorators(angularListSample), + 'list-item.component.ts': highlightDecorators(angularListItemSample), + }, + Blade: { + 'movies.blade.php': bladeMoviesSample, + 'nav.blade.php': bladeNavSample, + 'nav-item.blade.php': bladeNavItemSample, + 'list.blade.php': bladeListSample, + 'list-item.blade.php': bladeListItemSample, + }, +} + +function ComponentLink({ onClick, children }) { + const [active, setActive] = useState(false) + + useEffect(() => { + function onKey(e) { + const modifier = e.ctrlKey || e.shiftKey || e.altKey || e.metaKey + if (!active && modifier) { + setActive(true) + } else if (active && !modifier) { + setActive(false) + } + } + window.addEventListener('keydown', onKey) + window.addEventListener('keyup', onKey) + return () => { + window.removeEventListener('keydown', onKey) + window.removeEventListener('keyup', onKey) + } + }, [active]) + + return active ? ( + + ) : ( + children + ) +} + +function ComponentExample({ framework }) { + const [activeTab, setActiveTab] = useState(0) + const lines = tabs[framework][Object.keys(tabs[framework])[activeTab]] + + useIsomorphicLayoutEffect(() => { + setActiveTab(0) + }, [framework]) + + return ( + + + +
    +
      + {Object.keys(tabs[framework]).map((tab, tabIndex) => ( +
    • + +
      • + ))} +
    +
    +
    + + + + + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if ( + (token.types[token.types.length - 1] === 'class-name' || + (token.types[token.types.length - 1] === 'tag' && + /^([A-Z]|x-)/.test(token.content))) && + tokens[tokenIndex - 1]?.types[tokens[tokenIndex - 1].types.length - 1] === + 'punctuation' && + (tokens[tokenIndex - 1]?.content === '<' || + tokens[tokenIndex - 1].content === ' + + setActiveTab( + Object.keys(tabs[framework]).findIndex((x) => + x.startsWith(`${token.content.replace(/^x-/, '')}.`) + ) + ) + } + > + {token.content} + + + ) + } + + if ( + token.types[token.types.length - 1] === 'string' && + /^(['"`])\.\/.*?\.(js|vue)\1$/.test(token.content) + ) { + const tab = token.content.substr(3, token.content.length - 4) + return ( + + {token.content.substr(0, 1)} + + {token.content.substr(0, 1)} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + + + ) +} + +function ApplyExample({ inView }) { + return ( + +

    + styles.css +

    +
    + + {css.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + let className = getClassNameForToken(token) + if (className) { + className = className + .replace(/\bclass\b/, 'selector') + .replace(/\b(number|color)\b/, '') + } + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + +
    +

    + index.html +

    +
    + +
    + {html.map((tokens, lineIndex) => ( +
    = 4 && lineIndex <= 5 ? 'not-mono' : undefined} + > + {tokens.map((token, tokenIndex) => { + return ( + + {token.content} + + ) + })} +
    + ))} +
    +     +
    +     + ) +} + +function AtApplySection() { + const { inView, ref } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( +
    +
    +

    Not into component frameworks?

    + + If you like to keep it old school use Tailwind's @apply directive + to extract repeated utility patterns into custom CSS classes just by copying and pasting + the list of class names. + + + Learn more, reusing styles + +
    + +
    +
    +
    +

    + Weekly one-on-one +

    +
    +
    +
    Date and time
    +
    + -{' '} + +
    +
    +
    +
    Location
    +
    + Kitchener, ON +
    +
    +
    +
    Description
    +
    No meeting description
    +
    +
    +
    Attendees
    +
    + Andrew McDonald +
    +
    +
    +
    +
    + Decline +
    +
    + Accept +
    +
    +
    +
    +
    +
    + +
    +
    + ) +} + +const tabItems = { + React: (selected) => ( + <> + + + + + + ), + Vue: (selected) => ( + <> + + + + ), + Angular: (selected) => ( + <> + + + + + ), + Blade: (selected) => ( + <> + + + + + + + ), +} + +export function ComponentDriven() { + const [framework, setFramework] = useState('React') + + return ( +
    +
    + + + + Component-driven + + Worried about duplication? Don’t be. + + + If you're repeating the same utilities over and over and over again, all you have to do is + extract them into a component or template partial and boom — you've got a single source of + truth so you can make changes in one place. + + + Learn more, reusing styles + +
    + +
    +
    + + + + {movies.map(({ title, starRating, rating, year, genre, runtime, cast, image }, i) => ( +
    + +
    +

    {title}

    +
    +
    +
    + Star rating + + + +
    +
    {starRating}
    +
    +
    +
    Rating
    +
    {rating}
    +
    +
    +
    Year
    +
    {year}
    +
    +
    +
    Genre
    +
    + + {genre} +
    +
    +
    +
    Runtime
    +
    + + {runtime} +
    +
    +
    +
    Cast
    +
    {cast}
    +
    +
    +
    +
    + ))} +
    + } + right={} + /> + + + + ) +} diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js new file mode 100644 index 000000000..4f289a740 --- /dev/null +++ b/src/components/.ZH/home/ConstraintBased.js @@ -0,0 +1,367 @@ +import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/constraint-based.png' +import defaultConfig from 'defaultConfig' +import { AnimatePresence, motion } from 'framer-motion' +import { useState } from 'react' +import { GridLockup } from '../GridLockup' +import clsx from 'clsx' +import { lines as sizingSample } from '../../samples/sizing.html?highlight' +import { lines as colorsSample } from '../../samples/colors.html?highlight' +import { lines as typographySample } from '../../samples/typography.html?highlight' +import { lines as shadowsSample } from '../../samples/shadows.html?highlight' + +const tokens = { + Sizing: sizingSample, + Colors: colorsSample, + Typography: typographySample, + Shadows: shadowsSample, +} + +let tabs = { + Sizing: (selected) => ( + <> + + + + ), + Colors: (selected) => ( + <> + + + + + + ), + Typography: (selected) => ( + <> + + + + + ), + Shadows: (selected) => ( + <> + + + + + ), +} + +function Bars({ sizes, className }) { + return ( + + {sizes.map((key, i) => ( +
  • + +
    + w-{key} +
    + +
    • + ))} +     + ) +} + +function Sizing() { + return ( + <> + + + + ) +} + +function Colors() { + return ( + + {['sky', 'blue', 'indigo', 'purple'].map((color, i) => ( + +
      + {Object.keys(defaultConfig.theme.colors[color]).map((key) => ( +
    • + ))} +
    +
    + {color}-50 + + + + + + + + {color}-900 +
    +     + ))} +     + ) +} + +function Typography() { + return ( + + {[ + [ + 'font-sans', + 'text-sm leading-6 sm:text-base sm:leading-6 lg:text-sm lg:leading-6 xl:text-base xl:leading-6', + ], + ['font-serif', 'text-sm leading-6 sm:text-lg lg:text-sm lg:leading-6 xl:text-lg'], + ['font-mono', 'text-sm leading-6 sm:leading-7 lg:leading-6 xl:leading-7'], + ].map((font, i) => ( + +

    {font[0]}

    +
    + The quick brown fox jumps over the lazy dog. +
    +     + ))} +     + ) +} + +function Shadows() { + return ( + +
      + {['shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl'].map( + (shadow, i) => ( + + {shadow} + + ) + )} +
    +     + ) +} + +export function ConstraintBased() { + const [tab, setTab] = useState('Sizing') + + return ( +
    +
    + + + + Constraint-based + + An API for your design system. + + + Utility classes help you work within the constraints of a system instead of littering your + stylesheets with arbitrary values. They make it easy to be consistent with color choices, + spacing, typography, shadows, and everything else that makes up a well-engineered design + system. + + + Learn more, utility-first fundamentals + +
    + setTab(tab)} + className="text-indigo-600" + iconClassName="text-indigo-500" + /> +
    +
    + +
    +
    +
    +
    + + {tab === 'Sizing' && } + {tab === 'Colors' && } + {tab === 'Typography' && } + {tab === 'Shadows' && } + +
    +
    +
    + } + right={ + + + + + {tokens[tab].map((tokens, lineIndex) => ( +
    + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'attr-value') { + return ( + + {token.content.split(/\[([^\]]+)\]/).map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + )} + + ) + } + return ( + + {token.content} + + ) + })} +
    + ))} +     +     +     +     + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js new file mode 100644 index 000000000..05d03c520 --- /dev/null +++ b/src/components/.ZH/home/Customization.js @@ -0,0 +1,350 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + themeTabs, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/customization.png' +import { useEffect, useRef, useState } from 'react' +import tailwindColors from 'tailwindcss/colors' +import { AnimatePresence, motion } from 'framer-motion' +import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' +import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' +import { Token } from '../Code' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { tokens } from '../../samples/customization.js?highlight' + +const defaultSampleBody = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.' + +const themes = { + Simple: { + font: 'Inter', + fontStacks: [ + ['Inter', 'system-ui', 'sans-serif'], + ['Inter', 'system-ui', 'sans-serif'], + ], + bodySize: '14pt', + colors: { + primary: 'blue', + secondary: 'gray', + }, + }, + Playful: { + font: 'Pally', + fontStacks: [ + ['Pally', 'Comic Sans MS', 'sans-serif'], + ['Pally', 'Comic Sans MS', 'sans-serif'], + ], + bodySize: '14pt', + classNameDisplay: `${pallyVariable} font-medium`, + classNameBody: pallyVariable, + colors: { + primary: 'rose', + secondary: 'violet', + }, + }, + Elegant: { + font: 'Source Serif Pro', + fontStacks: [ + ['Source Serif Pro', 'Georgia', 'serif'], + ['Synonym', 'system-ui', 'sans-serif'], + ], + bodySize: '14pt', + classNameDisplay: sourceSerifProRegular, + classNameBody: synonymVariable, + colors: { + primary: 'gray', + secondary: 'emerald', + }, + }, + Brutalist: { + font: 'IBM Plex Mono', + fontStacks: [ + ['IBM Plex Mono', 'Menlo', 'monospace'], + ['IBM Plex Mono', 'Menlo', 'monospace'], + ], + bodySize: '14pt', + classNameDisplay: ibmPlexMonoRegular, + classNameBody: ibmPlexMonoRegular, + sampleBody: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat.', + colors: { + primary: 'gray', + secondary: 'teal', + }, + }, +} + +export function Customization() { + const [theme, setTheme] = useState('Simple') + + return ( +
    +
    + + + + Customization + + Extend it, tweak it, change it. + + +

    + Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally + everything can be customized — from the color palette to the spacing scale to the box + shadows to the mouse cursor. +

    +

    + Use the tailwind.config.js file to craft your own design system, then let Tailwind + transform it into your own custom CSS framework. +

    +     + + Learn more, configuration + +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +

    Typography

    +
      +
    • +
      +
      +
      CSS class
      +
      font-display
      +
      +
      +
      Font name
      + + + {themes[theme].font} + + +
      +
      +
      Sample
      + + + AaBbCc + + +
      +
      +
      • +
    • +
      +
      +
      CSS class
      +
      font-body
      +
      +
      +
      Font size
      + + + {themes[theme].bodySize} + + +
      +
      +
      Sample
      + + + {themes[theme].sampleBody || defaultSampleBody} + + +
      +
      +
      • +
    +
    + +
    +
    +

    Colors

    +
      + {Object.entries(themes[theme].colors).map(([name, color], index) => ( +
    • +
      +
      +
      CSS class prefix
      +
      bg-{name}
      +
      +
      +
      Range
      +
      50-900
      +
      +
      +
      Sample
      +
      +
        + {[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((key) => ( + + ))} +
      +
      +
      +
      +
      • + ))} +
    +
    +
    +
    +
    + } + right={ + + { + if (typeof token === 'string' && token.includes('__SECONDARY_COLOR__')) { + return ['__SECONDARY_COLOR__', token] + } + return token + }} + /> + + } + /> +
    + ) +} + +function CustomizationToken({ theme, ...props }) { + const { token } = props + const initial = useRef(true) + + useEffect(() => { + initial.current = false + }, []) + + if (token[0] === 'string' && token[1].startsWith("'font-")) { + let [i, j] = token[1].match(/[0-9]+/g).map((x) => parseInt(x, 10)) + + return ( + + {"'"} + + {themes[theme].fontStacks[i][j]} + + {"'"} + + ) + } + + if (token[0] === 'string' && token[1].startsWith("'color-")) { + const [, name, shade] = token[1].substr(1, token[1].length - 2).split('-') + const color = tailwindColors[themes[theme].colors[name]][shade] + + return ( + + {"'"} + + {color} + + {"'"} + + ) + } + + if (token[0] === '__SECONDARY_COLOR__') { + let name = Object.keys(themes[theme].colors)[1] + return token[1].split('__SECONDARY_COLOR__').map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {name} + + ) + ) + } + + return +} diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js new file mode 100644 index 000000000..dc76c96c0 --- /dev/null +++ b/src/components/.ZH/home/DarkMode.js @@ -0,0 +1,194 @@ +import { useState } from 'react' +import { Switch } from '@headlessui/react' +import { + Paragraph, + IconContainer, + Caption, + BigText, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { CodeWindow } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/dark-mode.png' +import { addClassTokens } from '@/utils/addClassTokens' +import { Token } from '@/components/Code' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { code, tokens } from '../../samples/dark-mode.html?highlight' + +function Sun(props) { + return ( + + ) +} + +function Moon(props) { + return ( + + ) +} + +function DarkModeSwitch({ enabled, onChange }) { + return ( + + {enabled ? 'Enable' : 'Disable'} dark mode + + + + + + + + ) +} + +export function DarkMode() { + const [enabled, setEnabled] = useState(false) + + return ( +
    +
    + + + + Dark mode + + Now with Dark Mode. + + + Don’t want to be one of those websites that blinds people when they open it on their phone + at 2am? Enable dark mode in your configuration file then throw{' '} + dark: in front of any color utility to apply it when dark mode is + active. Works for background colors, text colors, border colors, and even gradients. + + + Learn more, dark mode + +
    + + +
    /g, '
    '), + }} + /> +
    + } + right={ + + + + } + /> + + ) +} + +function DarkModeToken({ token, parentTypes, enabled, children }) { + if (token[0] === 'class') { + if (token[1].startsWith('dark:')) { + return ( + + {children} + + ) + } + if (token[1].startsWith('(light)')) { + return ( + + {token[1].replace(/^\(light\)/, '')} + + ) + } + } + + return ( + + {children} + + ) +} diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js new file mode 100644 index 000000000..b934bf95a --- /dev/null +++ b/src/components/.ZH/home/EditorTools.js @@ -0,0 +1,425 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { motion } from 'framer-motion' +import { Fragment, useEffect, useState } from 'react' +import iconUrl from '@/img/icons/home/editor-tools.png' +import { useInView } from 'react-intersection-observer' +import colors from 'tailwindcss/colors' +import dlv from 'dlv' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/editor-tools.html?highlight' +import clsx from 'clsx' + +const problems = [ + ["'flex' applies the same CSS property as 'block'.", 'cssConflict [1, 20]'], + ["'block' applies the same CSS property as 'flex'.", 'cssConflict [1, 54]'], +] + +const completions = [ + // + ['sm:', '@media (min-width: 640px)'], + ['md:'], + ['lg:'], + ['xl:'], + ['focus:'], + ['group-hover:'], + ['hover:'], + ['container'], + ['space-y-0'], + ['space-x-0'], + ['space-y-1'], + ['space-x-1'], + // + ['bg-fixed', 'background-position: fixed;'], + ['bg-local'], + ['bg-scroll'], + ['bg-clip-border'], + ['bg-clip-padding'], + ['bg-clip-content'], + ['bg-clip-text'], + ['bg-transparent', 'background-color: transparent;'], + ['bg-current'], + ['bg-black', '#000'], + ['bg-white', '#fff'], + ['bg-gray-50', colors.gray[50]], + // + ['bg-teal-50', `background-color: ${colors.teal[50]};`, colors.teal[50]], + ['bg-teal-100', `background-color: ${colors.teal[100]};`, colors.teal[100]], + ['bg-teal-200', `background-color: ${colors.teal[200]};`, colors.teal[200]], + ['bg-teal-300', `background-color: ${colors.teal[300]};`, colors.teal[300]], + ['bg-teal-400', `background-color: ${colors.teal[400]};`, colors.teal[400]], + ['bg-teal-500', undefined, colors.teal[500]], + ['bg-teal-600', undefined, colors.teal[600]], + ['bg-teal-700', undefined, colors.teal[700]], + ['bg-teal-800', undefined, colors.teal[800]], + ['bg-teal-900', undefined, colors.teal[900]], + ['bg-top'], +] + +function CompletionDemo() { + const { ref, inView } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( + + {lines.map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.content === '__CONFLICT__') { + return ( + + w-full{' '} + flex{' '} + items-center justify-between{' '} + block{' '} + p-6 space-x-6 + + ) + } + + if (token.content === '__COMPLETION__') { + return + } + + if ( + token.types[token.types.length - 1] === 'attr-value' && + tokens[tokenIndex - 3].content === 'class' + ) { + return ( + + {token.content.split(' ').map((c, i) => { + const space = i === 0 ? '' : ' ' + if (/^(bg|text|border)-/.test(c)) { + const color = dlv(colors, c.replace(/^(bg|text|border)-/, '').split('-')) + if (color) { + return ( + + {space} + + {c} + + ) + } + } + return space + c + })} + + ) + } + + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + ) +} + +function Completion({ inView }) { + const [typed, setTyped] = useState('') + const [selectedCompletionIndex, setSelectedCompletionIndex] = useState(0) + const [stage, setStage] = useState(-1) + + useEffect(() => { + if (inView) { + setStage(0) + } + }, [inView]) + + useEffect(() => { + if (typed === ' bg-t') { + let i = 0 + let id = window.setInterval(() => { + if (i === 5) { + setStage(1) + setTyped('') + setSelectedCompletionIndex(0) + return window.clearInterval(id) + } + i++ + setSelectedCompletionIndex(i) + }, 300) + return () => window.clearInterval(id) + } + }, [typed]) + + useEffect(() => { + let id + if (stage === 1) { + id = window.setTimeout(() => { + setStage(2) + }, 2000) + } else if (stage === 2 || stage === 3 || stage === 4 || stage === 5) { + id = window.setTimeout(() => { + setStage(stage + 1) + }, 300) + } else if (stage === 6) { + id = window.setTimeout(() => { + setStage(-1) + setStage(0) + }, 2000) + } + return () => { + window.clearTimeout(id) + } + }, [stage]) + + return ( + + + + text-teal-600 + {stage >= 1 && stage < 2 && ' '} + + {stage >= 1 && stage < 2 && } + {stage >= 0 && + stage < 2 && + ' bg-t' + .split('') + .filter((char) => (stage >= 1 && stage < 6 ? char !== ' ' : true)) + .map((char, i) => ( + + setTyped(typed + char)} + > + {char} + + + ))} + {stage === 1 && 'eal-400'} + {(stage < 2 || stage === 6) && } + {stage >= 2 && stage <= 5 && ( + + {stage < 5 && ' '} + {stage < 5 && } + {stage >= 4 && } + {stage === 5 && ( + <> + +   + ​ + + + + )} + = 4 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + bg- + + {stage === 3 && } + = 3 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + teal- + + {stage === 2 && } + = 2 ? 'rgba(81, 92, 126, 0.4)' : undefined }} + > + 400 + + + )} + {typed && ( + +
    +
    +
      + {completions + .filter((completion) => completion[0].startsWith(typed.trim())) + .slice(0, 12) + .map((completion, i) => ( +
    • + + {completion[2] ? ( + + ) : ( + + + + )} + + + {completion[0].split(new RegExp(`(^${typed.trim()})`)).map((part, j) => + part ? ( + j % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + ) : null + )} + + {i === selectedCompletionIndex && completion[1] ? ( + + {completion[1]} + + ) : null} +
      • + ))} +
    +
    +
    +     + )} +     + ) +} + +function ColorDecorator({ color }) { + return ( + + ) +} + +export function EditorTools() { + return ( +
    +
    + + + + Editor tools + World-class IDE integration. + +

    + Worried about remembering all of these class names? The Tailwind CSS IntelliSense + extension for VS Code has you covered. +

    +

    + Get intelligent autocomplete suggestions, linting, class definitions and more, all + within your editor and with no configuration required. +

    +     + + Learn more, editor setup + +
    + + + +
    +
    + + + + + + + + + + +
    +
    + +
    +

    Problems

    +
      + {problems.map((problem, i) => ( +
    • + + + + +

      {problem[0]}

      +

      +  {problem[1]} +

      +
      • + ))} +
    +
    +
    +
    +     +
    + } + /> + + ) +} diff --git a/src/components/.ZH/home/Footer.js b/src/components/.ZH/home/Footer.js new file mode 100644 index 000000000..a1bd81282 --- /dev/null +++ b/src/components/.ZH/home/Footer.js @@ -0,0 +1,54 @@ +import Link from 'next/link' +import { documentationNav } from '@/navs/documentation' +import { Logo } from '@/components/Logo' + +const footerNav = [ + { + 'Getting Started': documentationNav['Getting Started'], + 'Core Concepts': documentationNav['Core Concepts'], + }, + { + Customization: documentationNav['Customization'], + Community: [ + { title: 'GitHub', href: 'https://github.com/tailwindlabs/tailwindcss' }, + { title: 'Discord', href: '/discord' }, + { title: 'Twitter', href: 'https://twitter.com/tailwindcss' }, + { title: 'YouTube', href: 'https://www.youtube.com/tailwindlabs' }, + ], + }, +] + +export function Footer() { + return ( +
    +
    +
    + {footerNav.map((sections) => ( +
    + {Object.entries(sections).map(([title, items]) => ( +
    +

    {title}

    + +
    + ))} +
    + ))} +
    +
    + +
    +
    +
    + ) +} diff --git a/src/components/.ZH/home/Hero.js b/src/components/.ZH/home/Hero.js new file mode 100644 index 000000000..073228426 --- /dev/null +++ b/src/components/.ZH/home/Hero.js @@ -0,0 +1,488 @@ +import { CodeWindow } from '@/components/CodeWindow' +import { Token } from '@/components/Code' +import { AnimateSharedLayout, motion, useAnimation } from 'framer-motion' +import { useEffect, useRef, useState } from 'react' +import clsx from 'clsx' +import { fit } from '@/utils/fit' +import { debounce } from 'debounce' +import { useMedia } from '@/hooks/useMedia' +import { wait } from '@/utils/wait' +import { createInViewPromise } from '@/utils/createInViewPromise' +import { tokens, code } from '../../samples/hero.html?highlight' +import colors from 'tailwindcss/colors' + +const CHAR_DELAY = 75 +const GROUP_DELAY = 1000 +const TRANSITION = { duration: 0.5 } + +function getRange(text, options = {}) { + return { start: code.indexOf(text), end: code.indexOf(text) + text.length, ...options } +} + +const ranges = [ + getRange(' p-8'), + getRange(' rounded-full'), + getRange(' mx-auto'), + getRange(' font-medium'), + getRange(' class="font-medium"'), + getRange(' class="text-sky-500"'), + getRange(' class="text-gray-700"'), + getRange(' text-center'), + getRange('md:flex '), + getRange(' md:p-0'), + getRange(' md:p-8', { immediate: true }), + getRange(' md:rounded-none'), + getRange(' md:w-48'), + getRange(' md:h-auto'), + getRange(' md:text-left'), +] + +function getRangeIndex(index, ranges) { + for (let i = 0; i < ranges.length; i++) { + const rangeArr = Array.isArray(ranges[i]) ? ranges[i] : [ranges[i]] + for (let j = 0; j < rangeArr.length; j++) { + if (index >= rangeArr[j].start && index < rangeArr[j].end) { + return [i, index - rangeArr[j].start, index === rangeArr[j].end - 1] + } + } + } + return [-1] +} + +function Words({ children, bolder = false, layout, transition }) { + return children.split(' ').map((word, i) => ( + + {bolder ? ( + <> + + {word}{' '} + + {word} + + ) : ( + word + ' ' + )} + + )) +} + +function augment(tokens, index = 0) { + for (let i = 0; i < tokens.length; i++) { + if (Array.isArray(tokens[i])) { + const _type = tokens[i][0] + const children = tokens[i][1] + if (Array.isArray(children)) { + index = augment(children, index) + } else { + const str = children + const result = [] + for (let j = 0; j < str.length; j++) { + const [rangeIndex, indexInRange, isLast] = getRangeIndex(index, ranges) + if (rangeIndex > -1) { + result.push([`char:${rangeIndex}:${indexInRange}${isLast ? ':last' : ''}`, str[j]]) + } else { + if (typeof result[result.length - 1] === 'string') { + result[result.length - 1] += str[j] + } else { + result.push(str[j]) + } + } + index++ + } + if (!(result.length === 1 && typeof result[0] === 'string')) { + tokens[i].splice(1, 1, result) + } + } + } else { + const str = tokens[i] + const result = [] + for (let j = 0; j < str.length; j++) { + const [rangeIndex, indexInRange, isLast] = getRangeIndex(index, ranges) + if (rangeIndex > -1) { + result.push([`char:${rangeIndex}:${indexInRange}${isLast ? ':last' : ''}`, str[j]]) + } else { + if (typeof result[result.length - 1] === 'string') { + result[result.length - 1] += str[j] + } else { + result.push(str[j]) + } + } + index++ + } + tokens.splice(i, 1, ...result) + i += result.length - 1 + } + } + return index +} + +augment(tokens) + +export function Hero() { + const containerRef = useRef() + const [step, setStep] = useState(-1) + const [state, setState] = useState({ group: -1, char: -1 }) + const cursorControls = useAnimation() + const [wide, setWide] = useState(false) + const [finished, setFinished] = useState(false) + const supportsMd = useMedia('(min-width: 640px)') + const [isMd, setIsMd] = useState(false) + const [containerRect, setContainerRect] = useState() + const md = supportsMd && isMd + const mounted = useRef(true) + const inViewRef = useRef() + const imageRef = useRef() + + const layout = !finished + + useEffect(() => { + return () => (mounted.current = false) + }, []) + + useEffect(() => { + let current = true + + const { promise: inViewPromise, disconnect } = createInViewPromise(inViewRef.current, { + threshold: 0.5, + }) + + const promises = [ + wait(1000), + inViewPromise, + new Promise((resolve) => { + if ('requestIdleCallback' in window) { + window.requestIdleCallback(resolve) + } else { + window.setTimeout(resolve, 0) + } + }), + new Promise((resolve) => { + if (imageRef.current.complete) { + resolve() + } else { + imageRef.current.addEventListener('load', resolve) + } + }), + ] + + Promise.all(promises).then(() => { + if (current) { + setState({ group: 0, char: 0 }) + } + }) + + return () => { + current = false + disconnect() + } + }, []) + + useEffect(() => { + if (step === 14) { + let id = window.setTimeout(() => { + setFinished(true) + }, 1000) + return () => { + window.clearTimeout(id) + } + } + }, [step]) + + useEffect(() => { + if (!finished) return + let count = 0 + cursorControls.start({ opacity: 0.5 }) + const id = window.setInterval(() => { + if (count === 2) { + return window.clearInterval(id) + } + count++ + cursorControls.start({ opacity: 1, scale: 0.9, transition: { duration: 0.25 } }).then(() => { + setWide((wide) => !wide) + cursorControls.start({ + opacity: count === 2 ? 0 : 0.5, + scale: 1, + transition: { duration: 0.25, delay: 0.6 }, + }) + }) + }, 2000) + return () => { + window.clearInterval(id) + } + }, [finished]) + + useEffect(() => { + if (finished) { + const id = window.setTimeout(() => { + setIsMd(wide) + }, 250) + return () => window.clearTimeout(id) + } + }, [wide, finished]) + + useEffect(() => { + const observer = new window.ResizeObserver( + debounce(() => { + if (containerRef.current) { + setContainerRect(containerRef.current.getBoundingClientRect()) + } + }, 500) + ) + observer.observe(containerRef.current) + return () => { + observer.disconnect() + } + }, []) + + return ( + + + + = 8 && md, + 'p-8': step >= 0, + 'text-center': (step >= 7 && !md) || (step < 14 && md), + })} + > + + + + + + = 1 && step < 11) || (step >= 11 && !md && !finished) + ? { borderRadius: 96 / 2 } + : { borderRadius: 0 }), + }} + transition={TRANSITION} + className={clsx( + 'relative z-10 overflow-hidden flex-none', + step >= 10 && md ? '-m-8 mr-8' : step >= 2 ? 'mx-auto' : undefined, + step >= 12 && md ? 'w-48' : 'w-24', + step >= 13 && md ? 'h-auto' : 'h-24' + )} + > + = 13 && md + ? fit(192, containerRect.height, 384, 512) + : step >= 12 && md + ? fit(192, 96, 384, 512) + : fit(96, 96, 384, 512) + } + /> + + = 10 && md ? '' : 'pt-6'} + transition={TRANSITION} + > + + = 3} layout={layout} transition={TRANSITION}> + “Tailwind CSS is the only framework that I've seen scale on large teams. It’s + easy to customize, adapts to any design, and the build size is tiny.” + + + = 7 && !md) || (step < 14 && md) ? 'items-center' : 'items-start' + }`} + style={{ + ...(step >= 4 ? { fontWeight: 500 } : { fontWeight: 400 }), + }} + transition={TRANSITION} + > + = 5 ? { color: colors.sky[500] } : { color: '#000' }), + }} + transition={TRANSITION} + > + Sarah Dayan + + = 6 ? { color: colors.gray[700] } : { color: '#000' }), + }} + transition={TRANSITION} + > + Staff Engineer, Algolia + + + + + + +
    + } + right={ + + ({ ...state, char: charIndex + 1 })) + }, + async onGroupComplete(groupIndex) { + if (!mounted.current) return + setStep(groupIndex) + + if (groupIndex === 7) { + if (!supportsMd) return + await cursorControls.start({ opacity: 0.5, transition: { delay: 1 } }) + if (!mounted.current) return + setWide(true) + setIsMd(true) + await cursorControls.start({ opacity: 0, transition: { delay: 0.5 } }) + } + + if (!mounted.current) return + + if (ranges[groupIndex + 1] && ranges[groupIndex + 1].immediate) { + setState({ char: 0, group: groupIndex + 1 }) + } else { + window.setTimeout(() => { + if (!mounted.current) return + setState({ char: 0, group: groupIndex + 1 }) + }, GROUP_DELAY) + } + }, + }} + /> + + } + /> + ) +} + +function AnimatedToken({ isActiveToken, onComplete, children }) { + const [visible, setVisible] = useState(false) + + useEffect(() => { + if (visible) { + onComplete() + } + }, [visible]) + + useEffect(() => { + if (isActiveToken) { + let id = window.setTimeout(() => { + setVisible(true) + }, CHAR_DELAY) + return () => { + window.clearTimeout(id) + } + } + }, [isActiveToken]) + + return ( + <> + {children} + {isActiveToken && } + + ) +} + +function HeroToken({ currentChar, onCharComplete, currentGroup, onGroupComplete, ...props }) { + const { token } = props + + if (token[0].startsWith('char:')) { + const [, groupIndex, indexInGroup] = token[0].split(':').map((x) => parseInt(x, 10)) + + return ( + { + if (token[0].endsWith(':last')) { + onGroupComplete(groupIndex) + } else { + onCharComplete(indexInGroup) + } + }} + {...props} + /> + ) + } + + return +} + +function Layout({ left, right, pin = 'left' }) { + return ( +
    +
    +
    {right}
    +
    +
    +
    +
    {left}
    +
    +
    +
    + ) +} diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js new file mode 100644 index 000000000..38220231d --- /dev/null +++ b/src/components/.ZH/home/MobileFirst.js @@ -0,0 +1,336 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { motion, useTransform, useMotionValue } from 'framer-motion' +import { useEffect, useRef, useState } from 'react' +import iconUrl from '@/img/icons/home/mobile-first.png' +import { addClassTokens2 } from '@/utils/addClassTokens' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import { lines } from '../../pages/examples/mobile-first-demo' + +addClassTokens2(lines) + +const MIN_WIDTH = 400 + +function BrowserWindow({ size, onChange }) { + let x = useMotionValue(0) + let constraintsRef = useRef() + let handleRef = useRef() + let iframeRef = useRef() + let iframePointerEvents = useMotionValue('auto') + + useEffect(() => { + function onMessage(e) { + if (e.source === iframeRef.current.contentWindow) { + onChange(e.data) + } + } + + window.addEventListener('message', onMessage) + + return () => { + window.removeEventListener('message', onMessage) + } + }, []) + + useIsomorphicLayoutEffect(() => { + let observer = new window.ResizeObserver(() => { + let width = constraintsRef.current.offsetWidth - handleRef.current.offsetWidth + if (x.get() > width) { + x.set(width) + } + }) + observer.observe(constraintsRef.current) + return () => { + observer.disconnect() + } + }, []) + + useEffect(() => { + handleRef.current.onselectstart = () => false + }, []) + + return ( +
    + x + MIN_WIDTH) }} + > +
    +
    +
    +
    +
    +
    +
    + {size !== undefined && ( + <> + + + + + + + + )} +
    +
    +
    + + + + workcation.com +
    +
    + {size !== undefined && ( +
    + + + +
    + )} +
    +
    +
    + + + +
    Tailwind UI - Official Tailwind CSS Components
    +
    +
    + + + + +
    Workcation - Find a trip that suits you
    +
    +
    + + + + +
    + Headless UI – Unstyled, fully accessible UI components +
    +
    +
    +
    +
    + +
    +
    + +
    + { + document.documentElement.classList.add('dragging-ew') + iframePointerEvents.set('none') + }} + onDragEnd={() => { + document.documentElement.classList.remove('dragging-ew') + iframePointerEvents.set('auto') + }} + > +
    + +
    +
    + ) +} + +function Marker({ label, active, className }) { + return ( +
    +
    +
    +
    +
    +
    + {label} +
    +
    + ) +} + +export function MobileFirst() { + let [size, setSize] = useState() + + return ( +
    +
    + + + + Mobile-first + Responsive everything. + +

    + Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you + build responsive designs right in your HTML instead. +

    +

    + Throw a screen size in front of literally any utility class and watch it magically apply + at a specific breakpoint. +

    +     + + Learn more, responsive design + +
    +
    +
    + + + + + +
    +
    + +
    + +
    + + + {lines.map((tokens, lineIndex) => ( +
    + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'class') { + let isSm = token.content.startsWith('sm:') + let isMd = token.content.startsWith('md:') + let isLg = token.content.startsWith('lg:') + + if (isSm || isMd || isLg) { + let faded = + size === undefined || + (size === 'sm' && (isMd || isLg)) || + (size === 'md' && isLg) + let highlighted = + (size === 'sm' && isSm) || + (size === 'md' && isMd) || + (size === 'lg' && isLg) + + return ( + + {token.content} + + ) + } + } + return ( + + {token.content} + + ) + })} +
    + ))} +     +     + + } + /> +
    + ) +} diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js new file mode 100644 index 000000000..755f29d54 --- /dev/null +++ b/src/components/.ZH/home/ModernFeatures.js @@ -0,0 +1,251 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { Tabs } from '@/components/Tabs' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/modern-features.png' +import { Fragment, useState } from 'react' +import { AnimatePresence, motion } from 'framer-motion' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines as gridSample } from '../../samples/grid.html?highlight' +import { lines as transformsSample } from '../../samples/transforms.html?highlight' +import { lines as filtersSample } from '../../samples/filters.html?highlight' + +const lines = { + 'CSS Grid': gridSample, + Transforms: transformsSample, + Filters: filtersSample, +} + +const tabs = { + 'CSS Grid': (selected) => ( + <> + + + ), + Transforms: (selected) => ( + <> + + + ), + Filters: (selected) => ( + <> + + + + + ), +} + +function Block({ src, filter, ...props }) { + return ( + +
    + +
    +     + ) +} + +export function ModernFeatures() { + const [feature, setFeature] = useState('CSS Grid') + + const animate = (transforms, grid) => { + if (feature === 'Transforms') { + return { + animate: transforms, + } + } + return { + animate: grid, + } + } + + return ( +
    +
    + + + + Modern features + + Cutting-edge is our comfort zone. + + +

    + Tailwind is unapologetically modern, and takes advantage of all the latest and greatest + CSS features to make the developer experience as enjoyable as possible. +

    +

    + We've got first-class CSS grid support, composable transforms and gradients powered by + CSS variables, support for modern state selectors like{' '} + :focus-visible, and tons more. +

    +     + + Learn more, grid template columns + +
    + +
    +
    + +
    + + + + + + + +
    +
    + } + right={ + + + + + {lines[feature].map((tokens, lineIndex) => ( + + {tokens.map((token, tokenIndex) => { + if (token.types[token.types.length - 1] === 'attr-value') { + return ( + + {token.content.split(/\[([^\]]+)\]/).map((part, i) => + i % 2 === 0 ? ( + part + ) : ( + + {part} + + ) + )} + + ) + } + return ( + + {token.content} + + ) + })} + {'\n'} + + ))} + + + + + } + /> + + ) +} diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js new file mode 100644 index 000000000..e25367c51 --- /dev/null +++ b/src/components/.ZH/home/Performance.js @@ -0,0 +1,351 @@ +import { IconContainer, Caption, BigText, Paragraph, Link } from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import { TabBar } from '@/components/TabBar' +import iconUrl from '@/img/icons/home/performance.png' +import { Fragment, useCallback, useEffect, useRef, useState } from 'react' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines as html } from '../../samples/performance.html?highlight' +import { lines as css } from '../../samples/performance.txt?highlight=css' +import { useInView } from 'react-intersection-observer' +import { animate } from 'framer-motion' + +const START_DELAY = 500 +const CLASS_DELAY = 1000 +const CHAR_DELAY = 75 +const SAVE_DELAY = 50 +const BUILD_DELAY = 100 + +function Typing({ classes, rules, onStartedClass, onFinishedClass }) { + let [text, setText] = useState('') + + useEffect(() => { + let newText = classes.substr(0, text.length + 1) + let isSpace = newText.endsWith(' ') + let isEnd = text.length + 1 > classes.length + let isEndOfClass = isSpace || isEnd + if (isEndOfClass) { + onFinishedClass(newText.split(' ').filter(Boolean).length - 1) + } + let handle = window.setTimeout( + () => { + if (newText.endsWith(' ') || newText.length === 1) { + onStartedClass() + } + setText(newText) + }, + isSpace ? CLASS_DELAY : CHAR_DELAY + ) + return () => { + window.clearTimeout(handle) + } + }, [classes, text, onStartedClass, onFinishedClass]) + + return text.split(' ').map((cls, index) => ( + + {index !== 0 && ' '} + + {cls} + + + )) +} + +export function Performance() { + let [visibleRules, setVisibleRules] = useState([]) + let [saved, setSaved] = useState(true) + let [lastFinishedClass, setLastFinishedClass] = useState(-1) + let [active, setActive] = useState(false) + let scrollRef = useRef() + let { ref: typingRef, inView: typingInView } = useInView({ threshold: 1 }) + let { ref: containerRef, inView: containerInView } = useInView({ threshold: 0 }) + + useEffect(() => { + if (typingInView && !active) { + let handle = window.setTimeout(() => setActive(true), START_DELAY) + return () => { + window.clearTimeout(handle) + } + } + }, [active, typingInView]) + + useEffect(() => { + if (!containerInView && active) { + setActive(false) + setVisibleRules([]) + setSaved(true) + setLastFinishedClass(-1) + } + }, [active, containerInView]) + + let rules = [] + let chunk = [] + for (let line of css) { + chunk.push(line) + let empty = line.every(({ content }) => content.trim() === '') + if (empty) { + rules.push(chunk) + chunk = [] + } + } + + rules = rules.filter((_, i) => visibleRules.includes(i)) + + let onStartedClass = useCallback(() => { + setSaved(false) + }, []) + + useEffect(() => { + if (lastFinishedClass < 0) return + let handle1 = window.setTimeout(() => setSaved(true), SAVE_DELAY) + let handle2 = window.setTimeout( + () => + setVisibleRules( + [ + [0], + [0, 1], + [0, 1, 3], + [0, 1, 3, 4], + [0, 1, 3, 4, 5], + [0, 1, 2, 3, 4, 5], + [0, 1, 2, 3, 4, 5, 6], + ][lastFinishedClass] + ), + SAVE_DELAY + BUILD_DELAY + ) + return () => { + window.clearTimeout(handle1) + window.clearTimeout(handle2) + } + }, [lastFinishedClass]) + + return ( +
    +
    + + + + Performance + It's tiny — never ship unused CSS again. + + Tailwind automatically removes all unused CSS when building for production, which means + your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind + projects ship less than 10kB of CSS to the client. + + + Learn more, optimizing for production + +
    + +
    +
    + + + + + + + + + + + + + {html.map((tokens, lineIndex) => ( +
    +
    + {lineIndex + 1} +
    +
    + {tokens.map((token, tokenIndex) => { + if (token.content === '__CLASSES__') { + return ( + + {active && ( + + )} + + + ) + } + return ( + + {token.content} + + ) + })} +
    +
    + ))} +     +
    +
    + + + + + + + + + {rules.map((rule) => ( + content.trim()).content} + rule={rule} + scrollRef={scrollRef} + /> + ))} + +
    +
    +
    + + + + + + + + +
    +
    +
    + } + /> +
    + ) +} + +function Terminal({ rules }) { + let scrollRef = useRef() + + useEffect(() => { + let top = scrollRef.current.scrollHeight - scrollRef.current.offsetHeight + + if (CSS.supports('scroll-behavior', 'smooth')) { + scrollRef.current.scrollTo({ top }) + } else { + animate(scrollRef.current.scrollTop, top, { + onUpdate: (top) => scrollRef.current.scrollTo({ top }), + }) + } + }, [rules.length]) + + return ( +
    + + + + 
    +        
+          
    
+            npx tailwindcss -o
+            --output build.css --content index.html{' '}
+            -w --watch
+          
    
+          {rules.map((_rule, index) => (
+            
    
+              
+                Rebuilding... Done in {[5, 6, 5, 7, 4, 5][index % 6]}ms.
+              
+            
    
+          ))}
+            
+
    +
    + ) +} + +function Rule({ rule, scrollRef }) { + let ref = useRef() + + useEffect(() => { + let top = + ref.current.offsetTop - scrollRef.current.offsetHeight / 2 + ref.current.offsetHeight / 2 + + if (CSS.supports('scroll-behavior', 'smooth')) { + scrollRef.current.scrollTo({ top }) + } else { + animate(scrollRef.current.scrollTop, top, { + onUpdate: (top) => scrollRef.current.scrollTo({ top }), + }) + } + }, [scrollRef]) + + return ( +
    + {rule.map((tokens, lineIndex) => { + let contentIndex = tokens.findIndex(({ content }) => content.trim()) + if (contentIndex === -1) { + return '\n' + } + return ( + + {tokens.slice(0, contentIndex).map((token) => token.content)} + + {tokens.slice(contentIndex).map((token, tokenIndex) => { + return ( + + {token.content} + + ) + })} + + {'\n'} + + ) + })} +
    + ) +} diff --git a/src/components/.ZH/home/ReadyMadeComponents.js b/src/components/.ZH/home/ReadyMadeComponents.js new file mode 100644 index 000000000..9be87475f --- /dev/null +++ b/src/components/.ZH/home/ReadyMadeComponents.js @@ -0,0 +1,91 @@ +import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' +import iconUrl from '@/img/icons/home/ready-made-components.png' +import { useInView } from 'react-intersection-observer' +import { motion } from 'framer-motion' +import { GridLockup } from '../GridLockup' + +function AnimatedImage({ animate = false, delay = 0, ...props }) { + return ( + + ) +} + +const w = 1213 +const h = 675 + +const getStyle = (x, y, width) => ({ + top: `${(y / h) * 100}%`, + left: `${(x / w) * 100}%`, + width: `${(width / w) * 100}%`, +}) + +const images = [ + { src: require('@/img/tailwindui/0.png').default, x: 27, y: 24, width: 236 }, + { src: require('@/img/tailwindui/1.png').default, x: 287, y: 0, width: 567 }, + { src: require('@/img/tailwindui/2.png').default, x: 878, y: 47, width: 308 }, + { src: require('@/img/tailwindui/3.jpg').default, x: 0, y: 289, width: 472 }, + { src: require('@/img/tailwindui/4.jpg').default, x: 496, y: 289, width: 441 }, + { src: require('@/img/tailwindui/5.png').default, x: 961, y: 289, width: 252 }, +] + +export function ReadyMadeComponents() { + const { ref: inViewRef, inView } = useInView({ threshold: 0.5, triggerOnce: true }) + + return ( +
    +
    + + + + Ready-made components + + Move even faster with Tailwind UI. + + + Tailwind UI is a collection of beautiful, fully responsive UI components, designed and + developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples + to choose from, and is guaranteed to help you find the perfect starting point for what you + want to build. + + + Learn more + +
    + +
    +
    + {images.map(({ src, x, y, width }, index) => ( + + ))} +
    +
    +
    + } + /> + + ) +} diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js new file mode 100644 index 000000000..9dab162c5 --- /dev/null +++ b/src/components/.ZH/home/StateVariants.js @@ -0,0 +1,293 @@ +import { + IconContainer, + Caption, + BigText, + Paragraph, + Link, + Widont, + InlineCode, +} from '@/components/home/common' +import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' +import iconUrl from '@/img/icons/home/state-variants.png' +import { addClassTokens2 } from '@/utils/addClassTokens' +import { useEffect, useRef, useState } from 'react' +import { usePrevious } from '@/hooks/usePrevious' +import clsx from 'clsx' +import { GridLockup } from '../GridLockup' +import { lines } from '../../samples/state-variants.html?highlight' +import { animate } from 'framer-motion' + +const projects = [ + { title: 'API Integration', category: 'Engineering' }, + { title: 'New Benefits Plan', category: 'Human Resources' }, + { title: 'Onboarding Emails', category: 'Customer Success' }, +] + +const faces = [ + 'photo-1531123897727-8f129e1688ce', + 'photo-1494790108377-be9c29b29330', + 'photo-1552374196-c4e7ffc6e126', + 'photo-1546525848-3ce03ca516f6', + 'photo-1544005313-94ddf0286df2', + 'photo-1517841905240-472988babdf9', + 'photo-1506794778202-cad84cf45f1d', + 'photo-1500648767791-00dcc994a43e', + 'photo-1534528741775-53994a69daeb', + 'photo-1502685104226-ee32379fefbe', + 'photo-1546525848-3ce03ca516f6', + 'photo-1502685104226-ee32379fefbe', + 'photo-1494790108377-be9c29b29330', + 'photo-1506794778202-cad84cf45f1d', + 'photo-1534528741775-53994a69daeb', +] + +addClassTokens2(lines) + +const lineRanges = { + 'new-btn-hover': [4, 9], + 'input-focus': [15, 15], + 'item-hover': [20, 39], + 'new-hover': [42, 47], +} + +export function StateVariants() { + const [states, setStates] = useState([]) + const prevStates = usePrevious(states) + const codeContainerRef = useRef() + const linesContainerRef = useRef() + + function scrollTo(rangeOrRanges) { + let ranges = Array.isArray(rangeOrRanges) ? rangeOrRanges : [rangeOrRanges] + if (ranges.length === 0) return + let linesSorted = ranges.flat().sort((a, b) => a - b) + let minLine = linesSorted[0] + let maxLine = linesSorted[linesSorted.length - 1] + let $lines = linesContainerRef.current.children + let containerHeight = codeContainerRef.current.offsetHeight + let top = $lines[minLine].offsetTop + let height = $lines[maxLine].offsetTop + $lines[maxLine].offsetHeight - top + + top = top - containerHeight / 2 + height / 2 + + if (CSS.supports('scroll-behavior', 'smooth')) { + codeContainerRef.current.scrollTo({ top }) + } else { + animate(codeContainerRef.current.scrollTop, top, { + onUpdate: (top) => codeContainerRef.current.scrollTo({ top }), + }) + } + } + + useEffect(() => { + if (prevStates && prevStates.length > states.length) { + scrollTo(states.map((state) => lineRanges[state])) + } else if (states.length) { + scrollTo(lineRanges[states[states.length - 1]]) + } + }, [states, prevStates]) + + return ( +
    +
    + + + + State variants + + Hover and focus states? We got ’em. + + + Want to style something on hover? Stick hover: at the beginning + of the class you want to add. Works for focus,{' '} + active, disabled,{' '} + focus-within, focus-visible, and even + fancy states we invented ourselves like group-hover. + + + Learn more, handling hover, focus, and other states + +
    + +
    +
    +
    +

    Projects

    +
    { + setStates((states) => [...states, 'new-btn-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'new-btn-hover')) + }} + > + + + + New +
    +
    +
    + + + + { + setStates((states) => [...states, 'input-focus']) + }} + onBlur={() => { + setStates((states) => states.filter((x) => x !== 'input-focus')) + // resetScroll() + }} + type="text" + aria-label="Filter projects" + placeholder="Filter projects..." + className="w-full text-sm leading-6 text-gray-900 placeholder-gray-400 rounded-md py-2 pl-10 ring-1 ring-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" + /> +
    +
    +
      + {projects.map((project, i, a) => ( +
    • { + setStates((states) => [...states, 'item-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'item-hover')) + }} + > +
      +
      +
      Title
      +
      + {project.title} +
      +
      +
      +
      Category
      +
      {project.category}
      +
      +
      +
      Users
      +
      + {Array.from({ length: 5 }).map((_, j) => ( + + ))} +
      +
      +
      +
      • + ))} +
    • +
      { + setStates((states) => [...states, 'new-hover']) + }} + onMouseLeave={() => { + setStates((states) => states.filter((x) => x !== 'new-hover')) + }} + > + + + + New project +
      +
      • +
    +
    +
    + } + right={ + + +
    0 })} + > + {lines.map((tokens, lineIndex) => ( +
    = lineRanges['new-btn-hover'][0] && + lineIndex <= lineRanges['new-btn-hover'][1]) || + (states.includes('input-focus') && + lineIndex >= lineRanges['input-focus'][0] && + lineIndex <= lineRanges['input-focus'][1]) || + (states.includes('item-hover') && + lineIndex >= lineRanges['item-hover'][0] && + lineIndex <= lineRanges['item-hover'][1]) || + (states.includes('new-hover') && + lineIndex >= lineRanges['new-hover'][0] && + lineIndex <= lineRanges['new-hover'][1]) + ? 'not-mono' + : '' + } + > + {tokens.map((token, tokenIndex) => { + if ( + token.types[token.types.length - 1] === 'class' && + token.content.startsWith('(') + ) { + const [, state] = token.content.match(/^\(([^)]+)\)/) + return ( + + {token.content.substr(token.content.indexOf(')') + 1)} + + ) + } + return ( + + {token.content} + + ) + })} +
    + ))} +
    +     +     + } + /> + + ) +} diff --git a/src/components/.ZH/home/common.js b/src/components/.ZH/home/common.js new file mode 100644 index 000000000..931f835c7 --- /dev/null +++ b/src/components/.ZH/home/common.js @@ -0,0 +1,135 @@ +import clsx from 'clsx' +import { Button } from '../Button' + +export function IconContainer({ as: Component = 'div', color, className = '', ...props }) { + return ( + + ) +} + +export function Caption({ className = '', ...props }) { + return

    +} + +export function BigText({ className = '', ...props }) { + return ( +

    + ) +} + +export function Paragraph({ as: Component = 'p', className = '', ...props }) { + return +} + +export function Link({ className, ...props }) { + return

    + } + {...props} + > + + {children} + + + ) +} + +export function ContentsLayout({ children, meta, classes, tableOfContents, section }) { + const router = useRouter() + const toc = [ + ...(classes ? [{ title: 'Quick reference', slug: 'class-reference', children: [] }] : []), + ...tableOfContents, + ] + + const { currentSection, registerHeading, unregisterHeading } = useTableOfContents(toc) + let { prev, next } = usePrevNext() + + return ( +
    + + + {classes ? ( + <> + +
    + {children} +
    + + ) : ( +
    + {children} +
    + )} +     + + + +
    + {toc.length > 0 && ( + + )} +
    +
    + ) +} diff --git a/src/layouts/.ZH/DocumentationLayout.js b/src/layouts/.ZH/DocumentationLayout.js new file mode 100644 index 000000000..73022b005 --- /dev/null +++ b/src/layouts/.ZH/DocumentationLayout.js @@ -0,0 +1,29 @@ +import { SidebarLayout } from '@/layouts/.ZH/SidebarLayout' +import Head from 'next/head' +import { useRouter } from 'next/router' +import socialSquare from '@/img/social-square.jpg' +import { Title } from '@/components/Title' +import { documentationNav } from '@/navs/.ZH/documentation' + +export function DocumentationLayout(props) { + let router = useRouter() + + return ( + <> + + {props.layoutProps.meta.metaTitle || props.layoutProps.meta.title} + + + + + + + + ) +} + +DocumentationLayout.nav = documentationNav diff --git a/src/layouts/.ZH/InstallationLayout.js b/src/layouts/.ZH/InstallationLayout.js new file mode 100644 index 000000000..817dbc2f0 --- /dev/null +++ b/src/layouts/.ZH/InstallationLayout.js @@ -0,0 +1,156 @@ +import { BasicLayout } from '@/layouts/BasicLayout' +import clsx from 'clsx' +import { useRouter } from 'next/router' +import Link from 'next/link' +import { IconContainer } from '@/components/home/common' + +let tabs = { + 'Tailwind CLI': '/docs/installation', + 'Using PostCSS': '/docs/installation/using-postcss', + 'Framework Guides': '/docs/installation/framework-guides', + 'Play CDN': '/docs/installation/play-cdn', +} + +let readNext = [ + { + title: 'Utility-First Fundamentals', + href: '/docs/utility-first', + body: () => ( +

    + Using a utility-first workflow to build complex components from a constrained set of + primitive utilities. +

    + ), + image: require('@/img/icons/home/utility-first.png').default, + }, + { + title: 'Responsive Design', + href: '/docs/responsive-design', + body: () => ( +

    + Build fully responsive user interfaces that adapt to any screen size using responsive + modifiers. +

    + ), + image: require('@/img/icons/home/mobile-first.png').default, + }, + { + title: 'Hover, Focus & Other States', + href: '/docs/hover-focus-and-other-states', + body: () => ( +

    + Style elements in interactive states like hover, focus, and more using conditional + modifiers. +

    + ), + image: require('@/img/icons/home/state-variants.png').default, + }, + { + title: 'Dark Mode', + href: '/docs/dark-mode', + body: () => ( +

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    + ), + image: require('@/img/icons/home/dark-mode.png').default, + }, + { + title: 'Reusing Styles', + href: '/docs/reusing-styles', + body: () => ( +

    + Manage duplication and keep your projects maintainable by creating reusable abstractions. +

    + ), + image: require('@/img/icons/home/component-driven.png').default, + }, + { + title: 'Customizing the Framework', + href: '/docs/adding-custom-styles', + body: () => ( +

    Customize the framework to match your brand and extend it with your own custom styles.

    + ), + image: require('@/img/icons/home/customization.png').default, + }, +] + +export function InstallationLayout({ children }) { + let router = useRouter() + + return ( + +
    +
    +

    安裝

    +

    + Get started with Tailwind CSS +

    +

    + Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any + other templates for class names, generating the corresponding styles and then writing + them to a static CSS file. +

    +

    + It's fast, flexible, and reliable — with zero-runtime. +

    +
    +
    +
    +
    +

    Installation

    +
    +
    +
      + {Object.entries(tabs).map(([name, href]) => ( +
    • + + + {name} + + +
      • + ))} +
    +
    +
    +
    + {children} +
    + +
    +

    What to read next

    +
    +

    + Get familiar with some of the core concepts that make Tailwind CSS different from + writing traditional CSS. +

    +
    +
      + {readNext.map((item) => ( +
    • + + + +
      +

      + + {item.title} + +

      +
      + +
      +
      +
      • + ))} +
    +
    +     + ) +} diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js new file mode 100644 index 000000000..9a45861db --- /dev/null +++ b/src/layouts/.ZH/SidebarLayout.js @@ -0,0 +1,425 @@ +import Link from 'next/link' +import { useRouter } from 'next/router' +import { createContext, forwardRef, useRef } from 'react' +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import clsx from 'clsx' +import { SearchButton } from '@/components/.ZH/Search' +import { Dialog } from '@headlessui/react' + +export const SidebarContext = createContext() + +const NavItem = forwardRef(({ href, children, isActive, isPublished, fallbackHref }, ref) => { + return ( +
  • + + + {children} + + +
    • + ) +}) + +/** + * Find the nearst scrollable ancestor (or self if scrollable) + * + * Code adapted and simplified from the smoothscroll polyfill + * + * + * @param {Element} el + */ +function nearestScrollableContainer(el) { + /** + * indicates if an element can be scrolled + * + * @param {Node} el + */ + function isScrollable(el) { + const style = window.getComputedStyle(el) + const overflowX = style['overflowX'] + const overflowY = style['overflowY'] + const canScrollY = el.clientHeight < el.scrollHeight + const canScrollX = el.clientWidth < el.scrollWidth + + const isScrollableY = canScrollY && (overflowY === 'auto' || overflowY === 'scroll') + const isScrollableX = canScrollX && (overflowX === 'auto' || overflowX === 'scroll') + + return isScrollableY || isScrollableX + } + + while (el !== document.body && isScrollable(el) === false) { + el = el.parentNode || el.host + } + + return el +} + +function Nav({ nav, children, fallbackHref }) { + const router = useRouter() + const activeItemRef = useRef() + const previousActiveItemRef = useRef() + const scrollRef = useRef() + + useIsomorphicLayoutEffect(() => { + function updatePreviousRef() { + previousActiveItemRef.current = activeItemRef.current + } + + if (activeItemRef.current) { + if (activeItemRef.current === previousActiveItemRef.current) { + updatePreviousRef() + return + } + + updatePreviousRef() + + const scrollable = nearestScrollableContainer(scrollRef.current) + + const scrollRect = scrollable.getBoundingClientRect() + const activeItemRect = activeItemRef.current.getBoundingClientRect() + + const top = activeItemRef.current.offsetTop + const bottom = top - scrollRect.height + activeItemRect.height + + if (scrollable.scrollTop > top || scrollable.scrollTop < bottom) { + scrollable.scrollTop = top - scrollRect.height / 2 + activeItemRect.height / 2 + } + } + }, [router.pathname]) + + return ( + + ) +} + +const TopLevelAnchor = forwardRef( + ({ children, href, className, icon, isActive, onClick, shadow }, ref) => { + return ( +
  • + +
    + + {icon} + +
    + {children} +     +
    • + ) + } +) + +function TopLevelLink({ href, as, ...props }) { + if (/^https?:\/\//.test(href)) { + return + } + + return ( + + + + ) +} + +function TopLevelNav() { + let { pathname } = useRouter() + + return ( + <> + + + + + } + > + {/* Documentation */} + 技術文件 + + + + + + + } + > + {/* Components */} + 元件庫 + + + + + + } + > + {/* Screencasts */} + 教學影片 + + + + + + + } + > + {/* Playground */} + 遊樂場 + + + + + + + } + > + {/* Resources */} + 資源 + + + + + + + + } + > + {/* Community */} + 社群 + + + ) +} + +function Wrapper({ allowOverflow, children }) { + return
    {children}
    +} + +export function SidebarLayout({ + children, + navIsOpen, + setNavIsOpen, + nav, + sidebar, + fallbackHref, + layoutProps: { allowOverflow = true } = {}, +}) { + return ( + + +
    +
    + +
    +
    {children}
    +
    +     + setNavIsOpen(false)} + className="fixed z-50 inset-0 overflow-y-auto lg:hidden" + > + +
    + + +
    +     +     + ) +} From f878ed49dc0a044bd8dda6db3fc826aa3df8bdc1 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:31:59 +0800 Subject: [PATCH 23/48] backup to .EN --- src/pages/.EN/_app.EN.js | 115 ++++++++++++ src/pages/.EN/brand.mdx | 55 ++++++ src/pages/.EN/index.EN.js | 194 ++++++++++++++++++++ src/pages/.EN/resources.js | 358 +++++++++++++++++++++++++++++++++++++ 4 files changed, 722 insertions(+) create mode 100644 src/pages/.EN/_app.EN.js create mode 100644 src/pages/.EN/brand.mdx create mode 100644 src/pages/.EN/index.EN.js create mode 100644 src/pages/.EN/resources.js diff --git a/src/pages/.EN/_app.EN.js b/src/pages/.EN/_app.EN.js new file mode 100644 index 000000000..891ff6890 --- /dev/null +++ b/src/pages/.EN/_app.EN.js @@ -0,0 +1,115 @@ +import '../css/fonts.css' +import '../css/main.css' +import 'focus-visible' +import { useState, useEffect, Fragment } from 'react' +import { Header } from '@/components/Header' +import { Title } from '@/components/Title' +import Router from 'next/router' +import ProgressBar from '@badrap/bar-of-progress' +import Head from 'next/head' +import socialCardLarge from '@/img/social-card-large.jpg' +import { ResizeObserver } from '@juggle/resize-observer' +import 'intersection-observer' +import { SearchProvider } from '@/components/Search' + +if (typeof window !== 'undefined' && !('ResizeObserver' in window)) { + window.ResizeObserver = ResizeObserver +} + +const progress = new ProgressBar({ + size: 2, + color: '#38bdf8', + className: 'bar-of-progress', + delay: 100, +}) + +// this fixes safari jumping to the bottom of the page +// when closing the search modal using the `esc` key +if (typeof window !== 'undefined') { + progress.start() + progress.finish() +} + +Router.events.on('routeChangeStart', () => progress.start()) +Router.events.on('routeChangeComplete', () => progress.finish()) +Router.events.on('routeChangeError', () => progress.finish()) + +export default function App({ Component, pageProps, router }) { + let [navIsOpen, setNavIsOpen] = useState(false) + + useEffect(() => { + if (!navIsOpen) return + function handleRouteChange() { + setNavIsOpen(false) + } + Router.events.on('routeChangeComplete', handleRouteChange) + return () => { + Router.events.off('routeChangeComplete', handleRouteChange) + } + }, [navIsOpen]) + + const Layout = Component.layoutProps?.Layout || Fragment + const layoutProps = Component.layoutProps?.Layout + ? { layoutProps: Component.layoutProps, navIsOpen, setNavIsOpen } + : {} + const showHeader = router.pathname !== '/' + const meta = Component.layoutProps?.meta || {} + const description = + meta.metaDescription || meta.description || 'Documentation for the Tailwind CSS framework.' + + if (router.pathname.startsWith('/examples/')) { + return + } + + let section = + meta.section || + Object.entries(Component.layoutProps?.Layout?.nav ?? {}).find(([, items]) => + items.find(({ href }) => href === router.pathname) + )?.[0] + + return ( + <> + {meta.metaTitle || meta.title} + + + + + + + + + + + + + + + + {showHeader && ( +
    setNavIsOpen(isOpen)} + title={meta.title} + section={section} + /> + )} + + + + + + ) +} diff --git a/src/pages/.EN/brand.mdx b/src/pages/.EN/brand.mdx new file mode 100644 index 000000000..8bc54c824 --- /dev/null +++ b/src/pages/.EN/brand.mdx @@ -0,0 +1,55 @@ +--- +title: "Brand" +description: "Tailwind CSS brand assets and usage guidelines." +--- + +export const Layout = require('@/layouts/DocumentationLayout').DocumentationLayout +export default require('@/layouts/ContentsLayout').ContentsLayout + +## Trademark Usage Agreement + +The Tailwind name and logos are trademarks of Tailwind Labs Inc. + +You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc. Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted. + +This includes naming a product or service in a way that emphasizes the Tailwind brand, like "Tailwind Themes" or "Tailwind Studio", as well as in domain names like "tailwindkits.com". + +Instead, you must use your own brand name in a way that clearly distinguishes it from Tailwind CSS. Examples that are permitted include "ComponentStudio for Tailwind CSS" or "UtilityThemes: Templates for Tailwind CSS". + +Additionally, you may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent. + +--- + +## Assets + +These assets are provided for use in situations like articles and video tutorials. They should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc. + +### Mark + + + +Download mark + +### Logotype + + + +Download logotype diff --git a/src/pages/.EN/index.EN.js b/src/pages/.EN/index.EN.js new file mode 100644 index 000000000..581d0a7af --- /dev/null +++ b/src/pages/.EN/index.EN.js @@ -0,0 +1,194 @@ +import { Testimonials } from '@/components/Testimonials' +import { DarkMode } from '@/components/home/DarkMode' +import { ConstraintBased } from '@/components/home/ConstraintBased' +import { BuildAnything } from '@/components/home/BuildAnything' +import { Performance } from '@/components/home/Performance' +import { MobileFirst } from '@/components/home/MobileFirst' +import { StateVariants } from '@/components/home/StateVariants' +import { ComponentDriven } from '@/components/home/ComponentDriven' +import { Customization } from '@/components/home/Customization' +import { ModernFeatures } from '@/components/home/ModernFeatures' +import { EditorTools } from '@/components/home/EditorTools' +import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' +import { SearchButton } from '@/components/Search' +import { Hero } from '@/components/home/Hero' +import { Logo } from '@/components/Logo' +import { Footer } from '@/components/home/Footer' +import NextLink from 'next/link' +import Head from 'next/head' +import { NavItems, NavPopover } from '@/components/Header' + +function Header() { + return ( +
    +
    +
    + +
    +
    +
    + +
    + + Search + + +
    + +
    + +
    +
    +
    +

    + Rapidly build modern websites without ever leaving your HTML. +

    +

    + A utility-first CSS framework packed with classes like{' '} + flex,{' '} + pt-4,{' '} + text-center and{' '} + rotate-90 that can be + composed to build any design, directly in your markup. +

    +
    + + + Get started + + + + {({ actionKey }) => ( + <> + + Quick search... + {actionKey && ( + + + {actionKey[0]} + {' '} + K + + )} + + )} + +
    +
    +
    + +
    + ) +} + +export default function Home() { + return ( + <> + + + + Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. + +
    +
    +
    +

    + “Best practices” don’t actually work. +

    +
    +
    +

    + I’ve written{' '} + + a few thousand words + {' '} + on why traditional “semantic class names” are the reason CSS is hard to maintain, + but the truth is you’re never going to believe me until you actually try it. If you + can suppress the urge to retch long enough to give it a chance, I really think + you’ll wonder how you ever worked with CSS any other way. +

    +
    +
    + +
    +
    Adam Wathan
    +
    Creator of Tailwind CSS
    +
    +
    +
    +
    +
    + +
    + + + + + + + + + + + +
    +
    + + ) +} diff --git a/src/pages/.EN/resources.js b/src/pages/.EN/resources.js new file mode 100644 index 000000000..7b85c4153 --- /dev/null +++ b/src/pages/.EN/resources.js @@ -0,0 +1,358 @@ +import { DocumentationLayout } from '@/layouts/DocumentationLayout' +import { Button } from '@/components/Button' +import clsx from 'clsx' +import { BasicLayout } from '@/layouts/BasicLayout' +import { ReactComponent as DiscordIcon } from '@/img/icons/discord.svg' +import { ReactComponent as GitHubIcon } from '@/img/icons/github.svg' + +function CardGroup({ children, className }) { + return ( +
      + {children} +
    + ) +} + +function Card({ title, superTitle, href, color, body, image, button }) { + return ( +
  • +
    +

    + {button ? ( + <> + {superTitle} + {title} + + ) : ( + + {superTitle} + {title} + + )} +

    +
    {body}
    + {button && ( + + )} +
    + +
    • + ) +} + +function Icon({ children, className }) { + return ( +
    +
    {children}
    +
    + ) +} + +export default function Resources() { + return ( + +
    +

    Resources

    +

    + Everything else you need to build awesome Tailwind CSS websites +

    +

    + We think Tailwind is an amazing CSS framework, but you need more than just a CSS framework + to produce visually awesome work. +

    +
    + +
    +
    +

    + Design resources +

    +
    +

    + Design is hard so we made a few resources to help you with it. These resources are a + great way to help you with your designs and a great way to support the development of + the framework. +

    +
    + +
      + {[ + { + title: 'Refactoring UI', + description: 'Learn UI Design', + images: [ + require('@/img/resources/refactoringui-small@75.jpg').default, + require('@/img/resources/refactoringui@75.jpg').default, + ], + color: 'text-blue-500', + href: 'https://refactoringui.com', + body: ( + <> +

      + Refactoring UI is a design-for-developers book + video series put together by + Adam Wathan and Steve Schoger. It covers literally everything we know about + making things look awesome. +

      +

      + Almost 10,000 people have picked it up so far and have all sorts of awesome + things to say about how it helped them improve their work. +

      + + ), + }, + { + title: 'Tailwind UI', + description: 'Beautiful UI components, crafted by the creators of Tailwind CSS', + images: [ + require('@/img/resources/tailwindui-small@75.jpg').default, + require('@/img/resources/tailwindui@75.jpg').default, + ], + color: 'text-sky-500', + href: 'https://tailwindui.com', + body: ( + <> +

      + Tailwind UI is a collection of professionally designed, pre-built, fully + responsive HTML snippets you can drop into your Tailwind projects. +

      +

      + There are currently over 550 components available in three different + categories (Marketing, Application UI and E-commerce) and we’re always adding + more. +

      + + ), + }, + ].map(({ title, description, images, color, body, href }) => ( +
    • +
      +

      {title}

      +

      + {description} +

      +
      {body}
      + +
      +
      +
      + + + + +
      +
      +
      • + ))} +
    +
    + +
    +

    + Additional resources +

    +
    +

    + Tailwind isn’t the only open-source project we maintain. We’ve made a few other + resources to help you with your design and development workflow. +

    +
    + + + {[ + { + superTitle: 'Headless UI', + title: 'Completely unstyled, fully accessible UI components', + body: ( +

    + Completely unstyled, fully accessible UI components, designed to integrate + beautifully with Tailwind CSS. +

    + ), + href: 'https://headlessui.dev', + image: require('@/img/resources/headlessui@75.jpg').default, + color: 'text-indigo-500', + }, + { + superTitle: 'Heroicons', + title: 'Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.', + body: ( +

    + A set of 450+ free MIT-licensed SVG icons. Available as basic SVG icons and via + first-party React and Vue libraries. +

    + ), + href: 'https://heroicons.com', + image: require('@/img/resources/heroicons@75.jpg').default, + color: 'text-purple-500', + }, + { + superTitle: 'Hero Patterns', + title: 'Seamless SVG background patterns by the makers of Tailwind CSS.', + body: ( +

    + A collection of over 100 free MIT-licensed high-quality SVG patterns for you to + use in your web projects. +

    + ), + href: 'https://heropatterns.com', + image: require('@/img/resources/heropatterns@75.jpg').default, + color: 'text-cyan-500', + }, + ].map((card) => ( + + Learn more, {card.title} + + } + {...card} + /> + ))} +     +
    + +
    +

    Screencasts

    +
    +

    + Head over to our official YouTube channel and dive into dozens of videos that will + teach you everything from Tailwind basics to advanced concepts. +

    +
    + + + {[ + { + superTitle: 'Fundamentals', + title: 'Translating a Custom Design System to Tailwind CSS', + body: ( +

    + Learn how to configure Tailwind to create your own utility framework tuned + specifically for your project. +

    + ), + href: 'https://www.youtube.com/watch?v=cZc4Jn5nK3k', + image: require('@/img/resources/translating-design-system@75.jpg').default, + color: 'text-sky-500', + }, + { + superTitle: 'Fundamentals', + title: 'Adding Tailwind CSS to an Existing Project', + body: ( +

    + Learn how to add Tailwind CSS to an existing project without running into naming + collisions or specificity issues. +

    + ), + href: 'https://www.youtube.com/watch?v=oG6XPy1t1KA', + image: require('@/img/resources/existing-project@75.jpg').default, + color: 'text-pink-500', + }, + { + superTitle: 'How we’d build it', + title: + 'Building a Headless Ecommerce Store with Tailwind CSS, Shopify, and Next.js', + body: ( +

    + Fetch products from a Shopify store using the GraphQL API and assemble the pages + using Tailwind UI. +

    + ), + href: 'https://www.youtube.com/watch?v=xNMYz74zNHM', + image: require('@/img/resources/ecommerce-store@75.jpg').default, + color: 'text-indigo-500', + }, + ].map((card) => ( + + ))} +     + + +
    + +
    +

    + Connect and contribute +

    +
    +

    + Whether you're a beginner or an advanced user, getting involved in the Tailwind + community is a great way to connect with like-minded folks who are building awesome + things with the framework. +

    +
    + +
      + {[ + { + title: 'Discord', + href: '/discord', + description: + 'Join over 10,000 members on the Discord group to chat about Tailwind and other related topics.', + icon: ( + + + + ), + }, + { + title: 'GitHub Discussions', + href: 'https://github.com/tailwindlabs/tailwindcss/discussions', + description: + 'Have an issue with your project? Connect with other members of the Tailwind community to get some assistance.', + icon: ( + + + + ), + }, + ].map(({ title, href, description, icon }) => ( +
    • +
      +

      + + {title} + +

      +

      {description}

      +
      +
      + {icon} +
      +
      • + ))} +
    +
    +
    +     + ) +} + +Resources.layoutProps = { + meta: { + title: 'Resources', + }, + Layout: DocumentationLayout, +} From be9857583505f38a9e0a5eba3bf919b7ab67156c Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:32:16 +0800 Subject: [PATCH 24/48] copy to navs/.ZH --- src/navs/.ZH/documentation.js | 247 ++++++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 src/navs/.ZH/documentation.js diff --git a/src/navs/.ZH/documentation.js b/src/navs/.ZH/documentation.js new file mode 100644 index 000000000..6e1f8f44a --- /dev/null +++ b/src/navs/.ZH/documentation.js @@ -0,0 +1,247 @@ +import { createPageList } from '@/utils/createPageList' + +const pages = createPageList( + require.context(`../../pages/docs/.ZH/?meta=title,shortTitle,published`, false, /\.mdx$/), + 'docs' +) + +// const pages_of_installation = createPageList( +// require.context(`../../pages/docs/.ZH/installation/?meta=title,shortTitle,published`, false, /\.js$/), +// 'docs/installation' +// ) + +export const documentationNav = { + '起手式': [ + { + title: '安裝', + // href: '/docs/installation', + href: '/docs/.ZH/installation', + match: /^\/docs\/installation/, + }, + // pages_of_installation['index'], + // TODO: Add these pages + // pages['tailwind-cli'], + // { title: 'Play CDN', href: '#' }, + pages['editor-setup'], + pages['using-with-preprocessors'], + pages['optimizing-for-production'], + pages['browser-support'], + pages['upgrade-guide'], + ], + '核心概念': [ + pages['utility-first'], + // TODO: Maybe write this page + // pages['writing-your-html'], + pages['hover-focus-and-other-states'], + pages['responsive-design'], + pages['dark-mode'], + pages['reusing-styles'], + pages['adding-custom-styles'], + pages['functions-and-directives'], + ], + '客製化': [ + pages['configuration'], + pages['content-configuration'], + // TODO: Remove + redirect to v2 + // pages['just-in-time-mode'], + pages['theme'], + pages['screens'], + pages['customizing-colors'], + pages['customizing-spacing'], + // TODO: Redirect to v2 + // pages['configuring-variants'], + pages['plugins'], + pages['presets'], + ], + '基礎樣式': [pages['preflight']], + '排版': [ + pages['aspect-ratio'], + pages['container'], + pages['columns'], + pages['break-after'], + pages['break-before'], + pages['break-inside'], + pages['box-decoration-break'], + pages['box-sizing'], + pages['display'], + pages['float'], + pages['clear'], + pages['isolation'], + pages['object-fit'], + pages['object-position'], + pages['overflow'], + pages['overscroll-behavior'], + pages['position'], + pages['top-right-bottom-left'], + pages['visibility'], + pages['z-index'], + ], + 'Flexbox & Grid': [ + pages['flex-basis'], + pages['flex-direction'], + pages['flex-wrap'], + pages['flex'], + pages['flex-grow'], + pages['flex-shrink'], + pages['order'], + pages['grid-template-columns'], + pages['grid-column'], + pages['grid-template-rows'], + pages['grid-row'], + pages['grid-auto-flow'], + pages['grid-auto-columns'], + pages['grid-auto-rows'], + pages['gap'], + pages['justify-content'], + pages['justify-items'], + pages['justify-self'], + pages['align-content'], + pages['align-items'], + pages['align-self'], + pages['place-content'], + pages['place-items'], + pages['place-self'], + ], + Spacing: [pages['padding'], pages['margin'], pages['space']], + Sizing: [ + pages['width'], + pages['min-width'], + pages['max-width'], + pages['height'], + pages['min-height'], + pages['max-height'], + ], + Typography: [ + pages['font-family'], + pages['font-size'], + pages['font-smoothing'], + pages['font-style'], + pages['font-weight'], + pages['font-variant-numeric'], + pages['letter-spacing'], + pages['line-height'], + pages['list-style-type'], + pages['list-style-position'], + pages['text-align'], + pages['text-color'], + pages['text-decoration'], + pages['text-decoration-color'], + pages['text-decoration-style'], + pages['text-decoration-thickness'], + pages['text-underline-offset'], + pages['text-transform'], + pages['text-overflow'], + pages['text-indent'], + pages['vertical-align'], + pages['whitespace'], + pages['word-break'], + pages['content'], + ], + Backgrounds: [ + pages['background-attachment'], + pages['background-clip'], + pages['background-color'], + pages['background-origin'], + pages['background-position'], + pages['background-repeat'], + pages['background-size'], + pages['background-image'], + pages['gradient-color-stops'], + ], + Borders: [ + pages['border-radius'], + pages['border-width'], + pages['border-color'], + pages['border-style'], + pages['divide-width'], + pages['divide-color'], + pages['divide-style'], + pages['outline-width'], + pages['outline-color'], + pages['outline-style'], + pages['outline-offset'], + pages['ring-width'], + pages['ring-color'], + pages['ring-offset-width'], + pages['ring-offset-color'], + ], + Effects: [ + pages['box-shadow'], + pages['box-shadow-color'], + pages['opacity'], + pages['mix-blend-mode'], + pages['background-blend-mode'], + ], + Filters: [ + pages['blur'], + pages['brightness'], + pages['contrast'], + pages['drop-shadow'], + pages['grayscale'], + pages['hue-rotate'], + pages['invert'], + pages['saturate'], + pages['sepia'], + pages['backdrop-blur'], + pages['backdrop-brightness'], + pages['backdrop-contrast'], + pages['backdrop-grayscale'], + pages['backdrop-hue-rotate'], + pages['backdrop-invert'], + pages['backdrop-opacity'], + pages['backdrop-saturate'], + pages['backdrop-sepia'], + ], + Tables: [pages['border-collapse'], pages['table-layout']], + 'Transitions & Animation': [ + pages['transition-property'], + pages['transition-duration'], + pages['transition-timing-function'], + pages['transition-delay'], + pages['animation'], + ], + Transforms: [ + pages['scale'], + pages['rotate'], + pages['translate'], + pages['skew'], + pages['transform-origin'], + ], + Interactivity: [ + pages['accent-color'], + pages['appearance'], + pages['cursor'], + pages['caret-color'], + pages['pointer-events'], + pages['resize'], + pages['scroll-behavior'], + pages['scroll-margin'], + pages['scroll-padding'], + pages['scroll-snap-align'], + pages['scroll-snap-stop'], + pages['scroll-snap-type'], + pages['touch-action'], + pages['user-select'], + pages['will-change'], + ], + SVG: [pages['fill'], pages['stroke'], pages['stroke-width']], + Accessibility: [pages['screen-readers']], + 'Official Plugins': [ + { + title: 'Typography', + href: 'https://github.com/tailwindlabs/tailwindcss-typography', + }, + { + title: 'Forms', + href: 'https://github.com/tailwindlabs/tailwindcss-forms', + }, + { + title: 'Aspect Ratio', + href: 'https://github.com/tailwindlabs/tailwindcss-aspect-ratio', + }, + { + title: 'Line Clamp', + href: 'https://github.com/tailwindlabs/tailwindcss-line-clamp', + }, + ], +} From b07e2cb0de1c46a20114fed06ef462bbdecfda00 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 04:33:35 +0800 Subject: [PATCH 25/48] translate and re-import from .ZH --- src/pages/_app.js | 6 ++-- src/pages/brand.mdx | 4 +-- src/pages/index.js | 70 +++++++++++++++++++++++++++++++----------- src/pages/resources.js | 2 +- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/pages/_app.js b/src/pages/_app.js index 891ff6890..a5550204c 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -2,7 +2,8 @@ import '../css/fonts.css' import '../css/main.css' import 'focus-visible' import { useState, useEffect, Fragment } from 'react' -import { Header } from '@/components/Header' +// import { Header } from '@/components/Header' +import { Header } from '@/components/.ZH/Header' import { Title } from '@/components/Title' import Router from 'next/router' import ProgressBar from '@badrap/bar-of-progress' @@ -10,7 +11,8 @@ import Head from 'next/head' import socialCardLarge from '@/img/social-card-large.jpg' import { ResizeObserver } from '@juggle/resize-observer' import 'intersection-observer' -import { SearchProvider } from '@/components/Search' +// import { SearchProvider } from '@/components/Search' +import { SearchProvider } from '@/components/.ZH/Search' if (typeof window !== 'undefined' && !('ResizeObserver' in window)) { window.ResizeObserver = ResizeObserver diff --git a/src/pages/brand.mdx b/src/pages/brand.mdx index 8bc54c824..efa819570 100644 --- a/src/pages/brand.mdx +++ b/src/pages/brand.mdx @@ -3,8 +3,8 @@ title: "Brand" description: "Tailwind CSS brand assets and usage guidelines." --- -export const Layout = require('@/layouts/DocumentationLayout').DocumentationLayout -export default require('@/layouts/ContentsLayout').ContentsLayout +export const Layout = require('@/layouts/.ZH/DocumentationLayout').DocumentationLayout +export default require('@/layouts/.ZH/ContentsLayout').ContentsLayout ## Trademark Usage Agreement diff --git a/src/pages/index.js b/src/pages/index.js index 581d0a7af..2f058772d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,13 +10,14 @@ import { Customization } from '@/components/home/Customization' import { ModernFeatures } from '@/components/home/ModernFeatures' import { EditorTools } from '@/components/home/EditorTools' import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' -import { SearchButton } from '@/components/Search' +// import { SearchButton } from '@/components/Search' +import { SearchButton } from '@/components/.ZH/Search' import { Hero } from '@/components/home/Hero' import { Logo } from '@/components/Logo' import { Footer } from '@/components/home/Footer' import NextLink from 'next/link' import Head from 'next/head' -import { NavItems, NavPopover } from '@/components/Header' +import { NavItems, NavPopover } from '@/components/.ZH/Header' function Header() { return ( @@ -68,22 +69,38 @@ function Header() {

    - Rapidly build modern websites without ever leaving your HTML. + {/* Rapidly build modern websites without ever leaving your HTML. */} + 不用離開HTML，你還是可以極速建立最潮的網站。

    - A utility-first CSS framework packed with classes like{' '} - flex,{' '} + {/* A utility-first CSS framework packed with classes like{' '} */} + {/* flex,{' '} pt-4,{' '} text-center and{' '} rotate-90 that can be - composed to build any design, directly in your markup. + composed to build any design, directly in your markup. */} + 一個功能優先的 CSS 框架，集結了像是 {' '} + flex、{' '} + pt-4、{' '} + text-center 以及 {' '} + rotate-90 等 class， + 讓你可以直接將其組合起來並且建構出任意的設計。

    -
    - + {/*
    */} +
    + {/* Get started - + */} +
    + 心動。不如... + + + 馬上行動 + + +
    {({ actionKey }) => ( <> @@ -101,7 +118,8 @@ function Header() { - Quick search... + {/* Quick search... */} + 快速搜尋... {actionKey && ( @@ -128,25 +146,29 @@ export default function Home() { - Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. + {/* Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. */} + Tailwind CSS - 不用離開HTML，你還是可以極速建立最潮的網站

    - “Best practices” don’t actually work. + {/* “Best practices” don’t actually work. */} + 實際上，「最佳做法」是沒用的。

    - I’ve written{' '} + {/* I’ve written{' '} + 幾千個字 + + 就只為了說明讓 CSS 變得難以維護的原因，其實就是傳統的「語意化 class 名稱」。 + 但在你實際嘗試之前，你絕對不會認同我說的話。 + 如果你能不嫌棄地給它一個機會， + 我相信你絕對會想知道怎麼透過其他的方式使用 CSS。

    @@ -168,7 +201,8 @@ export default function Home() { />
    Adam Wathan
    -
    Creator of Tailwind CSS
    + {/*
    Creator of Tailwind CSS
    */} +
    Tailwind CSS 作者
    @@ -191,4 +225,4 @@ export default function Home() {
    +
    + + +
    + diff --git a/src/samples/.ZH/blade/list-item.html b/src/samples/.ZH/blade/list-item.html new file mode 100644 index 000000000..a8fc899ca --- /dev/null +++ b/src/samples/.ZH/blade/list-item.html @@ -0,0 +1,47 @@ +
    + +
    +

    {{ $movie->title }}

    +
    +
    +
    + 評分 + + + +
    +
    {{ $movie->starRating }}
    +
    +
    +
    分級
    +
    {{ $movie->rating }}
    +
    +
    +
    上映年份
    +
    {{ $movie->year }}
    +
    +
    +
    類別
    +
    + + {{ $movie->genre }} +
    +
    +
    +
    片長
    +
    + + {{ $movie->runtime }} +
    +
    +
    +
    演員陣容
    +
    {{ $movie->cast }}
    +
    +
    +
    +
    diff --git a/src/samples/.ZH/blade/movies.html b/src/samples/.ZH/blade/movies.html new file mode 100644 index 000000000..6dafed94f --- /dev/null +++ b/src/samples/.ZH/blade/movies.html @@ -0,0 +1,12 @@ +
    + + 新片上映 + 熱門電影 + 文森精選 + + + @foreach ($movies as $movie) + + @endforeach + +
    diff --git a/src/samples/.ZH/build-anything.html b/src/samples/.ZH/build-anything.html new file mode 100644 index 000000000..dfd933324 --- /dev/null +++ b/src/samples/.ZH/build-anything.html @@ -0,0 +1,70 @@ +
    +
    + +
    +
    +
    +

    + __content__ +

    +
    + __content__ +
    +
    + 有現貨 +
    +
    +
    +
    + + + + + +
    +
    +
    +
    + + +
    + +
    +

    + 全台灣保證24h到貨，台北市 6h到貨 +

    +
    +
    diff --git a/src/samples/.ZH/dark-mode.html b/src/samples/.ZH/dark-mode.html new file mode 100644 index 000000000..8b9b40de7 --- /dev/null +++ b/src/samples/.ZH/dark-mode.html @@ -0,0 +1,74 @@ +
    +
    + +
    +

    + 章節 128 +

    +

    + 讓 Heroku 上的 CSS 變靈活：使用 Utility Class +

    +

    + Full Stack 電台 +

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    24:16
    +
    75:50
    +
    +
    +
    +
    +
    + + + +
    + +
    + + + +
    +
    diff --git a/src/samples/.ZH/hero.html b/src/samples/.ZH/hero.html new file mode 100644 index 000000000..d2443ea1a --- /dev/null +++ b/src/samples/.ZH/hero.html @@ -0,0 +1,20 @@ +
    + +
    +
    +

    + 「Tailwind CSS 是我見過唯一一個可以在大型團隊中擴展 + 開來的框架。它可以輕鬆的客製化、適應任何設計， + 而且建置後又很輕巧。」 +

    +
    +
    +
    + Sarah Dayan +
    +
    + Algolia 的主管工程師 +
    +
    +
    +
    diff --git a/src/samples/.ZH/mobile-first.html b/src/samples/.ZH/mobile-first.html new file mode 100644 index 000000000..e99540c3a --- /dev/null +++ b/src/samples/.ZH/mobile-first.html @@ -0,0 +1,39 @@ +
    +
    +
    +

    科林伍德海濱別墅

    +

    獨享整個房源

    +
    +
    + + + +
    +
    +
    評論
    +
    + + 4.89 顆星 (128 人) +
    +
    地點
    +
    + + + 安大略省 科林伍德 +
    +
    +
    + +
    +

    + This sunny and spacious room is for those traveling light and looking for a comfy and cosy place to lay their head for a night or two. This beach house sits in a vibrant neighborhood littered with cafes, pubs, restaurants and supermarkets and is close to all the major attractions such as Edinburgh Castle and Arthur's Seat. +

    +
    +
    diff --git a/src/samples/.ZH/performance.html b/src/samples/.ZH/performance.html new file mode 100644 index 000000000..c9a454f2a --- /dev/null +++ b/src/samples/.ZH/performance.html @@ -0,0 +1,12 @@ + + + + + + Tailwind CSS 繁體中文技術文件 + + + + + + diff --git a/src/samples/.ZH/react/list-item.jsx b/src/samples/.ZH/react/list-item.jsx new file mode 100644 index 000000000..977d9a97a --- /dev/null +++ b/src/samples/.ZH/react/list-item.jsx @@ -0,0 +1,51 @@ +export default function ListItem({ movie }) { + return ( +
    + +
    +

    {movie.title}

    +
    +
    +
    + 評分 + + + +
    +
    {movie.starRating}
    +
    +
    +
    分級
    +
    {movie.rating}
    +
    +
    +
    上映年份
    +
    {movie.year}
    +
    +
    +
    類型
    +
    + + {movie.genre} +
    +
    +
    +
    片長
    +
    + + {movie.runtime} +
    +
    +
    +
    演員陣容
    +
    {movie.cast}
    +
    +
    +
    +
    + ) +} diff --git a/src/samples/.ZH/react/movies.jsx b/src/samples/.ZH/react/movies.jsx new file mode 100644 index 000000000..4e5fa2322 --- /dev/null +++ b/src/samples/.ZH/react/movies.jsx @@ -0,0 +1,21 @@ +import Nav from './Nav.js' +import NavItem from './NavItem.js' +import List from './List.js' +import ListItem from './ListItem.js' + +export default function Movies({ movies }) { + return ( +
    + + + {movies.map((movie) => ( + + ))} + +
    + ) +} diff --git a/src/samples/.ZH/state-variants.html b/src/samples/.ZH/state-variants.html new file mode 100644 index 000000000..c68e7aa5e --- /dev/null +++ b/src/samples/.ZH/state-variants.html @@ -0,0 +1,51 @@ +
    +
    +
    +

    專案

    + + + 建立 + +
    +
    + + +
    +
    + +
    diff --git a/src/samples/.ZH/vue/list-item.html b/src/samples/.ZH/vue/list-item.html new file mode 100644 index 000000000..7765ac811 --- /dev/null +++ b/src/samples/.ZH/vue/list-item.html @@ -0,0 +1,55 @@ + + + diff --git a/src/samples/.ZH/vue/movies.html b/src/samples/.ZH/vue/movies.html new file mode 100644 index 000000000..7f9dd704b --- /dev/null +++ b/src/samples/.ZH/vue/movies.html @@ -0,0 +1,29 @@ + + + From f789788226d8457d45375ad3c4d56b799d5aa088 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:11:22 +0800 Subject: [PATCH 31/48] add navs/.ZH --- src/navs/.ZH/documentation.js | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/navs/.ZH/documentation.js b/src/navs/.ZH/documentation.js index 6e1f8f44a..fe1210613 100644 --- a/src/navs/.ZH/documentation.js +++ b/src/navs/.ZH/documentation.js @@ -1,24 +1,19 @@ import { createPageList } from '@/utils/createPageList' const pages = createPageList( - require.context(`../../pages/docs/.ZH/?meta=title,shortTitle,published`, false, /\.mdx$/), - 'docs' + require.context(`../../pages/ZH/docs/?meta=title,shortTitle,published`, false, /\.mdx$/), + 'ZH/docs' ) -// const pages_of_installation = createPageList( -// require.context(`../../pages/docs/.ZH/installation/?meta=title,shortTitle,published`, false, /\.js$/), -// 'docs/installation' -// ) - export const documentationNav = { - '起手式': [ + 'Getting Started': [ { - title: '安裝', + title: 'Installation', // href: '/docs/installation', - href: '/docs/.ZH/installation', - match: /^\/docs\/installation/, + // match: /^\/docs\/installation/, + href: '/ZH/docs/installation', + match: /^\/ZH\/docs\/installation/, }, - // pages_of_installation['index'], // TODO: Add these pages // pages['tailwind-cli'], // { title: 'Play CDN', href: '#' }, @@ -28,7 +23,7 @@ export const documentationNav = { pages['browser-support'], pages['upgrade-guide'], ], - '核心概念': [ + 'Core Concepts': [ pages['utility-first'], // TODO: Maybe write this page // pages['writing-your-html'], @@ -39,7 +34,7 @@ export const documentationNav = { pages['adding-custom-styles'], pages['functions-and-directives'], ], - '客製化': [ + Customization: [ pages['configuration'], pages['content-configuration'], // TODO: Remove + redirect to v2 @@ -53,8 +48,8 @@ export const documentationNav = { pages['plugins'], pages['presets'], ], - '基礎樣式': [pages['preflight']], - '排版': [ + 'Base Styles': [pages['preflight']], + Layout: [ pages['aspect-ratio'], pages['container'], pages['columns'], From 5a8632985633a337f9f8335a12056bb3ff32acde Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:11:34 +0800 Subject: [PATCH 32/48] add layouts/.ZH --- src/layouts/.ZH/BasicLayout.js | 10 ++++++++++ src/layouts/.ZH/ContentsLayout.js | 13 +++++++++---- src/layouts/.ZH/FrameworkGuideLayout.js | 22 ++++++++++++++++++++++ src/layouts/.ZH/InstallationLayout.js | 22 +++++++++++----------- src/layouts/.ZH/SidebarLayout.js | 10 +++++++--- 5 files changed, 59 insertions(+), 18 deletions(-) create mode 100644 src/layouts/.ZH/BasicLayout.js create mode 100644 src/layouts/.ZH/FrameworkGuideLayout.js diff --git a/src/layouts/.ZH/BasicLayout.js b/src/layouts/.ZH/BasicLayout.js new file mode 100644 index 000000000..8cc18fbd9 --- /dev/null +++ b/src/layouts/.ZH/BasicLayout.js @@ -0,0 +1,10 @@ +import { Footer } from '@/components/.ZH/Footer' + +export function BasicLayout({ children }) { + return ( + <> +
    {children}
    +
    + + ) +} diff --git a/src/layouts/.ZH/ContentsLayout.js b/src/layouts/.ZH/ContentsLayout.js index e989c0529..4d4468b9b 100644 --- a/src/layouts/.ZH/ContentsLayout.js +++ b/src/layouts/.ZH/ContentsLayout.js @@ -7,9 +7,11 @@ import Link from 'next/link' import { SidebarLayout, SidebarContext } from '@/layouts/.ZH/SidebarLayout' import { PageHeader } from '@/components/PageHeader' import clsx from 'clsx' -import { Footer } from '@/components/Footer' +// import { Footer } from '@/components/Footer' +import { Footer } from '@/components/.ZH/Footer' import { Heading } from '@/components/Heading' import { MDXProvider } from '@mdx-js/react' +import chineseCategory from '@/components/.ZH/ChineseCategory' export const ContentsContext = createContext() @@ -37,7 +39,8 @@ function TableOfContents({ tableOfContents, currentSection }) { return ( <> -
    On this page
    + {/*
    On this page
    */} +
    此頁面中
      {tableOfContents.map((section) => ( @@ -175,7 +178,8 @@ export function ContentsLayout({ children, meta, classes, tableOfContents, secti title={meta.title} description={meta.description} badge={{ key: 'Tailwind CSS version', value: meta.featureVersion }} - section={section} + // section={section} + section={chineseCategory[section]} /> {classes ? ( @@ -196,7 +200,8 @@ export function ContentsLayout({ children, meta, classes, tableOfContents, secti - Edit this page on GitHub + {/* Edit this page on GitHub */} + 在 GitHub 上編輯
    diff --git a/src/layouts/.ZH/FrameworkGuideLayout.js b/src/layouts/.ZH/FrameworkGuideLayout.js new file mode 100644 index 000000000..a32bddf71 --- /dev/null +++ b/src/layouts/.ZH/FrameworkGuideLayout.js @@ -0,0 +1,22 @@ +import { BasicLayout } from '@/layouts/.ZH/BasicLayout' + +export function FrameworkGuideLayout({ title, description, children }) { + return ( + +
    +
    +

    Installation

    +

    + {title} +

    +

    + {description} +

    +
    +
    +
    + {children} +
    +     + ) +} diff --git a/src/layouts/.ZH/InstallationLayout.js b/src/layouts/.ZH/InstallationLayout.js index 817dbc2f0..e03171aa3 100644 --- a/src/layouts/.ZH/InstallationLayout.js +++ b/src/layouts/.ZH/InstallationLayout.js @@ -1,20 +1,20 @@ -import { BasicLayout } from '@/layouts/BasicLayout' +import { BasicLayout } from '@/layouts/.ZH/BasicLayout' import clsx from 'clsx' import { useRouter } from 'next/router' import Link from 'next/link' import { IconContainer } from '@/components/home/common' let tabs = { - 'Tailwind CLI': '/docs/installation', - 'Using PostCSS': '/docs/installation/using-postcss', - 'Framework Guides': '/docs/installation/framework-guides', - 'Play CDN': '/docs/installation/play-cdn', + 'Tailwind CLI': '/ZH/docs/installation', + 'Using PostCSS': '/ZH/docs/installation/using-postcss', + 'Framework Guides': '/ZH/docs/installation/framework-guides', + 'Play CDN': '/ZH/docs/installation/play-cdn', } let readNext = [ { title: 'Utility-First Fundamentals', - href: '/docs/utility-first', + href: '/ZH/docs/utility-first', body: () => (

    Using a utility-first workflow to build complex components from a constrained set of @@ -25,7 +25,7 @@ let readNext = [ }, { title: 'Responsive Design', - href: '/docs/responsive-design', + href: '/ZH/docs/responsive-design', body: () => (

    Build fully responsive user interfaces that adapt to any screen size using responsive @@ -36,7 +36,7 @@ let readNext = [ }, { title: 'Hover, Focus & Other States', - href: '/docs/hover-focus-and-other-states', + href: '/ZH/docs/hover-focus-and-other-states', body: () => (

    Style elements in interactive states like hover, focus, and more using conditional @@ -47,7 +47,7 @@ let readNext = [ }, { title: 'Dark Mode', - href: '/docs/dark-mode', + href: '/ZH/docs/dark-mode', body: () => (

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    ), @@ -55,7 +55,7 @@ let readNext = [ }, { title: 'Reusing Styles', - href: '/docs/reusing-styles', + href: '/ZH/docs/reusing-styles', body: () => (

    Manage duplication and keep your projects maintainable by creating reusable abstractions. @@ -65,7 +65,7 @@ let readNext = [ }, { title: 'Customizing the Framework', - href: '/docs/adding-custom-styles', + href: '/ZH/docs/adding-custom-styles', body: () => (

    Customize the framework to match your brand and extend it with your own custom styles.

    ), diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js index 9a45861db..b99225c81 100644 --- a/src/layouts/.ZH/SidebarLayout.js +++ b/src/layouts/.ZH/SidebarLayout.js @@ -5,6 +5,7 @@ import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' import clsx from 'clsx' import { SearchButton } from '@/components/.ZH/Search' import { Dialog } from '@headlessui/react' +import chineseCategory from '@/components/.ZH/ChineseCategory' export const SidebarContext = createContext() @@ -141,7 +142,8 @@ function Nav({ nav, children, fallbackHref }) { 'text-gray-400': publishedItems.length === 0, })} > - {category} + {/* {category} */} + {chineseCategory[category]}
      {(fallbackHref ? nav[category] : publishedItems).map((item, i) => { @@ -222,7 +224,8 @@ function TopLevelNav() { return ( <> setNavIsOpen(false)} className="absolute top-5 right-5 w-8 h-8 flex items-center justify-center text-gray-500 hover:text-gray-600" > - Close navigation + {/* Close navigation */} + 關閉導航欄 Date: Mon, 20 Dec 2021 21:12:23 +0800 Subject: [PATCH 33/48] add components/.ZH --- src/components/.ZH/ChineseCategory.js | 21 + src/components/.ZH/Footer.js | 9 +- src/components/.ZH/Header.js | 12 +- src/components/.ZH/HtmlZenGarden.js | 53 +- src/components/.ZH/Tabs.js | 57 + src/components/.ZH/Testimonials.js | 988 ++++++++++++++++++ src/components/.ZH/home/BuildAnything.js | 66 +- src/components/.ZH/home/ComponentDriven.js | 149 +-- src/components/.ZH/home/ConstraintBased.js | 34 +- src/components/.ZH/home/Customization.js | 46 +- src/components/.ZH/home/DarkMode.js | 28 +- src/components/.ZH/home/EditorTools.js | 28 +- src/components/.ZH/home/Footer.js | 14 +- src/components/.ZH/home/Hero.js | 15 +- src/components/.ZH/home/MobileFirst.js | 35 +- src/components/.ZH/home/ModernFeatures.js | 36 +- src/components/.ZH/home/Performance.js | 26 +- .../.ZH/home/ReadyMadeComponents.js | 20 +- src/components/.ZH/home/StateVariants.js | 55 +- 19 files changed, 1473 insertions(+), 219 deletions(-) create mode 100644 src/components/.ZH/ChineseCategory.js create mode 100644 src/components/.ZH/Tabs.js create mode 100644 src/components/.ZH/Testimonials.js diff --git a/src/components/.ZH/ChineseCategory.js b/src/components/.ZH/ChineseCategory.js new file mode 100644 index 000000000..1de819a55 --- /dev/null +++ b/src/components/.ZH/ChineseCategory.js @@ -0,0 +1,21 @@ +export default { + 'Getting Started': "起手式", + 'Core Concepts': "核心概念", + 'Customization': "客製化", + 'Community': "社群", + 'Base Styles':"基底樣式", + 'Flexbox & Grid':'Flexbox & Grid', + 'Spacing':'Spacing', + 'Sizing':'Sizing', + 'Typography':'Typography', + 'Backgrounds':'Backgrounds', + 'Borders':'Borders', + 'Effects':'Effects', + 'Filters':'Filters', + 'Transitions & Animation':'Transitions & Animation', + 'Transforms':'Transforms', + 'Interactivity':'Interactivity', + 'SVG':'SVG', + 'Accessibility':'Accessibility', + 'Official Plugins':'Official Plugins', +} \ No newline at end of file diff --git a/src/components/.ZH/Footer.js b/src/components/.ZH/Footer.js index cf1e9e1fb..150bd6f8c 100644 --- a/src/components/.ZH/Footer.js +++ b/src/components/.ZH/Footer.js @@ -50,10 +50,15 @@ export function Footer({ children, previous, next }) { )}
      -

      Copyright © 2021 Tailwind Labs Inc.

      + {/*

      Copyright © 2021 Tailwind Labs Inc.

      */} +

      + Copyright © 2021 Tailwind Labs Inc.
      + 由兔兔教翻譯 +

      - Trademark Policy + {/* Trademark Policy */} + 商標政策

      diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js index f31163c73..bb3a030fd 100644 --- a/src/components/.ZH/Header.js +++ b/src/components/.ZH/Header.js @@ -7,6 +7,7 @@ import { Logo } from '@/components/Logo' import { Dialog } from '@headlessui/react' import { useEffect, useState } from 'react' import clsx from 'clsx' +import chineseCategory from '@/components/.ZH/ChineseCategory' function Featured() { return ( @@ -18,7 +19,7 @@ function Featured() { {/* Just-in-Time all the time, colored shadows, scroll snap and more */} - Just-in-Time all the time, colored shadows, scroll snap and more + 全時段的 JIT 模式，還有陰影色彩、捲動吸附以及更多新功能
    • - + {/* Docs */} - 文件 + 技術文件
    • @@ -186,7 +187,7 @@ export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section className="mr-3 flex-none w-[2.0625rem] overflow-hidden md:w-auto" onContextMenu={(e) => { e.preventDefault() - Router.push('/brand') + Router.push('/ZH/brand') }} > {/* Tailwind CSS home page */} @@ -246,7 +247,8 @@ export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section
        {section && (
      1. - {section} + {/* {section} */} + {chineseCategory[section]} - Classic Utility - Jacket + {/* Classic Utility + Jacket */} + 經典機能性外套 - Kids Jumpsuit + {/* Kids Jumpsuit */} + 兒童連身裝 - Dogtooth Style Jacket + {/* Dogtooth Style Jacket */} + 韓版西裝外套 - Retro Shoe + {/* Retro Shoe */} + NIKE 復古版球鞋
      • @@ -527,7 +536,8 @@ export function HtmlZenGarden({ theme }) { theme === 'Simple' ? '' : 'absolute bottom-0 left-0' }`} > - In stock + {/* In stock */} + 有現貨 - In stock + {/* In stock */} + 有現貨 - In stock + {/* In stock */} + 有現貨 - In stock + {/* In stock */} + 有現貨
    @@ -690,7 +703,8 @@ export function HtmlZenGarden({ theme }) { initial={false} animate={{ opacity: theme === name ? 1 : 0 }} > - Buy now + {/* Buy now */} + 直接購買 ))} @@ -723,7 +737,8 @@ export function HtmlZenGarden({ theme }) { initial={false} animate={{ opacity: theme === name ? 1 : 0 }} > - Add to bag + {/* Add to bag */} + 加到購物車 ))} @@ -782,8 +797,10 @@ export function HtmlZenGarden({ theme }) { animate={{ opacity: theme === name ? 1 : 0 }} > - Free shipping on all - continental US orders. + {/* Free shipping on all + continental US orders. */} + 全台保證 24h 到貨 + ，台北市 6h 到貨 ))} diff --git a/src/components/.ZH/Tabs.js b/src/components/.ZH/Tabs.js new file mode 100644 index 000000000..b6c339802 --- /dev/null +++ b/src/components/.ZH/Tabs.js @@ -0,0 +1,57 @@ +export function Tabs({ tabs, selected, onChange, className, iconClassName }) { + return ( +
    +
      + {Object.entries(tabs).map(([name, icon]) => ( +
    • + +
      • + ))} +
    +
    + ) +} + +function chineseName(name) { + return { + // Utilities + 'Sizing': "尺寸", + 'Colors': "色彩", + 'Typography': "文字版式", + 'Shadows': "陰影", + + // Layouts + 'Simple': "簡約", + 'Playful': "生動", + 'Elegant': "典雅", + 'Brutalist': "狂野", + + // Features + 'CSS Grid': "CSS 網格", + 'Transforms': "變形", + 'Filters': "濾鏡", + }[name] +} \ No newline at end of file diff --git a/src/components/.ZH/Testimonials.js b/src/components/.ZH/Testimonials.js new file mode 100644 index 000000000..ea2f691e2 --- /dev/null +++ b/src/components/.ZH/Testimonials.js @@ -0,0 +1,988 @@ +import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' +import clsx from 'clsx' +import { useEffect, useRef, useState } from 'react' +import { useInView } from 'react-intersection-observer' + +let testimonials = [ + // Column 1 + [ + { + content: 'I feel like an idiot for not using Tailwind CSS until now.', + url: 'https://twitter.com/ryanflorence/status/1187951799442886656', + author: { + name: 'Ryan Florence', + role: 'Remix & React Training', + avatar: require('@/img/avatars/ryan-florence.jpg').default, + }, + }, + { + content: + 'If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS.', + url: 'https://twitter.com/rauchg/status/1225611926320738304', + author: { + name: 'Guillermo Rauch', + role: 'Vercel', + avatar: require('@/img/avatars/guillermo-rauch.jpg').default, + }, + }, + { + content: `I have no design skills and with Tailwind I can actually make good looking websites with ease and it's everything I ever wanted in a CSS framework.`, + author: { + name: 'Sara Vieira', + role: 'CodeSandbox', + avatar: require('@/img/avatars/sara-vieira.jpg').default, + }, + }, + { + content: `Tailwind CSS is the greatest CSS framework on the planet.`, + url: 'https://twitter.com/taylorotwell/status/1106539049202999296', + author: { + name: 'Bret "The Hitman" Hart', + role: 'Former WWE Champion', + avatar: require('@/img/avatars/bret-hart.jpg').default, + }, + }, + { + content: `I started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes.`, + url: 'https://twitter.com/dacey_nolan/status/1303744545587441666', + author: { + name: 'Dacey Nolan', + role: 'Software Engineer', + avatar: require('@/img/avatars/dacey-nolan.jpg').default, + }, + }, + + { + content: 'Loved it the very moment I used it.', + url: 'https://twitter.com/GTsurwa/status/1304226774491033601', + author: { + name: 'Gilbert Rabut Tsurwa', + role: 'Web Developer', + avatar: require('@/img/avatars/gilbert-rabut-tsurwa.jpg').default, + }, + }, + { + content: + 'There’s one thing that sucks about @tailwindcss - once you’ve used it on a handful of projects it is a real pain in the ass to write normal CSS again.', + url: 'https://twitter.com/iamgraem_e/status/1322861404781748228', + author: { + name: 'Graeme Houston', + role: 'JavaScript Developer', + avatar: require('@/img/avatars/graeme-houston.jpg').default, + }, + }, + + { + content: `Okay, I’m officially *all* in on the @tailwindcss hype train. Never thought building websites could be so ridiculously fast and flexible.`, + url: 'https://twitter.com/lukeredpath/status/1316543571684663298', + author: { + name: 'Aaron Bushnell', + role: 'Programmer @ TrendyMinds', + avatar: require('@/img/avatars/aaron-bushnell.jpg').default, + }, + }, + { + content: 'Okay, @tailwindcss just clicked for me and now I feel like a #!@%&$% idiot.', + url: 'https://twitter.com/ken_wheeler/status/1225373231139475458', + author: { + name: 'Ken Wheeler', + role: `React Engineer`, + avatar: require('@/img/avatars/ken-wheeler.jpg').default, + }, + }, + { + content: `I've been using @tailwindcss the past few months and it's amazing. I already used some utility classes before, but going utility-first... this is the way.`, + url: 'https://twitter.com/JadLimcaco/status/1327417021915561984', + author: { + name: 'Jad Limcaco', + role: 'Designer', + avatar: require('@/img/avatars/jad-limcaco.jpg').default, + }, + }, + { + content: `After finally getting to use @tailwindcss on a real client project in the last two weeks I never want to write CSS by hand again. I was a skeptic, but the hype is real.`, + url: 'https://twitter.com/lukeredpath/status/1316543571684663298', + author: { + name: 'Luke Redpath', + role: 'Ruby & iOS Developer', + avatar: require('@/img/avatars/luke-redpath.jpg').default, + }, + }, + { + content: + "I didn't think I was going to like @tailwindcss... spent a day using it for a POC, love it! I wish this had been around when we started our company design system, seriously considering a complete rebuild", + url: 'https://twitter.com/JonBloomer/status/1300923818622377984', + author: { + name: 'Jon Bloomer', + role: 'Front-End Developer', + avatar: require('@/img/avatars/jon-bloomer.jpg').default, + }, + }, + { + content: '@tailwindcss looked unpleasant at first, but now I’m hooked on it.', + url: 'https://twitter.com/droidgilliland/status/1222733372855848961', + author: { + name: 'Andrew Gilliland', + role: 'Front-End Developer', + avatar: require('@/img/avatars/andrew-gilliland.jpg').default, + }, + }, + + // New 1 + { + content: 'Once you start using tailwind, there is no going back.', + url: 'https://twitter.com/pkspyder007/status/1463126688301158400', + author: { + name: 'Praveen Kumar', + avatar: require('@/img/avatars/pkspyder007.jpg').default, + }, + }, + { + content: + 'I use @tailwindcss for every single project because it removes most of the annoyances of css and is multiple times quicker', + url: 'https://twitter.com/fanduvasu/status/1443396529558011904', + author: { + name: 'Vasu Bansal', + avatar: require('@/img/avatars/fanduvasu.jpg').default, + }, + }, + { + content: + "It's changed the trajectory of my business. I'm able to design better looking, better performing, and more accessible components in 1/3 of the time.", + url: 'https://twitter.com/lawjolla/status/1443295146959728643', + author: { + name: 'Dennis Walsh', + avatar: require('@/img/avatars/lawjolla.jpg').default, + }, + }, + { + content: + 'My first tailwind project worked great but what really kicked ass was going back to it months later and saving so much time making new changes. I knew how everything fit together instantly.', + url: 'https://twitter.com/ericlbarnes/status/1303814860879343618', + author: { + name: 'Eric L. Barnes', + avatar: require('@/img/avatars/ericlbarnes.jpg').default, + }, + }, + { + content: + "Tailwind looked like pure spaghetti until I used it in a real project. Now it's the only way I make websites. Simple, fast, scalable.", + url: 'https://twitter.com/nicksaraev/status/1304200875758428160', + author: { + name: 'Nick Saraev', + avatar: require('@/img/avatars/nicksaraev.jpg').default, + }, + }, + { + content: + 'Tailwind is a classic example of why you need to put preconceptions aside when evaluating tech. The experience and productivity is streets ahead of what you might have believed based on old school CSS thinking!', + url: 'https://twitter.com/_lukebennett/status/1303744015943204867', + author: { + name: 'Luke Bennett', + avatar: require('@/img/avatars/_lukebennett.jpg').default, + }, + }, + { + content: + 'TailwindCSS is a framework like no other. Rather than constraining you to a set design, it gives you the tools and the standardization to build exactly what you want.', + url: 'https://twitter.com/carre_sam/status/1303750185663770625', + author: { + name: 'Sam Carré', + avatar: require('@/img/avatars/carre_sam.jpg').default, + }, + }, + { + content: + 'I remember being horrified the first time I saw utility first css. But these past months using Tailwind on an increasing number of projects has just been a joyful new way to build things on the web.', + url: 'https://twitter.com/evanfuture/status/1303743551583514637', + author: { + name: 'Evan Payne', + avatar: require('@/img/avatars/evanfuture.jpg').default, + }, + }, + { + content: + "I was initially skeptical as I began using @tailwindcss, until I now needed to copy a @sveltejs component to a different location and I didn't need to worry about any of my styles breaking.", + url: 'https://twitter.com/rotimi_best/status/1407010180760539136', + author: { + name: 'Rotimi Best', + avatar: require('@/img/avatars/rotimi_best.jpg').default, + }, + }, + { + content: '@tailwindcss makes you better at CSS. Change my mind.', + url: 'https://twitter.com/Dominus_Kelvin/status/1362891692634963973', + author: { + name: 'Kelvin Omereshone', + avatar: require('@/img/avatars/Dominus_Kelvin.jpg').default, + }, + }, + { + content: + "Awesome stuff! I'm no designer or front-end developer; until I found Tailwind last year I hadn't done any CSS since the early nineties. Tailwind, and Tailwind UI mean I can now create good looking front ends quickly, which is super empowering. Crazy impressive project.", + url: 'https://twitter.com/JCMagoo/status/1443334891706454018', + author: { + name: 'John W Clarke', + avatar: require('@/img/avatars/JCMagoo.jpg').default, + }, + }, + { + content: + 'I admit I was a big skeptic of @tailwindcss until last year. I thought "why would I ever type a million classes that just abstract single CSS properties?" By now, I feel like I\'m twice as productive when building UIs. It\'s really amazing.', + url: 'https://twitter.com/tweetsofsumit/status/1460171778337083394', + author: { + name: 'Sumit Kumar', + avatar: require('@/img/avatars/tweetsofsumit.jpg').default, + }, + }, + { + content: + 'I\'m nearing completion on my months-long project of rewriting my company\'s frontend in TypeScript and @tailwindcss. Still, every time I re-implement a component, I think, "Wow, that was way easier this time." Tailwind rocks.', + url: 'https://twitter.com/mannieschumpert/status/1445868384869134336', + author: { + name: 'Mannie Schumpert', + role: 'Co-Founder/CTO @LaunchPathInc', + avatar: require('@/img/avatars/mannieschumpert.jpg').default, + }, + }, + + // New 2 + // { + // content: + // 'As a lazy developer, I love that I can copy/paste HTML examples that use Tailwind CSS and it just works in my app.', + // url: 'https://twitter.com/adamwathan/status/1468648955240230918', + // author: { + // name: 'Mark Funk', + // role: 'UI Engineer at Netflix', + // avatar: require('@/img/avatars/.jpg').default, + // }, + // }, + { + content: + 'With the amount of shipping we have to do, skipping the conversion of brainwaves to CSS, and being able to implement at the speed of thought using Tailwind, my life as a fullstack developer has never been more blissful.', + url: 'https://twitter.com/0xholman/status/1468691614453227523', + author: { + name: 'Christian Holman', + avatar: require('@/img/avatars/0xholman.jpg').default, + }, + }, + { + content: + 'Tailwind makes it easy to bring new developers into the frontend project without having to worry about the mental exercise of understanding ‘some’ developer’s class hierarchy and thought process behind it.', + url: 'https://twitter.com/jilsonthomas/status/1468678743644327942', + author: { + name: 'Jilson Thomas', + role: 'UI Designer/Developer', + avatar: require('@/img/avatars/jilsonthomas.jpg').default, + }, + }, + { + content: + 'Tailwind has been a total game-changer for our dev team. It allows us to move faster, keep our UI consistent, and focus on the work we want to do instead of writing CSS.', + url: 'https://twitter.com/jakeryansmith/status/1468668828041293831', + author: { + name: 'Jake Ryan Smith', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/jakeryansmith.jpg').default, + }, + }, + ], + // Column 2 + [ + { + content: + 'Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain.', + url: 'https://twitter.com/debs_obrien/status/1243255468241420288', + author: { + name: `Debbie O'Brien`, + role: 'Head of Learning @ Nuxt.js', + avatar: require('@/img/avatars/debbie-obrien.jpg').default, + }, + }, + { + content: + 'I’ve been writing CSS for over 20 years, and up until 2017, the way I wrote it changed frequently. It’s not a coincidence Tailwind was released the same year. It might look wrong, but spend time with it and you’ll realize semantic CSS was a 20 year mistake.', + url: 'https://twitter.com/frontendben/status/1468687028036452363', + author: { + name: 'Ben Furfie', + role: 'Developer', + avatar: require('@/img/avatars/frontendben.jpg').default, + }, + }, + { + content: 'Tailwind makes writing code feel like I’m using a design tool.', + url: 'https://twitter.com/didiercatz/status/1468657403382181901', + author: { + name: 'Didier Catz', + role: 'Co-Founder @StyptApp', + avatar: require('@/img/avatars/didiercatz.jpg').default, + }, + }, + { + content: + 'Tailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling.', + url: 'https://twitter.com/frontstuff_io/status/1468667263532339204', + author: { + name: 'Sarah Dayan', + role: 'Staff Software Engineer @Algolia', + avatar: require('@/img/avatars/frontstuff_io.jpg').default, + }, + }, + { + content: 'I never want to write regular CSS again. Only @tailwindcss.', + url: 'https://twitter.com/trey/status/1457854984020762626', + author: { + name: 'Trey Piepmeier', + role: 'Web Developer', + avatar: require('@/img/avatars/trey.jpg').default, + }, + }, + { + content: + 'I came into my job wondering why the last dev would ever implement Tailwind into our projects, within days I was a Tailwind convert and use it for all of my personal projects.', + url: 'https://twitter.com/maddiexcampbell/status/1303752658029740032', + author: { + name: 'Madeline Campbell', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/madeline-campbell.jpg').default, + }, + }, + { + content: + 'Tailwind made me enjoy frontend development again and gave me the confidence that I can realize any design - no matter how complex it may be.', + url: 'https://twitter.com/marcelpociot/status/1468664587146956803', + author: { + name: 'Marcel Pociot', + role: 'CTO at @beyondcode', + avatar: require('@/img/avatars/marcelpociot.jpg').default, + }, + }, + { + content: 'Tailwind turned me into a complete stack developer.', + url: 'https://twitter.com/lepikhinb/status/1468665237155074056', + author: { + name: 'Boris Lepikhin', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/lepikhinb.jpg').default, + }, + }, + { + content: + "Tailwind is the easiest and simplest part of any project I work on. I can't imagine I'll build anything big without it.", + url: 'https://twitter.com/assertchris/status/1468651427664908292', + author: { + name: 'Christopher Pitt', + role: 'Developer', + avatar: require('@/img/avatars/assertchris.png').default, + }, + }, + { + content: + "Tailwind CSS has alleviated so many problems we've all become accustomed to with traditional CSS that it makes you wonder how you ever developed websites without it.", + url: 'https://twitter.com/ChaseGiunta/status/1468658689569665026', + author: { + name: 'Chase Giunta', + role: 'Developer', + avatar: require('@/img/avatars/ChaseGiunta.jpg').default, + }, + }, + { + content: + 'Having used other CSS frameworks, I always come back to Tailwind CSS as it gives me the ability to create a consistent and easy to use design system in my projects. Thanks to Tailwind CSS I only need one cup of coffee to get started on a new project.', + url: 'https://twitter.com/zaku_dev/status/1468666521895325697', + author: { + name: 'Ivan Guzman', + role: 'Software Engineer', + avatar: require('@/img/avatars/zaku_dev.png').default, + }, + }, + { + content: + 'I’ve been using TailwindCSS for many years, and yet they seem to still amaze us every year with the updates. It’s aided me in building websites super quickly, I could never go back to boring old CSS classes!', + url: 'https://twitter.com/heychazza', + author: { + name: 'Charlie Joseph', + role: 'Developer', + avatar: require('@/img/avatars/heychazza.jpg').default, + }, + }, + { + content: + 'Tailwind CSS is a design system implementation in pure CSS. It is also configurable. It gives developers super powers. It allows them to build websites with a clean consistent UI out of the box. It integrates well with any web dev framework because it‘s just CSS! Genius.', + url: 'https://twitter.com/kahliltweets/status/1468654856617476097', + author: { + name: 'Kahlil Lechelt', + role: 'JavaScript Developer', + avatar: require('@/img/avatars/kahliltweets.jpg').default, + }, + }, + { + content: + 'It’s super simple to slowly migrate to Tailwind from e.g. Bootstrap by using its prefix feature. Benefiting from its features while not having to spend a lot of time upfront is amazing!', + url: 'https://twitter.com/MarcoSinghof/status/1468654001772244993', + author: { + name: 'Marco Singhof', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/MarcoSinghof.jpg').default, + }, + }, + { + content: + 'I wasn’t comfortable using CSS until I met Tailwind. Its easy to use abstraction combined with excellent documentation are a game changer!', + url: 'https://twitter.com/joostmeijles/status/1468650757876555778', + author: { + name: 'Joost Meijles', + role: 'Head of Unplatform @avivasolutions', + avatar: require('@/img/avatars/joostmeijles.jpg').default, + }, + }, + { + content: + "Tailwind turns implementing designs from a chore to a joy. You'll fall in love with building for the web all over again.", + url: 'https://twitter.com/_swanson/status/1468653854199853057', + author: { + name: 'Matt Swanson', + role: 'Developer', + avatar: require('@/img/avatars/_swanson.jpg').default, + }, + }, + { + content: + 'Tailwind CSS helps you eject from the complexity of abstracting styles away. Having styles right there in your HTML is powerful, which gets even more obvious when using products like Tailwind UI.', + url: 'https://twitter.com/silvenon/status/1468676092504551433', + author: { + name: 'Matija Marohnić', + role: 'Front-End Developer', + avatar: require('@/img/avatars/silvenon.jpg').default, + }, + }, + { + content: + 'If Tailwind is like Tachyons on steroids, Tailwind UI is like Lance Armstrong winning the Tour de France (seven times). Without, of course, the scandal and shame.', + url: 'https://twitter.com/hughdurkin/status/1468658970848079872', + author: { + name: 'Hugh Durkin', + role: 'Developer', + avatar: require('@/img/avatars/hughdurkin.jpg').default, + }, + }, + { + content: + 'Being burned by other abandoned CSS frameworks, my biggest fear was to bet on yet another framework that may disappear. However, I gave it a try and couldn’t be happier. They keep improving the framework in meaningful ways on a regular basis. It feels very much alive.', + url: 'https://twitter.com/wolax/status/1468653118443470848', + author: { + name: 'Matthias Schmidt', + role: 'Programmer', + avatar: require('@/img/avatars/wolax.jpg').default, + }, + }, + { + content: + 'Getting buy-in on TailwindCSS from our entire team of developers took some time and discussion, but once we implemented company wide, it has made it a breeze for any developer to jump into any project and quickly make changes/enhancements.', + url: 'https://twitter.com/jerredchurst/status/1468657838494998530', + author: { + name: 'Jerred Hurst', + role: 'CTO Primitive', + avatar: require('@/img/avatars/jerredchurst.jpg').default, + }, + }, + { + content: + "Tailwind CSS has at the same time made CSS enjoyable and drastically changed how I build out products. It's rapid, efficient and an absolute joy to work with.", + url: 'https://twitter.com/braunshizzle/status/1468676003941830666', + author: { + name: 'Braunson Yager', + role: 'Full Stack Developer & Designer', + avatar: require('@/img/avatars/braunshizzle.jpg').default, + }, + }, + { + content: + 'Using any CSS framework other than Tailwind seems like a step backward in web development at this point. Absolutely nothing else comes close to making me as productive during the design phase of development than Tailwind.', + url: 'https://twitter.com/zac_zajdel/status/1468662057079914499', + author: { + name: 'Zac Jordan Zajdel', + role: 'Developer', + avatar: require('@/img/avatars/zac_zajdel.jpg').default, + }, + }, + { + content: + 'Tailwind has completely revolutionized our devops pipeline. The CLI works consistently no matter what framework is in place.', + url: 'https://twitter.com/joelvarty/status/1468671752356126728', + author: { + name: 'Joel Varty', + role: 'President & CTO @agilitycms', + avatar: require('@/img/avatars/joelvarty.jpg').default, + }, + }, + { + content: + 'Tailwind is like a really nice pair of socks. You think, “okay, how good can a pair of socks be”. Then you put socks on and you are like “%@#! these are socks”.', + url: 'https://twitter.com/NeilDocherty/status/1468668979698937859', + author: { + name: 'Neil Docherty', + role: 'Software Engineer', + avatar: require('@/img/avatars/NeilDocherty.jpg').default, + }, + }, + { + content: + 'Tailwind unified our css work across different client projects more than any other methodology, while letting us keep our bespoke designs, and even improved performance and stability of our sites.', + url: 'https://twitter.com/skttl/status/1468669231864725514', + author: { + name: 'Søren Kottal', + role: 'Developer', + avatar: require('@/img/avatars/skttl.jpg').default, + }, + }, + { + content: 'Tailwind is the only way to work with CSS at scale. ', + url: 'https://twitter.com/aarondfrancis/status/1468696321607544840', + author: { + name: 'Aaron Francis', + role: 'Developer', + avatar: require('@/img/avatars/aarondfrancis.jpg').default, + }, + }, + { + content: + "TailwindCSS has single-handedly been the biggest and most impactful change for our team's development workflow. I'm glad I live in a universe where Tailwind exists.", + url: 'https://twitter.com/Megasanjay/status/1468674483099557890', + author: { + name: 'Sanjay Soundarajan', + role: 'Front-End Developer', + avatar: require('@/img/avatars/Megasanjay.jpg').default, + }, + }, + { + content: + 'Tailwind solves a complex problem in an elegant way. It provides a ready-to-use UI, all while not compromising on enabling developers to quickly build anything imaginable.', + url: 'https://twitter.com/brentgarner/status/1468676369143926789', + author: { + name: 'Brent Garner', + role: 'Developer', + avatar: require('@/img/avatars/brentgarner.jpg').default, + }, + }, + ], + // Column 3 + [ + { + content: 'Skip to the end. Use @tailwindcss.', + url: 'https://twitter.com/kentcdodds/status/1468692023158796289', + author: { + name: 'Kent C. Dodds', + role: 'Developer and Educator', + avatar: require('@/img/avatars/kentcdodds.jpg').default, + }, + }, + { + content: + 'I was bad at front-end until I discovered Tailwind CSS. I have learnt a lot more about design and CSS itself after I started working with Tailwind. Creating web pages is 5x faster now.', + url: 'https://twitter.com/shrutibalasa', + author: { + name: 'Shruti Balasa', + role: 'Full Stack Web Developer & Tech Educator', + avatar: require('@/img/avatars/shrutibalasa.jpg').default, + }, + }, + { + content: "I don't use it but if I would use something I'd use Tailwind!", + url: 'https://twitter.com/levelsio/status/1288542608390856705', + author: { + name: 'Pieter Levels', + role: 'Maker', + avatar: require('@/img/avatars/levelsio.jpg').default, + }, + }, + { + content: + 'With Tailwind I can offer my clients faster turnaround times on custom WordPress themes, both for initial builds and for future revisions.', + url: 'https://twitter.com/gregsvn/status/1468667690042617857', + author: { + name: 'Greg Sullivan', + role: 'WordPress Developer', + avatar: require('@/img/avatars/gregsvn.jpg').default, + }, + }, + { + content: 'Thanks to @tailwindcss, CSS started to make sense to me.', + url: 'https://twitter.com/enunomaduro/status/1468650695104647170', + author: { + name: 'Nuno Maduro', + role: 'Core Team Member @laravelphp', + avatar: require('@/img/avatars/enunomaduro.jpg').default, + }, + }, + { + content: + "Tailwind clicked for me almost immediately. I can't picture myself writing another BEM class ever again. Happy user since the first public release! Productivity is at an all time high, thanks to @tailwindcss.", + url: 'https://twitter.com/igor_randj/status/1468654576576380930', + author: { + name: 'Igor Randjelovic', + role: 'Developer', + avatar: require('@/img/avatars/igor_randj.jpg').default, + }, + }, + { + content: + 'CSS has always been the hardest part of offering a digital service. It made me feel like a bad developer. Tailwind gives me confidence in web development again. Their docs are my first port of call.', + url: 'https://twitter.com/ohhdanm/status/1468653056988528643', + author: { + name: 'Dan Malone', + role: 'Founder of @mawla_io', + avatar: require('@/img/avatars/ohhdanm.jpg').default, + }, + }, + { + content: + 'I thought "Why would I need Tailwind CSS? I already know CSS and use Bootstrap", but after giving it a try I decided to switch all my projects to Tailwind.', + url: 'https://twitter.com/sertxudev/status/1468660429715030019', + author: { + name: 'Sergio Peris', + role: 'DevOps Engineer & Network Administrator', + avatar: require('@/img/avatars/sertxudev.jpg').default, + }, + }, + { + content: + 'The Tailwind docs are its real magic. It is actually better documented than CSS itself. It’s such a pleasure to use.', + url: 'https://twitter.com/zachknicker/status/1468662554658443264', + author: { + name: 'Zach Knickerbocker', + role: 'Developer', + avatar: require('@/img/avatars/zachknicker.jpg').default, + }, + }, + { + content: + "I've never felt more confident designing and styling websites and web apps than when I've used TailwindCSS.", + url: 'https://twitter.com/grossmeyer/status/1468671286415089666', + author: { + name: 'Glenn Meyer', + role: 'Developer', + avatar: require('@/img/avatars/grossmeyer.jpg').default, + }, + }, + { + content: + 'Tried it once, never looked back. Tailwindcss convert since 0.7 and it just keeps getting better and better.', + url: 'https://twitter.com/Jan_DHollander/status/1468653579405770754', + author: { + name: "Jan D'Hollander", + role: 'Front-End Developer', + avatar: require('@/img/avatars/Jan_DHollander.jpg').default, + }, + }, + { + content: + 'If you work at an agency and deal with hundreds of unique sites, each of them having their own custom CSS is a nightmare. Do your future self a favor and use Tailwind!', + url: 'https://twitter.com/waunakeesoccer1/status/1468736369757466625', + author: { + name: 'Andrew Brown', + avatar: require('@/img/avatars/waunakeesoccer1.jpg').default, + }, + }, + { + content: + 'Before Tailwind CSS I was banging my head against the wall trying to make sense of my CSS spaghetti. Now I am banging my head against the wall wondering why I didn’t try it earlier. My head hurts and my wall has a big hole in it. But at least using CSS is pleasant again!', + url: 'https://twitter.com/marckohlbrugge/status/1468731283400536071', + author: { + name: 'Marc Köhlbrugge', + avatar: require('@/img/avatars/marckohlbrugge.jpg').default, + }, + }, + { + content: + 'I was skeptical at first and resisted for a long time but after doing the first projects with Tailwind CSS this year, normal CSS just feels wrong and slow.', + url: 'https://twitter.com/davidhellmann/status/1468703979232272398', + author: { + name: 'David Hellmann', + role: 'Digital Designer & Developer', + avatar: require('@/img/avatars/davidhellmann.jpg').default, + }, + }, + { + content: + "After using Tailwind for the first time, I wondered why I used anything else. It's now my go-to CSS framework for any application, production or prototype.", + url: 'https://twitter.com/all_about_code/status/1468651643210240000', + author: { + name: 'Joshua Lowe', + role: 'Developer', + avatar: require('@/img/avatars/all_about_code.jpg').default, + }, + }, + { + content: + 'Tailwind not only made me able to focus on building great UI’s but it also improved my overall CSS skills by having such a wonderful docs site when I needed to handwrite CSS.', + url: 'https://twitter.com/joshmanders/status/1468710484396359681', + author: { + name: 'Josh Manders', + role: 'Developer', + avatar: require('@/img/avatars/joshmanders.jpg').default, + }, + }, + { + content: + 'Using Tailwind is an accelerant for rapid prototyping design systems. Strong documentation, helpful community, and instant results.', + url: 'https://twitter.com/igaenssley/status/1468674047328370690', + author: { + name: 'Ian Gaenssley', + role: 'Design Operations Lead at BetterCloud', + avatar: require('@/img/avatars/igaenssley.jpg').default, + }, + }, + { + content: + 'I instinctively hated utility CSS, but Tailwind completely converted me. It reignited my excitement for front-end development and implementing custom designs!', + url: 'https://twitter.com/jessarchercodes/status/1468743738545434626', + author: { + name: 'Jess Archer', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/jessarchercodes.png').default, + }, + }, + { + content: + 'Tailwind CSS bridges the gap between design and dev more than anything else. It reintroduces context to development, limits cognitive load with choice architecture, grants access to a token library out of the box and is incredibly easy to pickup. It helped my design career so much.', + url: 'https://twitter.com/CoreyGinnivan/status/1468698985435041794', + author: { + name: 'Corey Ginnivan', + role: 'Co-Founder of FeatureBoard', + avatar: require('@/img/avatars/CoreyGinnivan.jpg').default, + }, + }, + { + content: + "When I'm working on a project that isn't using Tailwind, first I yell, then I take a deep breath, then I run npm install tailwindcss.", + url: 'https://twitter.com/ryanchenkie/status/1468675898559840263', + author: { + name: 'Ryan Chenkie', + avatar: require('@/img/avatars/ryanchenkie.jpg').default, + }, + }, + { + content: + "Going back to a large website that doesn't use Tailwind is like hopping out of a Tesla and into my dad's rusted Minnesota farm truck. Sure, it works, but the clutch is slipping, the brakes barely work, and it's filled with old tires we're not even using anymore.", + url: 'https://twitter.com/dangayle/status/1468738215431467008', + author: { + name: 'Dan Gayle', + role: 'Senior Front-End Developer @CrateandBarrel', + avatar: require('@/img/avatars/dangayle.jpg').default, + }, + }, + { + content: + 'I pushed back hard at the mention of Tailwind initially due to the number of classes in my code however within 5 minutes or using it I was hooked and now am the annoying guy pushing Tailwind on anyone who will listen. It has simplified my dev workflow beyond measurement.', + url: 'https://twitter.com/dbrooking/status/1468718511040126982', + author: { + name: 'Dan Brooking', + role: 'Head Engineer @SubscriptionBox', + avatar: require('@/img/avatars/dbrooking.jpg').default, + }, + }, + { + content: + 'I never bothered to learn vanilla CSS because it’s a waste of time — why bother when I have Tailwind instead? Turns out I learned a ton of CSS anyway just by using Tailwind. It’s such a perfect middleground between thoughtful abstraction, while still letting you break free.', + url: 'https://twitter.com/TrevorCampbell_/status/1468739918662930432', + author: { + name: 'Trevor Campbell', + avatar: require('@/img/avatars/TrevorCampbell_.jpg').default, + }, + }, + { + content: + "Tailwind and the ecosystem around it is like a giant turbocharger for web agencies. It helps teams of developers and designers develop a shared language and system of constraints that speeds up the entire process. It's a game-changer for efficient teamwork.", + url: 'https://twitter.com/sagalbot/status/1468727120218103809', + author: { + name: 'Jeff Sagal', + role: 'Full-Stack Developer', + avatar: require('@/img/avatars/sagalbot.jpg').default, + }, + }, + { + content: + 'Tailwind provides the style of bespoke design, the constraint of a design system, and the flexibility to make it infinitely customizable, without being shoehorned into making every website look like it was cut from the same cloth.', + url: 'https://twitter.com/michaeldyrynda/status/1468720374657392645', + author: { + name: 'Michael Dyrynda', + role: 'Australian', + avatar: require('@/img/avatars/michaeldyrynda.jpg').default, + }, + }, + { + content: + 'Tailwind completely changed my freelance career by allowing me to build out completely custom designs really fast without writing any CSS.', + url: 'https://twitter.com/jasonlbeggs/status/1468666464911736835', + author: { + name: 'Jason Beggs', + role: 'Front-End Developer', + avatar: require('@/img/avatars/jasonlbeggs.jpg').default, + }, + }, + { + content: 'Using TailwindCSS will make you feel like you just unlocked a cheat code.', + url: 'https://twitter.com/dpaluy/status/1468678245327454211', + author: { + name: 'David Paluy', + role: 'CTO @Quartix', + avatar: require('@/img/avatars/dpaluy.png').default, + }, + }, + { + content: + 'Every developer I’ve convinced to give Tailwind a try has come back and said they are never going back. Every. Single. One.', + url: 'https://twitter.com/jacobgraf/status/1468931374245687298', + author: { + name: 'Jacob Graf', + role: 'Web Developer', + avatar: require('@/img/avatars/jacobgraf.jpg').default, + }, + }, + ], +] + +function Testimonial({ author, content, url, expanded }) { + let [focusable, setFocusable] = useState(true) + let ref = useRef() + + useEffect(() => { + if (ref.current.offsetTop !== 0) { + setFocusable(false) + } + }, []) + + return ( +
  • +
    +
    + {typeof content === 'string' ?

    {content}

    : content} +
    +
    + +
    +
    + {url ? ( + + + {author.name} + + ) : ( + author.name + )} +
    +
    {author.role}
    +
    +
    +
    +
    • + ) +} + +export function Testimonials() { + let ref = useRef() + let [expanded, setExpanded] = useState(false) + let [showCollapseButton, setShowCollapseButton] = useState(false) + let [transition, setTransition] = useState(false) + let { ref: inViewRef, inView } = useInView({ threshold: 0 }) + let initial = useRef(true) + + useIsomorphicLayoutEffect(() => { + if (initial.current) { + initial.current = false + return + } + if (expanded) { + ref.current.focus({ preventScroll: expanded }) + } else { + ref.current.focus() + ref.current.scrollIntoView() + } + if (expanded) { + setShowCollapseButton(false) + } + }, [expanded]) + + useEffect(() => { + setTimeout(() => setTransition(expanded), 0) + }, [expanded]) + + useEffect(() => { + if (!expanded || !inView) return + function onScroll() { + let bodyRect = document.body.getBoundingClientRect() + let rect = ref.current.getBoundingClientRect() + let middle = rect.top + rect.height / 4 - bodyRect.top - window.innerHeight / 2 + let isHalfWay = window.scrollY > middle + if (showCollapseButton && !isHalfWay) { + setShowCollapseButton(false) + } else if (!showCollapseButton && isHalfWay) { + setShowCollapseButton(true) + } + } + window.addEventListener('scroll', onScroll, { passive: true }) + return () => { + window.removeEventListener('scroll', onScroll, { passive: true }) + } + }, [expanded, showCollapseButton, inView]) + + return ( +
    +

    Testimonials

    +
    + {testimonials.map((column, i) => ( +
      + {column.map((testimonial) => ( + + ))} +
    + ))} +
    +
    + +
    +
    + ) +} \ No newline at end of file diff --git a/src/components/.ZH/home/BuildAnything.js b/src/components/.ZH/home/BuildAnything.js index a3bfadf11..57f7181bc 100644 --- a/src/components/.ZH/home/BuildAnything.js +++ b/src/components/.ZH/home/BuildAnything.js @@ -8,15 +8,19 @@ import { Widont, themeTabs, } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/build-anything.png' -import { HtmlZenGarden } from '@/components/HtmlZenGarden' +// import { HtmlZenGarden } from '@/components/HtmlZenGarden' +import { HtmlZenGarden } from '@/components/.ZH/HtmlZenGarden' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines } from '../../samples/build-anything.html?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' +// import { lines } from '../../samples/build-anything.html?highlight' +import { lines } from '../../../samples/.ZH/build-anything.html?highlight' const code = { + /*html*/ Simple: `
    @@ -25,7 +29,8 @@ const code = {

    Classic Utility Jacket

    $110.00
    -
    In stock
    + +
    有現貨
    @@ -62,9 +67,11 @@ const code = {
    -

    Free shipping on all continental US orders.

    + +

    全台灣保證24h到貨， 台北市 6h到貨

    `, + /*html*/ Playful: `
    @@ -73,7 +80,8 @@ const code = {

    Classic Utility Jacket

    $110.00
    -
    In stock
    + +
    有現貨
    @@ -110,9 +118,11 @@ const code = {
    -

    Free shipping on all continental US orders.

    + +

    全台灣保證24h到貨， 台北市 6h到貨

    `, + /*html*/ Elegant: `
    @@ -121,7 +131,8 @@ const code = {

    Classic Utility Jacket

    $350.00
    -
    In stock
    + +
    有現貨
    @@ -158,9 +169,11 @@ const code = {
    -

    Free shipping on all continental US orders.

    + +

    全台灣保證24h到貨， 台北市 6h到貨

    `, + /*html*/ Brutalist: `
    @@ -169,7 +182,8 @@ const code = {

    Retro Shoe

    $89.00
    -
    In stock
    + +
    有現貨
    @@ -206,7 +220,8 @@ const code = {
    -

    Free shipping on all continental US orders.

    + +

    全台灣保證24h到貨， 台北市 6h到貨

    `, } @@ -223,10 +238,14 @@ const classes = { } const content = { - Simple: ['/classic-utility-jacket.jpg', 'Classic Utility Jacket', '$110.00'], - Playful: ['/kids-jumpsuit.jpg', 'Kids Jumpsuit', '$39.00'], - Elegant: ['/dogtooth-style-jacket.jpg', 'DogTooth Style Jacket', '$350.00'], - Brutalist: ['/retro-shoe.jpg', 'Retro Shoe', '$89.00'], + // Simple: ['/classic-utility-jacket.jpg', 'Classic Utility Jacket', '$110.00'], + // Playful: ['/kids-jumpsuit.jpg', 'Kids Jumpsuit', '$39.00'], + // Elegant: ['/dogtooth-style-jacket.jpg', 'DogTooth Style Jacket', '$350.00'], + // Brutalist: ['/retro-shoe.jpg', 'Retro Shoe', '$89.00'], + Simple: ['/classic-utility-jacket.jpg', '經典機能性夾克', '$110.00'], + Playful: ['/kids-jumpsuit.jpg', '兒童連身裝', '$39.00'], + Elegant: ['/dogtooth-style-jacket.jpg', '韓版西裝外套', '$350.00'], + Brutalist: ['/retro-shoe.jpg', 'NIKE 復古版球鞋', '$89.00'], } export function BuildAnything() { @@ -246,17 +265,22 @@ export function BuildAnything() { - Build anything + {/* Build anything */} + 打造萬物 - Build whatever you want, seriously. + {/* Build whatever you want, seriously. */} + 你能創造你想要的一切，沒唬你 - Because Tailwind is so low-level, it never encourages you to design the same site twice. + {/* Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component - with a completely different look in the next project. + with a completely different look in the next project. */} + 因為 Tailwind 就是這麼的好上手，所以它絕不鼓勵你設計出兩次同樣的網站。 + 即使用了同個色板和尺寸，還是可以很輕易的讓你在下個專案中用同樣的元件，做出完全不同的設計。 - Get started, installation + {/* Get started, installation */} + 快點開始，安裝吧
    -

    Not into component frameworks?

    + {/*

    Not into component frameworks?

    */} +

    沒有在使用元件框架？

    - If you like to keep it old school use Tailwind's @apply directive - to extract repeated utility patterns into custom CSS classes just by copying and pasting - the list of class names. + {/* If you like to keep it old school use Tailwind's @apply directive + to extract repeated utility patterns into custom CSS classes just by copying and pasting */} + 想要保持老派格調，不想加入元件框架的世界中嗎？那用 Tailwind 的 @apply 指令把你重複的功能樣式集中到自訂的 CSS class 裡吧。 - Learn more, reusing styles + 閱讀更多關於樣式重新使用的內容
    @@ -352,7 +360,8 @@ function AtApplySection() { { 'opacity-25': inView } )} > - Weekly one-on-one + {/* Weekly one-on-one */} + 每周 1 對 1 教學
    -
    Date and time
    + {/*
    Date and time
    */} +
    日期與時間
    - -{' '} + {/* -{' '} */} + -{' '}
    -
    Location
    + {/*
    Location
    */} +
    地點
    Kitchener, ON
    -
    Description
    -
    No meeting description
    + {/*
    Description
    */} +
    案件描述
    + {/*
    No meeting description
    */} +
    無任何描述
    -
    Attendees
    + {/*
    Attendees
    */} +
    參與者
    Andrew McDonald
    @@ -388,10 +404,12 @@ function AtApplySection() {
    - Decline + {/* Decline */} + 拒絕
    - Accept + {/* Accept */} + 接案
    @@ -533,17 +551,21 @@ export function ComponentDriven() { - Component-driven + {/* Component-driven */} + 元件驅動 - Worried about duplication? Don’t be. + {/* Worried about duplication? Don’t be. */} + 擔心複用性的問題？ 免了啦 - If you're repeating the same utilities over and over and over again, all you have to do is + {/* If you're repeating the same utilities over and over and over again, all you have to do is extract them into a component or template partial and boom — you've got a single source of - truth so you can make changes in one place. + truth so you can make changes in one place. */} + 如果你想要一直、一直、一直地重複使用你的功能或設計， + 那你需要的是把它們做成元件或樣板，這樣你只要改變一次，就能應用在所有地方。 - Learn more, reusing styles + 閱讀更多關於樣式重新使用的內容
  • - New Releases + {/* New Releases */} + 新片上映
  • - Top Rated + {/* Top Rated */} + 熱門電影
  • - Vincent’s Picks + {/* Vincent’s Picks */} + 文森精選
    • @@ -601,7 +626,8 @@ export function ComponentDriven() {
    - Star rating + {/* Star rating */} + 評分 @@ -609,15 +635,18 @@ export function ComponentDriven() {
    {starRating}
    -
    Rating
    + {/*
    Rating
    */} +
    分級
    {rating}
    -
    Year
    + {/*
    Year
    */} +
    上映年份
    {year}
    -
    Genre
    + {/*
    Genre
    */} +
    類型
    -
    Runtime
    + {/*
    Runtime
    */} +
    片長
    -
    Cast
    + {/*
    Cast
    */} +
    演員陣容
    {cast}
    @@ -662,4 +693,4 @@ export function ComponentDriven() { ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js index 4f289a740..3a39a0167 100644 --- a/src/components/.ZH/home/ConstraintBased.js +++ b/src/components/.ZH/home/ConstraintBased.js @@ -1,16 +1,21 @@ import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/constraint-based.png' import defaultConfig from 'defaultConfig' import { AnimatePresence, motion } from 'framer-motion' import { useState } from 'react' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '../../GridLockup' import clsx from 'clsx' -import { lines as sizingSample } from '../../samples/sizing.html?highlight' -import { lines as colorsSample } from '../../samples/colors.html?highlight' -import { lines as typographySample } from '../../samples/typography.html?highlight' -import { lines as shadowsSample } from '../../samples/shadows.html?highlight' +// import { lines as sizingSample } from '../../samples/sizing.html?highlight' +// import { lines as colorsSample } from '../../samples/colors.html?highlight' +// import { lines as typographySample } from '../../samples/typography.html?highlight' +// import { lines as shadowsSample } from '../../samples/shadows.html?highlight' +import { lines as sizingSample } from '../../../samples/sizing.html?highlight' +import { lines as colorsSample } from '../../../samples/colors.html?highlight' +import { lines as typographySample } from '../../../samples/typography.html?highlight' +import { lines as shadowsSample } from '../../../samples/shadows.html?highlight' const tokens = { Sizing: sizingSample, @@ -272,18 +277,23 @@ export function ConstraintBased() { - Constraint-based + {/* Constraint-based */} + 以約束 (Constraint) 為基底 - An API for your design system. + 為您設計系統而生的 API - Utility classes help you work within the constraints of a system instead of littering your + {/* Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design - system. + system. */} + 功能性 class 可以約束您的系統，而不是在樣式表中填上亂七八糟的數值。 + 它們讓顏色、間距、文字版式、陰影，以及其他的一切都能井然有序的保持一致性， + 締造精良的設計系統。 - Learn more, utility-first fundamentals + {/* Learn more, utility-first fundamentals */} + 了解詳情，功能優先的基本原則
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js index 05d03c520..90833f555 100644 --- a/src/components/.ZH/home/Customization.js +++ b/src/components/.ZH/home/Customization.js @@ -7,20 +7,27 @@ import { Widont, themeTabs, } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/customization.png' import { useEffect, useRef, useState } from 'react' import tailwindColors from 'tailwindcss/colors' import { AnimatePresence, motion } from 'framer-motion' -import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' -import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' -import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' -import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' -import { Token } from '../Code' +// import { font as pallyVariable } from '../../fonts/generated/Pally-Variable.module.css' +// import { font as sourceSerifProRegular } from '../../fonts/generated/SourceSerifPro-Regular.module.css' +// import { font as ibmPlexMonoRegular } from '../../fonts/generated/IBMPlexMono-Regular.module.css' +// import { font as synonymVariable } from '../../fonts/generated/Synonym-Variable.module.css' +import { font as pallyVariable } from '../../../fonts/generated/Pally-Variable.module.css' +import { font as sourceSerifProRegular } from '../../../fonts/generated/SourceSerifPro-Regular.module.css' +import { font as ibmPlexMonoRegular } from '../../../fonts/generated/IBMPlexMono-Regular.module.css' +import { font as synonymVariable } from '../../../fonts/generated/Synonym-Variable.module.css' +// import { Token } from '../Code' +import { Token } from '@/components/Code' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { tokens } from '../../samples/customization.js?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '../../GridLockup' +// import { tokens } from '../../samples/customization.js?highlight' +import { tokens } from '../../../samples/customization.js?highlight' const defaultSampleBody = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.' @@ -93,23 +100,30 @@ export function Customization() { - Customization + {/* Customization */} + 客製化 - Extend it, tweak it, change it. + {/* Extend it, tweak it, change it. */} + 延伸、微調和改變， 隨你喜好。

    - Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally + {/* Tailwind includes an expertly crafted set of defaults out-of-the-box, but literally everything can be customized — from the color palette to the spacing scale to the box - shadows to the mouse cursor. + shadows to the mouse cursor. */} + Tailwind 包含了一組專門設計、可以直接使用的預設值， + 但是其實從色票、間距、陰影到滑鼠游標，任何東西，都是可以自訂的。

    - Use the tailwind.config.js file to craft your own design system, then let Tailwind - transform it into your own custom CSS framework. + {/* Use the tailwind.config.js file to craft your own design system, then let Tailwind + transform it into your own custom CSS framework. */} + 用 tailwind.config.js 設定檔來創造自己的設計系統， + 讓 Tailwind 來把它轉換成屬於你客製化的 CSS 框架。

    - Learn more, configuration + {/* Learn more, configuration */} + 了解詳情，關於配置的部分
    -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js index dc76c96c0..50c1d07b6 100644 --- a/src/components/.ZH/home/DarkMode.js +++ b/src/components/.ZH/home/DarkMode.js @@ -14,8 +14,10 @@ import iconUrl from '@/img/icons/home/dark-mode.png' import { addClassTokens } from '@/utils/addClassTokens' import { Token } from '@/components/Code' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { code, tokens } from '../../samples/dark-mode.html?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' +// import { code, tokens } from '../../samples/dark-mode-zh.html?highlight' +import { code, tokens } from '../../../samples/.ZH/dark-mode.html?highlight' function Sun(props) { return ( @@ -66,7 +68,8 @@ function DarkModeSwitch({ enabled, onChange }) { : 'bg-cyan-500 text-cyan-200 focus-visible:ring-cyan-600' )} > - {enabled ? 'Enable' : 'Disable'} dark mode + {/* {enabled ? 'Enable' : 'Disable'} dark mode */} + {enabled ? '開啟' : '關閉'}深色模式 - Dark mode + {/* Dark mode */} + 深色模式 - Now with Dark Mode. + {/* Now with Dark Mode. */} + 現在，有深色模式了 - Don’t want to be one of those websites that blinds people when they open it on their phone + {/* Don’t want to be one of those websites that blinds people when they open it on their phone at 2am? Enable dark mode in your configuration file then throw{' '} dark: in front of any color utility to apply it when dark mode is - active. Works for background colors, text colors, border colors, and even gradients. + active. Works for background colors, text colors, border colors, and even gradients. */} + 不想讓在凌晨兩點用手機打開你網站時的用戶眼睛被閃瞎嗎？ + 在設定文件中開啟深色模式並在任何顏色功能前加上{' '} + dark: ，這麼一來，當深色模式開啟時， + 背景顏色、文字顏色、邊框顏色甚至是漸層色都能發生變化。 - Learn more, dark mode + {/* Learn more, dark mode */} + 了解更多關於深色模式的內容
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js index b934bf95a..35390700e 100644 --- a/src/components/.ZH/home/EditorTools.js +++ b/src/components/.ZH/home/EditorTools.js @@ -6,8 +6,10 @@ import iconUrl from '@/img/icons/home/editor-tools.png' import { useInView } from 'react-intersection-observer' import colors from 'tailwindcss/colors' import dlv from 'dlv' -import { GridLockup } from '../GridLockup' -import { lines } from '../../samples/editor-tools.html?highlight' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' +// import { lines } from '../../samples/editor-tools.html?highlight' +import { lines } from '../../../samples/editor-tools.html?highlight' import clsx from 'clsx' const problems = [ @@ -312,20 +314,26 @@ export function EditorTools() { - Editor tools - World-class IDE integration. + {/* Editor tools */} + 編輯器插件 + {/* World-class IDE integration. */} + 世界級的 IDE 整合

    - Worried about remembering all of these class names? The Tailwind CSS IntelliSense - extension for VS Code has you covered. + {/* Worried about remembering all of these class names? The Tailwind CSS IntelliSense + extension for VS Code has you covered. */} + 擔心記不住所有的 class 名稱嗎？ + Tailwind CSS IntelliSense 這個 VS Code 擴充套件可以掩護你！

    - Get intelligent autocomplete suggestions, linting, class definitions and more, all - within your editor and with no configuration required. + {/* Get intelligent autocomplete suggestions, linting, class definitions and more, all + within your editor and with no configuration required. */} + 智慧的語法建議、整理以及 class 定義等，全部在你的編輯器裡，而且還不用設定。

    - Learn more, editor setup + {/* Learn more, editor setup */} + 閱讀更多關於編輯器的設定
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Footer.js b/src/components/.ZH/home/Footer.js index a1bd81282..ae4c544a6 100644 --- a/src/components/.ZH/home/Footer.js +++ b/src/components/.ZH/home/Footer.js @@ -1,7 +1,14 @@ import Link from 'next/link' -import { documentationNav } from '@/navs/documentation' +import { documentationNav } from '@/navs/.ZH/documentation' import { Logo } from '@/components/Logo' +const chineseNames = { + 'Getting Started': "起手式", + 'Core Concepts': "核心概念", + 'Customization': "客製化", + 'Community': "社群", +} + const footerNav = [ { 'Getting Started': documentationNav['Getting Started'], @@ -30,7 +37,8 @@ export function Footer() { > {Object.entries(sections).map(([title, items]) => (
    -

    {title}

    + {/*

    {title}

    */} +

    {chineseNames[title]? chineseNames[title]: title}

      {items.map((item) => (
    • @@ -51,4 +59,4 @@ export function Footer() {
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Hero.js b/src/components/.ZH/home/Hero.js index 073228426..22da9d324 100644 --- a/src/components/.ZH/home/Hero.js +++ b/src/components/.ZH/home/Hero.js @@ -8,7 +8,8 @@ import { debounce } from 'debounce' import { useMedia } from '@/hooks/useMedia' import { wait } from '@/utils/wait' import { createInViewPromise } from '@/utils/createInViewPromise' -import { tokens, code } from '../../samples/hero.html?highlight' +// import { tokens, code } from '../../samples/hero.html?highlight' +import { tokens, code } from '../../../samples/.ZH/hero.html?highlight' import colors from 'tailwindcss/colors' const CHAR_DELAY = 75 @@ -335,8 +336,11 @@ export function Hero() { > = 3} layout={layout} transition={TRANSITION}> - “Tailwind CSS is the only framework that I've seen scale on large teams. It’s - easy to customize, adapts to any design, and the build size is tiny.” + {/* “Tailwind CSS is the only framework that I've seen scale on large teams. It’s + easy to customize, adapts to any design, and the build size is tiny.” */} + 「Tailwind CSS 是我見過唯一一個可以在大型團隊中 + 擴展開來的框架。它可以輕鬆的客製化、 + 適應任何設計，而且建置後又很輕巧。」 - Staff Engineer, Algolia + {/* Staff Engineer, Algolia */} + Algolia 的主管工程師 @@ -485,4 +490,4 @@ function Layout({ left, right, pin = 'left' }) {
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js index 38220231d..b622aefe0 100644 --- a/src/components/.ZH/home/MobileFirst.js +++ b/src/components/.ZH/home/MobileFirst.js @@ -5,9 +5,11 @@ import { useEffect, useRef, useState } from 'react' import iconUrl from '@/img/icons/home/mobile-first.png' import { addClassTokens2 } from '@/utils/addClassTokens' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' -import { lines } from '../../pages/examples/mobile-first-demo' +// import { lines } from '../../pages/examples/mobile-first-demo' +import { lines } from '../../../pages/examples/mobile-first-demo' addClassTokens2(lines) @@ -144,7 +146,8 @@ function BrowserWindow({ size, onChange }) { d="M8.5 0C6.233 0 4.817 1.111 4.25 3.334c.85-1.112 1.842-1.528 2.975-1.25.647.158 1.109.618 1.62 1.127C9.68 4.041 10.643 5 12.75 5c2.267 0 3.683-1.111 4.25-3.333-.85 1.111-1.841 1.528-2.975 1.25-.647-.159-1.109-.619-1.62-1.128C11.57.96 10.607 0 8.5 0ZM4.25 5C1.983 5 .567 6.111 0 8.334c.85-1.112 1.842-1.528 2.975-1.25.647.158 1.109.618 1.62 1.127C5.43 9.041 6.393 10 8.5 10c2.267 0 3.684-1.11 4.25-3.333-.85 1.111-1.842 1.528-2.975 1.25-.647-.159-1.109-.619-1.62-1.128C7.32 5.96 6.357 5 4.25 5Z" /> -
    Tailwind UI - Official Tailwind CSS Components
    + {/*
    Tailwind UI - Official Tailwind CSS Components
    */} +
    兔兔教 X Tailwind CSS Taiwan
    -
    Workcation - Find a trip that suits you
    + {/*
    Workcation - Find a trip that suits you
    */} +
    Workcation - 找到適合你的旅行
    @@ -168,6 +172,7 @@ function BrowserWindow({ size, onChange }) { />
    + {/* Headless UI – Unstyled, fully accessible UI components */} Headless UI – Unstyled, fully accessible UI components
    @@ -250,20 +255,26 @@ export function MobileFirst() { - Mobile-first - Responsive everything. + {/* Mobile-first */} + 以行動裝置為主 + {/* Responsive everything. */} + 一切，都能是響應式的

    - Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you - build responsive designs right in your HTML instead. + {/* Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you + build responsive designs right in your HTML instead. */} + CSS 裡，有一堆令人頭痛又複雜的 media query 語法， + 所以 Tailwind 讓你直接在 HTML 建構出響應式設計。

    - Throw a screen size in front of literally any utility class and watch it magically apply - at a specific breakpoint. + {/* Throw a screen size in front of literally any utility class and watch it magically apply + at a specific breakpoint. */} + 將 {'"螢幕尺寸"'} 擺在任何功能性 class 前面，看看它在特定斷點時如何神奇的變化。

    - Learn more, responsive design + {/* Learn more, responsive design */} + 快去看看，關於響應式設計的一切
    @@ -333,4 +344,4 @@ export function MobileFirst() { /> ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js index 755f29d54..37b0d105f 100644 --- a/src/components/.ZH/home/ModernFeatures.js +++ b/src/components/.ZH/home/ModernFeatures.js @@ -7,16 +7,20 @@ import { Widont, InlineCode, } from '@/components/home/common' -import { Tabs } from '@/components/Tabs' +import { Tabs } from '@/components/.ZH/Tabs' import { CodeWindow, getClassNameForToken } from '@/components/CodeWindow' import iconUrl from '@/img/icons/home/modern-features.png' import { Fragment, useState } from 'react' import { AnimatePresence, motion } from 'framer-motion' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines as gridSample } from '../../samples/grid.html?highlight' -import { lines as transformsSample } from '../../samples/transforms.html?highlight' -import { lines as filtersSample } from '../../samples/filters.html?highlight' +// import { GridLockup } from '../GridLockup' +// import { lines as gridSample } from '../../samples/grid.html?highlight' +// import { lines as transformsSample } from '../../samples/transforms.html?highlight' +// import { lines as filtersSample } from '../../samples/filters.html?highlight' +import { GridLockup } from '@/components/GridLockup' +import { lines as gridSample } from '../../../samples/grid.html?highlight' +import { lines as transformsSample } from '../../../samples/transforms.html?highlight' +import { lines as filtersSample } from '../../../samples/filters.html?highlight' const lines = { 'CSS Grid': gridSample, @@ -111,23 +115,29 @@ export function ModernFeatures() { - Modern features + {/* Modern features */} + 現代趨勢 - Cutting-edge is our comfort zone. + {/* Cutting-edge is our comfort zone. */} + 我們，只活在尖端。

    - Tailwind is unapologetically modern, and takes advantage of all the latest and greatest - CSS features to make the developer experience as enjoyable as possible. + {/* Tailwind is unapologetically modern, and takes advantage of all the latest and greatest + CSS features to make the developer experience as enjoyable as possible. */} + Tailwind 很潮。因為它具備最新最棒的 CSS 特色，只為了讓你的開發過程輕鬆愉快。

    - We've got first-class CSS grid support, composable transforms and gradients powered by + {/* We've got first-class CSS grid support, composable transforms and gradients powered by CSS variables, support for modern state selectors like{' '} - :focus-visible, and tons more. + :focus-visible, and tons more. */} + 我們用 CSS 變數提供一流的 CSS 網格、組合式變形，和漸層，也支援像是{' '} + :focus-visible 這種的現代狀態選擇器，以及更多其他功能。

    - Learn more, grid template columns + {/* Learn more, grid template columns */} + 去了解網格排版的相關內容
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js index e25367c51..928977078 100644 --- a/src/components/.ZH/home/Performance.js +++ b/src/components/.ZH/home/Performance.js @@ -4,9 +4,12 @@ import { TabBar } from '@/components/TabBar' import iconUrl from '@/img/icons/home/performance.png' import { Fragment, useCallback, useEffect, useRef, useState } from 'react' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines as html } from '../../samples/performance.html?highlight' -import { lines as css } from '../../samples/performance.txt?highlight=css' +// import { GridLockup } from '../GridLockup' +// import { lines as html } from '../../samples/performance.html?highlight' +// import { lines as css } from '../../samples/performance.txt?highlight=css' +import { GridLockup } from '@/components/GridLockup' +import { lines as html } from '../../../samples/.ZH/performance.html?highlight' +import { lines as css } from '../../../samples/performance.txt?highlight=css' import { useInView } from 'react-intersection-observer' import { animate } from 'framer-motion' @@ -130,15 +133,20 @@ export function Performance() { - Performance - It's tiny — never ship unused CSS again. + {/* Performance */} + 效能 + {/* It's tiny — never ship unused CSS again. */} + 輕巧微小 - 不再傳送任何用不到的 CSS - Tailwind automatically removes all unused CSS when building for production, which means + {/* Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind - projects ship less than 10kB of CSS to the client. + projects ship less than 10kB of CSS to the client. */} + Tailwind 會在生產環境建置時自動移除未使用的 CSS，這代表著你最後的 CSS 內容量會盡其所能的最小化。 + 事實上，大部分的 Tailwind 專案只會對客戶端傳送小於 10kB 的 CSS。 - Learn more, optimizing for production + {/* Learn more, optimizing for production */} + 繼續閱讀關於生產環境優化的部分
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/ReadyMadeComponents.js b/src/components/.ZH/home/ReadyMadeComponents.js index 9be87475f..135ec78cd 100644 --- a/src/components/.ZH/home/ReadyMadeComponents.js +++ b/src/components/.ZH/home/ReadyMadeComponents.js @@ -2,7 +2,8 @@ import { IconContainer, Caption, BigText, Paragraph, Link, Widont } from '@/comp import iconUrl from '@/img/icons/home/ready-made-components.png' import { useInView } from 'react-intersection-observer' import { motion } from 'framer-motion' -import { GridLockup } from '../GridLockup' +// import { GridLockup } from '../GridLockup' +import { GridLockup } from '@/components/GridLockup' function AnimatedImage({ animate = false, delay = 0, ...props }) { return ( @@ -43,18 +44,23 @@ export function ReadyMadeComponents() { - Ready-made components + {/* Ready-made components */} + 現成的元件 - Move even faster with Tailwind UI. + {/* Move even faster with Tailwind UI. */} + 用 Tailwind UI 快速前進 - Tailwind UI is a collection of beautiful, fully responsive UI components, designed and + {/* Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you - want to build. + want to build. */} + Tailwind UI 集結了我們以及所有 Tailwind CSS 的創作者所設計研發的漂亮且完全響應式的 UI 元件。 + 那裏有數百個現成的範例讓你選擇，而且保證你能找到心目中想建構的完美起點。 - Learn more + {/* Learn more */} + 了解詳情
    ) -} +} \ No newline at end of file diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js index 9dab162c5..b11ce417a 100644 --- a/src/components/.ZH/home/StateVariants.js +++ b/src/components/.ZH/home/StateVariants.js @@ -13,14 +13,19 @@ import { addClassTokens2 } from '@/utils/addClassTokens' import { useEffect, useRef, useState } from 'react' import { usePrevious } from '@/hooks/usePrevious' import clsx from 'clsx' -import { GridLockup } from '../GridLockup' -import { lines } from '../../samples/state-variants.html?highlight' +// import { GridLockup } from '../GridLockup' +// import { lines } from '../../samples/state-variants-zh.html?highlight' +import { GridLockup } from '@/components/GridLockup' +import { lines } from '../../../samples/.ZH/state-variants.html?highlight' import { animate } from 'framer-motion' const projects = [ - { title: 'API Integration', category: 'Engineering' }, - { title: 'New Benefits Plan', category: 'Human Resources' }, - { title: 'Onboarding Emails', category: 'Customer Success' }, + // { title: 'API Integration', category: 'Engineering' }, + // { title: 'New Benefits Plan', category: 'Human Resources' }, + // { title: 'Onboarding Emails', category: 'Customer Success' }, + { title: 'API 整合', category: '工程' }, + { title: '薪資調整方案', category: '人資' }, + { title: '求職信', category: '顧客成功案例' }, ] const faces = [ @@ -92,19 +97,26 @@ export function StateVariants() { - State variants + {/* State variants */} + 狀態變化 - Hover and focus states? We got ’em. + {/* Hover and focus states? We got ’em. */} + 想要 hover 和 focus 的狀態？ 我們準備給你。 - Want to style something on hover? Stick hover: at the beginning + {/* Want to style something on hover? Stick hover: at the beginning of the class you want to add. Works for focus,{' '} active, disabled,{' '} focus-within, focus-visible, and even - fancy states we invented ourselves like group-hover. + fancy states we invented ourselves like group-hover. */} + 想要在滑鼠停留時有不同的樣式嗎？那就在你想用的 class 前面加上 hover:！ + 同樣，你也能加上 focus、active、 + disabled、focus-within、 + focus-visible ，甚至是我們自己發明的超酷炫狀態 group-hover。 - Learn more, handling hover, focus, and other states + {/* Learn more, handling hover, focus, and other states */} + 了解關於 hover、focus 以及其他狀態的詳細說明
    -

    Projects

    + {/*

    Projects

    */} +

    專案

    { @@ -128,7 +141,8 @@ export function StateVariants() { - New + {/* New */} + 建立
    @@ -154,7 +168,8 @@ export function StateVariants() { }} type="text" aria-label="Filter projects" - placeholder="Filter projects..." + // placeholder="Filter projects..." + placeholder="搜尋專案..." className="w-full text-sm leading-6 text-gray-900 placeholder-gray-400 rounded-md py-2 pl-10 ring-1 ring-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
    @@ -176,17 +191,20 @@ export function StateVariants() { >
    -
    Title
    + {/*
    Title
    */} +
    標題
    {project.title}
    -
    Category
    + {/*
    Category
    */} +
    分類
    {project.category}
    -
    Users
    + {/*
    Users
    */} +
    用戶
    {Array.from({ length: 5 }).map((_, j) => ( - New project + {/* New project */} + 建立專案
    @@ -290,4 +309,4 @@ export function StateVariants() { /> ) -} +} \ No newline at end of file From a3551c4458254d7aa33aa3f368abc0bfb0edb87f Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:12:43 +0800 Subject: [PATCH 34/48] add pages/ZH --- src/pages/ZH/brand.mdx | 55 + src/pages/ZH/docs/accent-color.mdx | 96 ++ src/pages/ZH/docs/adding-base-styles.mdx | 100 ++ src/pages/ZH/docs/adding-custom-styles.mdx | 517 +++++++ src/pages/ZH/docs/adding-new-utilities.mdx | 190 +++ src/pages/ZH/docs/align-content.mdx | 181 +++ src/pages/ZH/docs/align-items.mdx | 134 ++ src/pages/ZH/docs/align-self.mdx | 134 ++ src/pages/ZH/docs/animation.mdx | 307 ++++ src/pages/ZH/docs/appearance.mdx | 56 + src/pages/ZH/docs/aspect-ratio.mdx | 87 ++ src/pages/ZH/docs/backdrop-blur.mdx | 111 ++ src/pages/ZH/docs/backdrop-brightness.mdx | 111 ++ src/pages/ZH/docs/backdrop-contrast.mdx | 110 ++ src/pages/ZH/docs/backdrop-grayscale.mdx | 99 ++ src/pages/ZH/docs/backdrop-hue-rotate.mdx | 121 ++ src/pages/ZH/docs/backdrop-invert.mdx | 100 ++ src/pages/ZH/docs/backdrop-opacity.mdx | 110 ++ src/pages/ZH/docs/backdrop-saturate.mdx | 110 ++ src/pages/ZH/docs/backdrop-sepia.mdx | 100 ++ src/pages/ZH/docs/background-attachment.mdx | 93 ++ src/pages/ZH/docs/background-blend-mode.mdx | 34 + src/pages/ZH/docs/background-clip.mdx | 71 + src/pages/ZH/docs/background-color.mdx | 131 ++ src/pages/ZH/docs/background-image.mdx | 77 + src/pages/ZH/docs/background-origin.mdx | 53 + src/pages/ZH/docs/background-position.mdx | 158 ++ src/pages/ZH/docs/background-repeat.mdx | 76 + src/pages/ZH/docs/background-size.mdx | 102 ++ src/pages/ZH/docs/blur.mdx | 118 ++ src/pages/ZH/docs/border-collapse.mdx | 136 ++ src/pages/ZH/docs/border-color.mdx | 185 +++ src/pages/ZH/docs/border-radius.mdx | 188 +++ src/pages/ZH/docs/border-style.mdx | 72 + src/pages/ZH/docs/border-width.mdx | 163 ++ src/pages/ZH/docs/box-decoration-break.mdx | 67 + src/pages/ZH/docs/box-shadow-color.mdx | 93 ++ src/pages/ZH/docs/box-shadow.mdx | 128 ++ src/pages/ZH/docs/box-sizing.mdx | 150 ++ src/pages/ZH/docs/break-after.mdx | 37 + src/pages/ZH/docs/break-before.mdx | 37 + src/pages/ZH/docs/break-inside.mdx | 37 + src/pages/ZH/docs/brightness.mdx | 118 ++ src/pages/ZH/docs/browser-support.mdx | 48 + src/pages/ZH/docs/caret-color.mdx | 70 + src/pages/ZH/docs/clear.mdx | 136 ++ src/pages/ZH/docs/columns.mdx | 210 +++ src/pages/ZH/docs/configuration.mdx | 440 ++++++ src/pages/ZH/docs/container.mdx | 146 ++ src/pages/ZH/docs/content-configuration.mdx | 510 +++++++ src/pages/ZH/docs/content.mdx | 129 ++ src/pages/ZH/docs/contrast.mdx | 117 ++ src/pages/ZH/docs/cursor.mdx | 88 ++ src/pages/ZH/docs/customizing-colors.mdx | 365 +++++ src/pages/ZH/docs/customizing-spacing.mdx | 79 + src/pages/ZH/docs/dark-mode.mdx | 126 ++ src/pages/ZH/docs/display.mdx | 311 ++++ src/pages/ZH/docs/divide-color.mdx | 114 ++ src/pages/ZH/docs/divide-style.mdx | 51 + src/pages/ZH/docs/divide-width.mdx | 152 ++ src/pages/ZH/docs/drop-shadow.mdx | 113 ++ src/pages/ZH/docs/editor-setup.mdx | 33 + src/pages/ZH/docs/fill.mdx | 56 + src/pages/ZH/docs/flex-basis.mdx | 103 ++ src/pages/ZH/docs/flex-direction.mdx | 104 ++ src/pages/ZH/docs/flex-grow.mdx | 119 ++ src/pages/ZH/docs/flex-shrink.mdx | 119 ++ src/pages/ZH/docs/flex-wrap.mdx | 90 ++ src/pages/ZH/docs/flex.mdx | 167 +++ src/pages/ZH/docs/float.mdx | 99 ++ src/pages/ZH/docs/font-family.mdx | 113 ++ src/pages/ZH/docs/font-size.mdx | 161 ++ src/pages/ZH/docs/font-smoothing.mdx | 50 + src/pages/ZH/docs/font-style.mdx | 50 + src/pages/ZH/docs/font-variant-numeric.mdx | 227 +++ src/pages/ZH/docs/font-weight.mdx | 106 ++ .../ZH/docs/functions-and-directives.mdx | 277 ++++ src/pages/ZH/docs/gap.mdx | 117 ++ src/pages/ZH/docs/gradient-color-stops.mdx | 170 +++ src/pages/ZH/docs/grayscale.mdx | 97 ++ src/pages/ZH/docs/grid-auto-columns.mdx | 63 + src/pages/ZH/docs/grid-auto-flow.mdx | 48 + src/pages/ZH/docs/grid-auto-rows.mdx | 63 + src/pages/ZH/docs/grid-column.mdx | 151 ++ src/pages/ZH/docs/grid-row.mdx | 139 ++ src/pages/ZH/docs/grid-template-columns.mdx | 83 ++ src/pages/ZH/docs/grid-template-rows.mdx | 83 ++ src/pages/ZH/docs/guides/create-react-app.js | 138 ++ src/pages/ZH/docs/guides/gatsby.js | 177 +++ src/pages/ZH/docs/guides/laravel.js | 162 ++ src/pages/ZH/docs/guides/nextjs.js | 146 ++ src/pages/ZH/docs/guides/nuxtjs.js | 199 +++ src/pages/ZH/docs/guides/vite.js | 159 ++ src/pages/ZH/docs/height.mdx | 147 ++ .../ZH/docs/hover-focus-and-other-states.mdx | 1328 +++++++++++++++++ src/pages/ZH/docs/hue-rotate.mdx | 128 ++ .../ZH/docs/installation/framework-guides.js | 100 ++ src/pages/ZH/docs/installation/index.js | 146 ++ src/pages/ZH/docs/installation/play-cdn.js | 153 ++ .../ZH/docs/installation/using-postcss.js | 169 +++ src/pages/ZH/docs/invert.mdx | 99 ++ src/pages/ZH/docs/isolation.mdx | 34 + src/pages/ZH/docs/justify-content.mdx | 144 ++ src/pages/ZH/docs/justify-items.mdx | 164 ++ src/pages/ZH/docs/justify-self.mdx | 172 +++ src/pages/ZH/docs/letter-spacing.mdx | 117 ++ src/pages/ZH/docs/line-height.mdx | 140 ++ src/pages/ZH/docs/list-style-position.mdx | 63 + src/pages/ZH/docs/list-style-type.mdx | 103 ++ src/pages/ZH/docs/margin.mdx | 173 +++ src/pages/ZH/docs/max-height.mdx | 83 ++ src/pages/ZH/docs/max-width.mdx | 124 ++ src/pages/ZH/docs/min-height.mdx | 61 + src/pages/ZH/docs/min-width.mdx | 59 + src/pages/ZH/docs/mix-blend-mode.mdx | 42 + src/pages/ZH/docs/object-fit.mdx | 119 ++ src/pages/ZH/docs/object-position.mdx | 156 ++ src/pages/ZH/docs/opacity.mdx | 83 ++ .../ZH/docs/optimizing-for-production.mdx | 38 + src/pages/ZH/docs/order.mdx | 81 + src/pages/ZH/docs/outline-color.mdx | 88 ++ src/pages/ZH/docs/outline-offset.mdx | 78 + src/pages/ZH/docs/outline-style.mdx | 82 + src/pages/ZH/docs/outline-width.mdx | 80 + src/pages/ZH/docs/overflow.mdx | 453 ++++++ src/pages/ZH/docs/overscroll-behavior.mdx | 72 + src/pages/ZH/docs/padding.mdx | 168 +++ src/pages/ZH/docs/place-content.mdx | 207 +++ src/pages/ZH/docs/place-items.mdx | 184 +++ src/pages/ZH/docs/place-self.mdx | 160 ++ src/pages/ZH/docs/play-cdn.mdx | 6 + src/pages/ZH/docs/plugins.mdx | 607 ++++++++ src/pages/ZH/docs/pointer-events.mdx | 76 + src/pages/ZH/docs/position.mdx | 303 ++++ src/pages/ZH/docs/preflight.mdx | 236 +++ src/pages/ZH/docs/presets.mdx | 260 ++++ src/pages/ZH/docs/resize.mdx | 81 + src/pages/ZH/docs/responsive-design.mdx | 128 ++ src/pages/ZH/docs/reusing-styles.mdx | 331 ++++ src/pages/ZH/docs/ring-color.mdx | 83 ++ src/pages/ZH/docs/ring-offset-color.mdx | 79 + src/pages/ZH/docs/ring-offset-width.mdx | 108 ++ src/pages/ZH/docs/ring-width.mdx | 143 ++ src/pages/ZH/docs/rotate.mdx | 142 ++ src/pages/ZH/docs/saturate.mdx | 118 ++ src/pages/ZH/docs/scale.mdx | 133 ++ src/pages/ZH/docs/screen-readers.mdx | 54 + src/pages/ZH/docs/screens.mdx | 267 ++++ src/pages/ZH/docs/scroll-behavior.mdx | 36 + src/pages/ZH/docs/scroll-margin.mdx | 128 ++ src/pages/ZH/docs/scroll-padding.mdx | 114 ++ src/pages/ZH/docs/scroll-snap-align.mdx | 207 +++ src/pages/ZH/docs/scroll-snap-stop.mdx | 149 ++ src/pages/ZH/docs/scroll-snap-type.mdx | 207 +++ src/pages/ZH/docs/sepia.mdx | 98 ++ src/pages/ZH/docs/skew.mdx | 146 ++ src/pages/ZH/docs/space.mdx | 186 +++ src/pages/ZH/docs/stroke-width.mdx | 71 + src/pages/ZH/docs/stroke.mdx | 58 + src/pages/ZH/docs/table-layout.mdx | 154 ++ src/pages/ZH/docs/tailwind-cli.mdx | 8 + src/pages/ZH/docs/text-align.mdx | 85 ++ src/pages/ZH/docs/text-color.mdx | 111 ++ src/pages/ZH/docs/text-decoration-color.mdx | 86 ++ src/pages/ZH/docs/text-decoration-style.mdx | 62 + .../ZH/docs/text-decoration-thickness.mdx | 82 + src/pages/ZH/docs/text-decoration.mdx | 76 + src/pages/ZH/docs/text-indent.mdx | 105 ++ src/pages/ZH/docs/text-overflow.mdx | 87 ++ src/pages/ZH/docs/text-transform.mdx | 64 + src/pages/ZH/docs/text-underline-offset.mdx | 88 ++ src/pages/ZH/docs/theme.mdx | 374 +++++ src/pages/ZH/docs/top-right-bottom-left.mdx | 174 +++ src/pages/ZH/docs/touch-action.mdx | 87 ++ src/pages/ZH/docs/transform-origin.mdx | 104 ++ src/pages/ZH/docs/transition-delay.mdx | 79 + src/pages/ZH/docs/transition-duration.mdx | 79 + src/pages/ZH/docs/transition-property.mdx | 80 + .../ZH/docs/transition-timing-function.mdx | 79 + src/pages/ZH/docs/translate.mdx | 147 ++ src/pages/ZH/docs/upgrade-guide.mdx | 409 +++++ src/pages/ZH/docs/user-select.mdx | 97 ++ .../ZH/docs/using-with-preprocessors.mdx | 393 +++++ src/pages/ZH/docs/utility-first.mdx | 229 +++ src/pages/ZH/docs/vertical-align.mdx | 146 ++ src/pages/ZH/docs/visibility.mdx | 64 + src/pages/ZH/docs/whitespace.mdx | 134 ++ src/pages/ZH/docs/width.mdx | 171 +++ src/pages/ZH/docs/will-change.mdx | 65 + src/pages/ZH/docs/word-break.mdx | 78 + src/pages/ZH/docs/z-index.mdx | 83 ++ src/pages/index.js | 31 +- 192 files changed, 26675 insertions(+), 16 deletions(-) create mode 100644 src/pages/ZH/brand.mdx create mode 100644 src/pages/ZH/docs/accent-color.mdx create mode 100644 src/pages/ZH/docs/adding-base-styles.mdx create mode 100644 src/pages/ZH/docs/adding-custom-styles.mdx create mode 100644 src/pages/ZH/docs/adding-new-utilities.mdx create mode 100644 src/pages/ZH/docs/align-content.mdx create mode 100644 src/pages/ZH/docs/align-items.mdx create mode 100644 src/pages/ZH/docs/align-self.mdx create mode 100644 src/pages/ZH/docs/animation.mdx create mode 100644 src/pages/ZH/docs/appearance.mdx create mode 100644 src/pages/ZH/docs/aspect-ratio.mdx create mode 100644 src/pages/ZH/docs/backdrop-blur.mdx create mode 100644 src/pages/ZH/docs/backdrop-brightness.mdx create mode 100644 src/pages/ZH/docs/backdrop-contrast.mdx create mode 100644 src/pages/ZH/docs/backdrop-grayscale.mdx create mode 100644 src/pages/ZH/docs/backdrop-hue-rotate.mdx create mode 100644 src/pages/ZH/docs/backdrop-invert.mdx create mode 100644 src/pages/ZH/docs/backdrop-opacity.mdx create mode 100644 src/pages/ZH/docs/backdrop-saturate.mdx create mode 100644 src/pages/ZH/docs/backdrop-sepia.mdx create mode 100644 src/pages/ZH/docs/background-attachment.mdx create mode 100644 src/pages/ZH/docs/background-blend-mode.mdx create mode 100644 src/pages/ZH/docs/background-clip.mdx create mode 100644 src/pages/ZH/docs/background-color.mdx create mode 100644 src/pages/ZH/docs/background-image.mdx create mode 100644 src/pages/ZH/docs/background-origin.mdx create mode 100644 src/pages/ZH/docs/background-position.mdx create mode 100644 src/pages/ZH/docs/background-repeat.mdx create mode 100644 src/pages/ZH/docs/background-size.mdx create mode 100644 src/pages/ZH/docs/blur.mdx create mode 100644 src/pages/ZH/docs/border-collapse.mdx create mode 100644 src/pages/ZH/docs/border-color.mdx create mode 100644 src/pages/ZH/docs/border-radius.mdx create mode 100644 src/pages/ZH/docs/border-style.mdx create mode 100644 src/pages/ZH/docs/border-width.mdx create mode 100644 src/pages/ZH/docs/box-decoration-break.mdx create mode 100644 src/pages/ZH/docs/box-shadow-color.mdx create mode 100644 src/pages/ZH/docs/box-shadow.mdx create mode 100644 src/pages/ZH/docs/box-sizing.mdx create mode 100644 src/pages/ZH/docs/break-after.mdx create mode 100644 src/pages/ZH/docs/break-before.mdx create mode 100644 src/pages/ZH/docs/break-inside.mdx create mode 100644 src/pages/ZH/docs/brightness.mdx create mode 100644 src/pages/ZH/docs/browser-support.mdx create mode 100644 src/pages/ZH/docs/caret-color.mdx create mode 100644 src/pages/ZH/docs/clear.mdx create mode 100644 src/pages/ZH/docs/columns.mdx create mode 100644 src/pages/ZH/docs/configuration.mdx create mode 100644 src/pages/ZH/docs/container.mdx create mode 100644 src/pages/ZH/docs/content-configuration.mdx create mode 100644 src/pages/ZH/docs/content.mdx create mode 100644 src/pages/ZH/docs/contrast.mdx create mode 100644 src/pages/ZH/docs/cursor.mdx create mode 100644 src/pages/ZH/docs/customizing-colors.mdx create mode 100644 src/pages/ZH/docs/customizing-spacing.mdx create mode 100644 src/pages/ZH/docs/dark-mode.mdx create mode 100644 src/pages/ZH/docs/display.mdx create mode 100644 src/pages/ZH/docs/divide-color.mdx create mode 100644 src/pages/ZH/docs/divide-style.mdx create mode 100644 src/pages/ZH/docs/divide-width.mdx create mode 100644 src/pages/ZH/docs/drop-shadow.mdx create mode 100644 src/pages/ZH/docs/editor-setup.mdx create mode 100644 src/pages/ZH/docs/fill.mdx create mode 100644 src/pages/ZH/docs/flex-basis.mdx create mode 100644 src/pages/ZH/docs/flex-direction.mdx create mode 100644 src/pages/ZH/docs/flex-grow.mdx create mode 100644 src/pages/ZH/docs/flex-shrink.mdx create mode 100644 src/pages/ZH/docs/flex-wrap.mdx create mode 100644 src/pages/ZH/docs/flex.mdx create mode 100644 src/pages/ZH/docs/float.mdx create mode 100644 src/pages/ZH/docs/font-family.mdx create mode 100644 src/pages/ZH/docs/font-size.mdx create mode 100644 src/pages/ZH/docs/font-smoothing.mdx create mode 100644 src/pages/ZH/docs/font-style.mdx create mode 100644 src/pages/ZH/docs/font-variant-numeric.mdx create mode 100644 src/pages/ZH/docs/font-weight.mdx create mode 100644 src/pages/ZH/docs/functions-and-directives.mdx create mode 100644 src/pages/ZH/docs/gap.mdx create mode 100644 src/pages/ZH/docs/gradient-color-stops.mdx create mode 100644 src/pages/ZH/docs/grayscale.mdx create mode 100644 src/pages/ZH/docs/grid-auto-columns.mdx create mode 100644 src/pages/ZH/docs/grid-auto-flow.mdx create mode 100644 src/pages/ZH/docs/grid-auto-rows.mdx create mode 100644 src/pages/ZH/docs/grid-column.mdx create mode 100644 src/pages/ZH/docs/grid-row.mdx create mode 100644 src/pages/ZH/docs/grid-template-columns.mdx create mode 100644 src/pages/ZH/docs/grid-template-rows.mdx create mode 100644 src/pages/ZH/docs/guides/create-react-app.js create mode 100644 src/pages/ZH/docs/guides/gatsby.js create mode 100644 src/pages/ZH/docs/guides/laravel.js create mode 100644 src/pages/ZH/docs/guides/nextjs.js create mode 100644 src/pages/ZH/docs/guides/nuxtjs.js create mode 100644 src/pages/ZH/docs/guides/vite.js create mode 100644 src/pages/ZH/docs/height.mdx create mode 100644 src/pages/ZH/docs/hover-focus-and-other-states.mdx create mode 100644 src/pages/ZH/docs/hue-rotate.mdx create mode 100644 src/pages/ZH/docs/installation/framework-guides.js create mode 100644 src/pages/ZH/docs/installation/index.js create mode 100644 src/pages/ZH/docs/installation/play-cdn.js create mode 100644 src/pages/ZH/docs/installation/using-postcss.js create mode 100644 src/pages/ZH/docs/invert.mdx create mode 100644 src/pages/ZH/docs/isolation.mdx create mode 100644 src/pages/ZH/docs/justify-content.mdx create mode 100644 src/pages/ZH/docs/justify-items.mdx create mode 100644 src/pages/ZH/docs/justify-self.mdx create mode 100644 src/pages/ZH/docs/letter-spacing.mdx create mode 100644 src/pages/ZH/docs/line-height.mdx create mode 100644 src/pages/ZH/docs/list-style-position.mdx create mode 100644 src/pages/ZH/docs/list-style-type.mdx create mode 100644 src/pages/ZH/docs/margin.mdx create mode 100644 src/pages/ZH/docs/max-height.mdx create mode 100644 src/pages/ZH/docs/max-width.mdx create mode 100644 src/pages/ZH/docs/min-height.mdx create mode 100644 src/pages/ZH/docs/min-width.mdx create mode 100644 src/pages/ZH/docs/mix-blend-mode.mdx create mode 100644 src/pages/ZH/docs/object-fit.mdx create mode 100644 src/pages/ZH/docs/object-position.mdx create mode 100644 src/pages/ZH/docs/opacity.mdx create mode 100644 src/pages/ZH/docs/optimizing-for-production.mdx create mode 100644 src/pages/ZH/docs/order.mdx create mode 100644 src/pages/ZH/docs/outline-color.mdx create mode 100644 src/pages/ZH/docs/outline-offset.mdx create mode 100644 src/pages/ZH/docs/outline-style.mdx create mode 100644 src/pages/ZH/docs/outline-width.mdx create mode 100644 src/pages/ZH/docs/overflow.mdx create mode 100644 src/pages/ZH/docs/overscroll-behavior.mdx create mode 100644 src/pages/ZH/docs/padding.mdx create mode 100644 src/pages/ZH/docs/place-content.mdx create mode 100644 src/pages/ZH/docs/place-items.mdx create mode 100644 src/pages/ZH/docs/place-self.mdx create mode 100644 src/pages/ZH/docs/play-cdn.mdx create mode 100644 src/pages/ZH/docs/plugins.mdx create mode 100644 src/pages/ZH/docs/pointer-events.mdx create mode 100644 src/pages/ZH/docs/position.mdx create mode 100644 src/pages/ZH/docs/preflight.mdx create mode 100644 src/pages/ZH/docs/presets.mdx create mode 100644 src/pages/ZH/docs/resize.mdx create mode 100644 src/pages/ZH/docs/responsive-design.mdx create mode 100644 src/pages/ZH/docs/reusing-styles.mdx create mode 100644 src/pages/ZH/docs/ring-color.mdx create mode 100644 src/pages/ZH/docs/ring-offset-color.mdx create mode 100644 src/pages/ZH/docs/ring-offset-width.mdx create mode 100644 src/pages/ZH/docs/ring-width.mdx create mode 100644 src/pages/ZH/docs/rotate.mdx create mode 100644 src/pages/ZH/docs/saturate.mdx create mode 100644 src/pages/ZH/docs/scale.mdx create mode 100644 src/pages/ZH/docs/screen-readers.mdx create mode 100644 src/pages/ZH/docs/screens.mdx create mode 100644 src/pages/ZH/docs/scroll-behavior.mdx create mode 100644 src/pages/ZH/docs/scroll-margin.mdx create mode 100644 src/pages/ZH/docs/scroll-padding.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-align.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-stop.mdx create mode 100644 src/pages/ZH/docs/scroll-snap-type.mdx create mode 100644 src/pages/ZH/docs/sepia.mdx create mode 100644 src/pages/ZH/docs/skew.mdx create mode 100644 src/pages/ZH/docs/space.mdx create mode 100644 src/pages/ZH/docs/stroke-width.mdx create mode 100644 src/pages/ZH/docs/stroke.mdx create mode 100644 src/pages/ZH/docs/table-layout.mdx create mode 100644 src/pages/ZH/docs/tailwind-cli.mdx create mode 100644 src/pages/ZH/docs/text-align.mdx create mode 100644 src/pages/ZH/docs/text-color.mdx create mode 100644 src/pages/ZH/docs/text-decoration-color.mdx create mode 100644 src/pages/ZH/docs/text-decoration-style.mdx create mode 100644 src/pages/ZH/docs/text-decoration-thickness.mdx create mode 100644 src/pages/ZH/docs/text-decoration.mdx create mode 100644 src/pages/ZH/docs/text-indent.mdx create mode 100644 src/pages/ZH/docs/text-overflow.mdx create mode 100644 src/pages/ZH/docs/text-transform.mdx create mode 100644 src/pages/ZH/docs/text-underline-offset.mdx create mode 100644 src/pages/ZH/docs/theme.mdx create mode 100644 src/pages/ZH/docs/top-right-bottom-left.mdx create mode 100644 src/pages/ZH/docs/touch-action.mdx create mode 100644 src/pages/ZH/docs/transform-origin.mdx create mode 100644 src/pages/ZH/docs/transition-delay.mdx create mode 100644 src/pages/ZH/docs/transition-duration.mdx create mode 100644 src/pages/ZH/docs/transition-property.mdx create mode 100644 src/pages/ZH/docs/transition-timing-function.mdx create mode 100644 src/pages/ZH/docs/translate.mdx create mode 100644 src/pages/ZH/docs/upgrade-guide.mdx create mode 100644 src/pages/ZH/docs/user-select.mdx create mode 100644 src/pages/ZH/docs/using-with-preprocessors.mdx create mode 100644 src/pages/ZH/docs/utility-first.mdx create mode 100644 src/pages/ZH/docs/vertical-align.mdx create mode 100644 src/pages/ZH/docs/visibility.mdx create mode 100644 src/pages/ZH/docs/whitespace.mdx create mode 100644 src/pages/ZH/docs/width.mdx create mode 100644 src/pages/ZH/docs/will-change.mdx create mode 100644 src/pages/ZH/docs/word-break.mdx create mode 100644 src/pages/ZH/docs/z-index.mdx diff --git a/src/pages/ZH/brand.mdx b/src/pages/ZH/brand.mdx new file mode 100644 index 000000000..efa819570 --- /dev/null +++ b/src/pages/ZH/brand.mdx @@ -0,0 +1,55 @@ +--- +title: "Brand" +description: "Tailwind CSS brand assets and usage guidelines." +--- + +export const Layout = require('@/layouts/.ZH/DocumentationLayout').DocumentationLayout +export default require('@/layouts/.ZH/ContentsLayout').ContentsLayout + +## Trademark Usage Agreement + +The Tailwind name and logos are trademarks of Tailwind Labs Inc. + +You may not use the Tailwind name or logos in any way that could mistakenly imply any official connection with or endorsement of Tailwind Labs Inc. Any use of the Tailwind name or logos in a manner that could cause customer confusion is not permitted. + +This includes naming a product or service in a way that emphasizes the Tailwind brand, like "Tailwind Themes" or "Tailwind Studio", as well as in domain names like "tailwindkits.com". + +Instead, you must use your own brand name in a way that clearly distinguishes it from Tailwind CSS. Examples that are permitted include "ComponentStudio for Tailwind CSS" or "UtilityThemes: Templates for Tailwind CSS". + +Additionally, you may not use our trademarks for t-shirts, stickers, or other merchandise without explicit written consent. + +--- + +## Assets + +These assets are provided for use in situations like articles and video tutorials. They should not be used in any way that could be confusing for customers or imply any affiliation with Tailwind Labs Inc. + +### Mark + + + +Download mark + +### Logotype + + + +Download logotype diff --git a/src/pages/ZH/docs/accent-color.mdx b/src/pages/ZH/docs/accent-color.mdx new file mode 100644 index 000000000..f48cc3320 --- /dev/null +++ b/src/pages/ZH/docs/accent-color.mdx @@ -0,0 +1,96 @@ +--- +title: "Accent Color" +description: "Utilities for controlling the accented color of a form control." +--- + +import utilities from 'utilities?plugin=accentColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the accent color + +Use the `accent-{color}` utilities to change the accent color of an element. This is helpful for styling elements like checkboxes and radio groups by overriding the browser's default color. + + +
    + + +
    +     + +```html + + +``` + +### Changing the opacity + +While it's possible to control the opacity of the accent color using the color opacity modifier, the `rgba()` alpha value is only supported in Firefox at this time *(last tested November 2021)*. + +```html + Emerald +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + +Note, while it's possible to set an accent color using the `hover` and `active` modifiers, the resulting color will be slightly different than what you set, as browsers automatically adjust the brightness of the accent color for these two states. + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/adding-base-styles.mdx b/src/pages/ZH/docs/adding-base-styles.mdx new file mode 100644 index 000000000..f102eef7a --- /dev/null +++ b/src/pages/ZH/docs/adding-base-styles.mdx @@ -0,0 +1,100 @@ +--- +title: Adding Base Styles +description: Best practices for adding your own global base styles on top of Tailwind. +--- + +Base (or global) styles are the styles at the beginning of a stylesheet that set useful defaults for basic HTML elements like `` tags, headings, etc. or apply opinionated resets like the popular [box-sizing reset](https://www.paulirish.com/2012/box-sizing-border-box-ftw/). + +Tailwind includes a useful set of base styles out of the box that we call [Preflight](/docs/preflight), which is really just [modern-normalize](https://github.com/sindresorhus/modern-normalize) plus a thin layer of additional more opinionated styles. + +Preflight is a great starting point for most projects, but if you'd ever like to add your own additional base styles, here are some recommendations for doing it idiomatically. + +--- + +## Using classes in your HTML + +If you just want to apply some global styling to the `html` or `body` elements, consider just adding existing classes to those elements in your HTML instead of writing new CSS: + +```html + + + + + + + +``` + +--- + +## Using CSS + +If you want to apply some base styles to specific elements, the easiest way is to simply add them in your CSS. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } +} +``` + +By using the `@layer` directive, Tailwind will automatically move those styles to the same place as `@tailwind base` to avoid unintended specificity issues. + +Using the `@layer` directive will also instruct Tailwind to consider those styles for purging when purging the `base` layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. + +It's a good idea to use [@apply](/docs/functions-and-directives#apply) or [theme()](/docs/functions-and-directives#theme) to define these styles to avoid accidentally deviating from your design system. + +### @font-face rules + +You can use the same approach to add your `@font-face` rules for any custom fonts you're using: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + @font-face { + font-family: Proxima Nova; + font-weight: 400; + src: url(/fonts/proxima-nova/400-regular.woff) format("woff"); + } + @font-face { + font-family: Proxima Nova; + font-weight: 500; + src: url(/fonts/proxima-nova/500-medium.woff) format("woff"); + } +} +``` + +--- + +## Using a plugin + +You can also add base styles by [writing a plugin](/docs/plugins#adding-base-styles) and using the `addBase` function: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addBase, theme }) { + addBase({ + 'h1': { fontSize: theme('fontSize.2xl') }, + 'h2': { fontSize: theme('fontSize.xl') }, + 'h3': { fontSize: theme('fontSize.lg') }, + }) + }) + ] +} +``` + +Any styles added using `addBase` will be inserted into the `base` layer alongside Tailwind's other base styles. diff --git a/src/pages/ZH/docs/adding-custom-styles.mdx b/src/pages/ZH/docs/adding-custom-styles.mdx new file mode 100644 index 000000000..f7b1d9dd4 --- /dev/null +++ b/src/pages/ZH/docs/adding-custom-styles.mdx @@ -0,0 +1,517 @@ +--- +title: Adding Custom Styles +description: Best practices for adding your own custom styles to Tailwind. +--- + +import { TipGood, TipBad, TipCompat, TipInfo } from '@/components/Tip' + +Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you. + +Tailwind has been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework. + +This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS, and extending the framework with plugins. + +## Customizing your theme + +If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations to the `theme` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + sm: '480px', + md: '768px', + lg: '976px', + xl: '1440px', + }, + colors: { + 'blue': '#1fb6ff', + 'pink': '#ff49db', + 'orange': '#ff7849', + 'green': '#13ce66', + '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', + } + } + } +} +``` + +Learn more about customizing your theme in the [Theme Configuration](/docs/theme) documentation. + +--- + +## Using arbitrary values + +While you can usually build the bulk of a well-crafted design using a constrained set of design tokens, once in a while you need to break out of those constraints to get things pixel-perfect. + +When you find yourself really needing something like `top: 117px` to get a background image in just the right spot, use Tailwind's square bracket notation to generate a class on the fly with any arbitrary value: + +```html +
    + +
    +``` + +This is basically like inline styles, with the major benefit that you can combine it with interactive modifiers like `hover` and responsive modifiers like `lg`: + +```html +
    + +
    +``` + +This works for everything in the framework, including things like background colors, font sizes, pseudo-element content, and more: + +```html +
    + +
    +``` + +### Arbitrary properties + +If you ever need to use a CSS property that Tailwind doesn't include a utility for out of the box, you can also use square bracket notation to write completely arbitrary CSS: + +```html +
    + +
    +``` + +This is _really_ like inline styles, but again with the benefit that you can use modifiers: + +```html +
    + +
    +``` + +This can be useful for things like CSS variables as well, especially when they need to change under different conditions: + +```html +
    + +
    +``` + +### Handling whitespace + +When an arbitrary value needs to contain a space, use an underscore (`_`) instead and Tailwind will automatically convert it to a space at build-time: + +```html +
    + +
    +``` + +In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs: + +```html +
    + +
    +``` + +In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won't convert it to a space: + +```html +
    + +
    +``` + +### Resolving ambiguities + +Many utilities in Tailwind share a common namespace but map to different CSS properties. For example `text-lg` and `text-black` both share the `text-` namespace, but one is for `font-size` and the other is for `color`. + +When using arbitrary values, Tailwind can generally handle this ambiguity automatically based on the value you pass in: + +```html + +
    ...
    + + +
    ...
    +``` + +Sometimes it really is ambiguous though, for example when using CSS variables: + +```html +
    ...
    +``` + +In these situations, you can "hint" the underlying type to Tailwind by adding a [CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types) before the value: + +```html + +
    ...
    + + +
    ...
    +``` + +--- + +## Using CSS and @layer + +When you need to add truly custom CSS rules to a Tailwind project, the easiest approach is to just add the custom CSS to your stylesheet: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +.my-custom-style { + /* ... */ +} +``` + +For more power, you can also use the `@layer` directive to add styles to Tailwind's `base`, `components`, and `utilities` layers: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .my-custom-style { + /* ... */ + } +} +``` + + +
    + Why does Tailwind group styles into "layers"? + +In CSS, the order of the rules in your stylesheet decides which declaration wins when two selectors have the same specificity: + +```css +.btn { + background: blue; + /* ... */ +} + +.bg-black { + background: black; +} +``` + +Here, both buttons will be black since `.bg-black` comes after `.btn` in the CSS: + +```html + + +``` + +To manage this, Tailwind organizes the styles it generates into three different "layers" — a concept popularized by [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/#what-is-itcss). + +- The `base` layer is for things like reset rules or default styles applied to plain HTML elements. +- The `components` layer is for class-based styles that you want to be able to override with utilities. +- The `utilities` layer is for small, single-purpose classes that should always take precedence over any other styles. + +Being explicit about this makes it easier to understand how your styles will interact with each other, and using the `@layer` directive lets you control the final declaration order while still organizing your actual code in whatever way you like. + +
    + +The `@layer` directive helps you control declaration order by automatically relocating your styles to the corresponding `@tailwind` directive, and also enables features like [modifiers](#using-modifiers-with-custom-css) and [tree-shaking](#removing-unused-custom-css) for your own custom CSS. + +### Adding base styles + +If you just want to set some defaults for the page (like the text color, background color, or font family), the easiest option is just adding some classes to the `html` or `body` elements: + +```html + + + + +``` + +This keeps your base styling decisions in your markup alongside all of your other styles, instead of hiding them in a separate file. + +If you want to add your own default base styles for specific HTML elements, use the `@layer` directive to add those styles to Tailwind's `base` layer: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } + /* ... */ +} +``` + +Use the [`theme`](/docs/functions-and-directives#theme) function or [`@apply`](/docs/functions-and-directives#apply) directive when adding custom base styles if you want to refer to any of the values defined in your [theme](/docs/theme). + +### Adding component classes + +Use the `components` layer for any more complicated classes you want to add to your project that you'd still like to be able to override with utility classes. + +Traditionally these would be classes like `card`, `btn`, `badge` — that kind of thing. + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .card { + background-color: theme('colors.white'); + border-radius: theme('borderRadius.lg'); + padding: theme('spacing.6'); + box-shadow: theme('boxShadow.xl'); + } + /* ... */ +} +``` + +By defining component classes in the `components` layer, you can still use utility classes to override them when necessary: + +```html + +
    + +
    +``` + +Using Tailwind you probably don't need these types of classes as often as you think. Read our guide on [Reusing Styles](/docs/reusing-styles) for our recommendations. + +The `components` layer is also a good place to put custom styles for any third-party components you're using: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .select2-dropdown { + @apply rounded-b-lg shadow-md; + } + .select2-search { + @apply border border-gray-300 rounded; + } + .select2-results__group { + @apply text-lg font-bold text-gray-900; + } + /* ... */ +} +``` + +Use the [`theme`](/docs/functions-and-directives#theme) function or [`@apply`](/docs/functions-and-directives#apply) directive when adding custom component styles if you want to refer to any of the values defined in your [theme](/docs/theme). + +### Adding custom utilities + +Add any of your own custom utility classes to Tailwind's `utilities` layer: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .content-auto { + content-visibility: auto; + } +} +``` + +This can be useful when there's a CSS feature you'd like to use in your project that Tailwind doesn't include utilities for out of the box. + +### Using modifiers with custom CSS + +Any custom styles you add to Tailwind with `@layer` will automatically support Tailwind's modifier syntax for handling things like hover states, responsive breakpoints, dark mode, and more. + +```css CSS +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .content-auto { + content-visibility: auto; + } +} +``` + +```html HTML +
    + +
    +``` + +Learn more about how these modifiers work in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +### Removing unused custom CSS + +Any custom styles you add to the `base`, `components`, or `utilities` layers will only be included in your compiled CSS if those styles are actually used in your HTML. + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + /* This won't be included in your compiled CSS unless you actually use it */ + .card { + /* ... */ + } +} +``` + +If you want to add some custom CSS that should always be included, add it to your stylesheet without using the `@layer` directive: + +```css main.css +@tailwind base; +@tailwind components; + +/* This will always be included in your compiled CSS */ +.card { + /* ... */ +} + +@tailwind utilities; +``` + +Make sure to put your custom styles where they need to go to get the precedence behavior you want. In the example above, we've added the `.card` class before `@tailwind utilities` to make sure utilities can still override it. + +### Using multiple CSS files + +If you are writing a lot of CSS and organizing it into multiple files, make sure those files are combined into a single stylesheet before processing them with Tailwind, or you'll see errors about using `@layer` without the corresponding `@tailwind` directive. + +The easiest way to do this is using the [postcss-import](https://github.com/postcss/postcss-import) plugin: + +```diff-js postcss.config.js + module.exports = { + plugins: { ++ 'postcss-import': {}, + tailwindcss: {}, + autoprefixer: {}, + } + } +``` + +Learn more in our [build-time imports](/docs/using-with-preprocessors#build-time-imports) documentation. + +### Layers and per-component CSS + +Component frameworks like Vue and Svelte support adding per-component styles within a ` +``` + +This is because under-the-hood, frameworks like Vue and Svelte are processing every single ` +``` + +You lose the ability to control the precedence of your styles, but unfortunately that's totally out of our control because of how these tools work. + +Our recommendation is that you just don't use component styles like this at all and instead use Tailwind the way it's intended to be used — as a single global stylesheet where you use the classes directly in your HTML: + +Use Tailwind's utilities instead of component styles + +```html Card.svelte +
    + +
    +``` + + +--- + +## Writing plugins + +You can also add custom styles to your project using Tailwind's plugin system instead of using a CSS file: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + // ... + plugins: [ + plugin(function ({ addBase, addComponents, addUtilities, theme }) { + addBase({ + 'h1': { + fontSize: theme('fontSize.2xl'), + } + 'h2': { + fontSize: theme('fontSize.xl'), + } + }) + addComponents({ + '.card': { + backgroundColor: theme('colors.white'); + borderRadius: theme('borderRadius.lg'); + padding: theme('spacing.6'); + boxShadow: theme('boxShadow.xl'); + } + }) + + addUtilities({ + '.content-auto': { + contentVisibility: 'auto', + } + }) + }) + ] +} +``` + +Learn more about writing your own plugins in the [Plugins](/docs/plugins) documentation. diff --git a/src/pages/ZH/docs/adding-new-utilities.mdx b/src/pages/ZH/docs/adding-new-utilities.mdx new file mode 100644 index 000000000..9f56f69ed --- /dev/null +++ b/src/pages/ZH/docs/adding-new-utilities.mdx @@ -0,0 +1,190 @@ +--- +title: Adding New Utilities +description: Extending Tailwind with your own custom utility classes. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you may run into situations where you need to add a few of your own. + +Deciding on the best way to extend a framework can be paralyzing, so here are some best practices to help you add your own utilities in the most idiomatic way possible. + +--- + +## Using CSS + +The easiest way to add your own utilities to Tailwind is to simply add them to your CSS. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + .scroll-snap-none { + scroll-snap-type: none; + } + .scroll-snap-x { + scroll-snap-type: x; + } + .scroll-snap-y { + scroll-snap-type: y; + } +} +``` + +By using the `@layer` directive, Tailwind will automatically move those styles to the same place as `@tailwind utilities` to avoid unintended specificity issues. + +Using the `@layer` directive will also instruct Tailwind to consider those styles for purging when purging the `utilities` layer. Read our [documentation on optimizing for production](/docs/optimizing-for-production) for more details. + +### Generating responsive variants + +If you'd like to generate [responsive variants](/docs/responsive-design) of your own utilities based on the breakpoints defined in your `tailwind.config.js` file, wrap your utilities in the `@variants` directive and add `responsive` to the list of variants: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants responsive { + .scroll-snap-none { + scroll-snap-type: none; + } + .scroll-snap-x { + scroll-snap-type: x; + } + .scroll-snap-y { + scroll-snap-type: y; + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different breakpoints: + +```html + +
    +``` + +Learn more about responsive utilities in the [responsive design documentation](/docs/responsive-design). + +### Generating dark mode variants + +If you'd like to generate [dark mode variants](/docs/dark-mode) of your own utilities, first make sure `darkMode` is set to either `media` or `class` in your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + darkMode: 'media' + // ... +} +``` + +Next, wrap your utilities in the `@variants` directive and add `dark` to the list of variants: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants dark { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different states: + +```html +
    +``` + +Learn more about dark mode utilities in the [dark mode documentation](/docs/dark-mode). + +### Generating state variants + +If you'd like to create [state variants](/docs/hover-focus-and-other-states) for your own utilities, wrap your utilities in the `@variants` directive and list the variants you'd like to enable: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer utilities { + @variants hover, focus { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } + } +} +``` + +Tailwind will automatically generate prefixed versions of each custom utility that you can use to conditionally apply those styles at different states: + +```html +
    +``` + +State variants are generated in the same order you list them in the `@variants` directive, so if you'd like one variant to take precedence over another, make sure you list that one last: + +```css +/* Focus will take precedence over hover */ +@variants hover, focus { + .filter-grayscale { + filter: grayscale(100%); + } + /* ... */ +} + +/* Hover will take precedence over focus */ +@variants focus, hover { + .filter-grayscale { + filter: grayscale(100%); + } + /* ... */ +} +``` + +Learn more about state variants in the [state variants documentation](/docs/hover-focus-and-other-states). + +--- + +## Using a plugin + +In addition to adding new utility classes directly in your CSS files, you can also add utilities to Tailwind by writing your own plugin: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities }) { + const newUtilities = { + '.filter-none': { + filter: 'none', + }, + '.filter-grayscale': { + filter: 'grayscale(100%)', + }, + } + + addUtilities(newUtilities, ['responsive', 'hover']) + }) + ] +} + +``` + +This can be a good choice if you want to publish your custom utilities as a library or make it easier to share them across multiple projects. + +Learn more in the [utility plugin documentation](/docs/plugins#adding-utilities). diff --git a/src/pages/ZH/docs/align-content.mdx b/src/pages/ZH/docs/align-content.mdx new file mode 100644 index 000000000..a4b59e918 --- /dev/null +++ b/src/pages/ZH/docs/align-content.mdx @@ -0,0 +1,181 @@ +--- +title: "Align Content" +description: "Utilities for controlling how rows are positioned in multi-row flex and grid containers." +--- + +import utilities from 'utilities?plugin=alignContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `content-start` to pack rows in a container against the start of the cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Center + +Use `content-center` to pack rows in a container in the center of the cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### End + +Use `content-end` to pack rows in a container against the end of the cross axis: + + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space between + +Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space around + +Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +### Space evenly + +Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/align-items.mdx b/src/pages/ZH/docs/align-items.mdx new file mode 100644 index 000000000..b5a10534f --- /dev/null +++ b/src/pages/ZH/docs/align-items.mdx @@ -0,0 +1,134 @@ +--- +title: "Align Items" +description: "Utilities for controlling how flex and grid items are positioned along a container's cross axis." +--- + +import utilities from 'utilities?plugin=alignItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Stretch + +Use `items-stretch` to stretch items to fill the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Start + +Use `items-start` to align items to the start of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `items-center` to align items along the center of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `items-end` to align items to the end of the container's cross axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Baseline + +Use `items-baseline` to align items along the container's cross axis such that all of their baselines align: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/align-self.mdx b/src/pages/ZH/docs/align-self.mdx new file mode 100644 index 000000000..e9cd72250 --- /dev/null +++ b/src/pages/ZH/docs/align-self.mdx @@ -0,0 +1,134 @@ +--- +title: "Align Self" +description: "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis." +--- + +import utilities from 'utilities?plugin=alignSelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `self-auto` to align an item based on the value of the container's `align-items` property: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Start + +Use `self-start` to align an item to the start of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `self-center` to align an item along the center of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `self-end` to align an item to the end of the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Stretch + +Use `self-stretch` to stretch an item to fill the container's cross axis, despite the container's `align-items` value: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/animation.mdx b/src/pages/ZH/docs/animation.mdx new file mode 100644 index 000000000..f765ce7ab --- /dev/null +++ b/src/pages/ZH/docs/animation.mdx @@ -0,0 +1,307 @@ +--- +title: "Animation" +description: "Utilities for animating elements with CSS animations." +--- + +import redent from 'redent' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + scroll: true, + custom: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    Class
    +     		+
    Properties
    +
    + animate-none + + animation: none; +
    + animate-spin + + {redent(` + animation: spin 1s linear infinite;\n + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + `).trim()} +
    + animate-ping + + {redent(` + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n + @keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } + } + `).trim()} +
    + animate-pulse + + {redent(` + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n + @keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: .5; + } + } + `).trim()} +
    + animate-bounce + + {redent(` + animation: bounce 1s infinite;\n + @keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: translateY(0); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + } + `).trim()} +
    + ), +} + +## Basic usage + +### Spin + +Add the `animate-spin` utility to add a linear spin animation to elements like loading indicators. + + +
    + +
    +     + +```html + +``` + +### Ping + +Add the `animate-ping` utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges. + + +
    + + + + + + + +
    +     + +```html + + + + +``` + +### Pulse + +Add the `animate-pulse` utility to make an element gently fade in and out — useful for things like skeleton loaders. + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` + +### Bounce + +Add the `animate-bounce` utility to make an element bounce up and down — useful for things like "scroll down" indicators. + + +
    +
    + + + +
    +
    +     + +```html + + + +``` + +### Prefers-reduced-motion + +For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants: + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +Animations by their very nature tend to be highly project-specific. **The animations we include by default are best thought of as helpful examples**, and you're encouraged to customize your animations to better suit your needs. + +By default, Tailwind provides utilities for four different example animations, as well as the `animate-none` utility. You can customize these values by editing `theme.animation` or `theme.extend.animation` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ animation: { ++ 'spin-slow': 'spin 3s linear infinite', ++ } + } + } + } +``` + +To add new animation `@keyframes`, use the `keyframes` section of your theme configuration: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ keyframes: { ++ wiggle: { ++ '0%, 100%': { transform: 'rotate(-3deg)' }, ++ '50%': { transform: 'rotate(3deg)' }, ++ } ++ } + } + } + } +``` + +You can then reference these keyframes by name in the `animation` section of your theme configuration: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ animation: { ++ wiggle: 'wiggle 1s ease-in-out infinite', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/appearance.mdx b/src/pages/ZH/docs/appearance.mdx new file mode 100644 index 000000000..e7b63f3ee --- /dev/null +++ b/src/pages/ZH/docs/appearance.mdx @@ -0,0 +1,56 @@ +--- +title: "Appearance" +description: "Utilities for suppressing native form control styling." +--- + +import utilities from 'utilities?plugin=appearance' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Removing default element appearance + +Use `appearance-none` to reset any browser specific styling on an element. This utility is often used when creating [custom form components](/docs/examples/forms). + + +
    +
    + +
    + Default browser styles applied +
    +
    +
    + +
    + Default styles removed +
    +
    +
    +     + +```html + + + +``` diff --git a/src/pages/ZH/docs/aspect-ratio.mdx b/src/pages/ZH/docs/aspect-ratio.mdx new file mode 100644 index 000000000..2e2e12d62 --- /dev/null +++ b/src/pages/ZH/docs/aspect-ratio.mdx @@ -0,0 +1,87 @@ +--- +title: "Aspect Ratio" +description: "Utilities for controlling the aspect ratio of an element." +--- + +import utilities from 'utilities?plugin=aspectRatio' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the aspect ratio + +Use the `aspect-{ratio}` utilities to set the desired aspect ratio of an element. + + + + + +```html + +``` + +Tailwind doesn't include a large set of aspect ratio values out of the box since it's easier to just use arbitrary values. See the [arbitrary values](#arbitrary-values) section for more information. + +### Browser support + +The `aspect-{ratio}` utilities use the native `aspect-ratio` CSS property, which was not supported in Safari until version 15. Until Safari 15 is popularized, Tailwind's [aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) plugin is a good alternative. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides a minimal set of `aspect-ratio` utilities. You can customize these values by editing `theme.aspectRatio` or `theme.extend.aspectRatio` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { + aspectRatio: { ++ '4/3': '4 / 3', + }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/backdrop-blur.mdx b/src/pages/ZH/docs/backdrop-blur.mdx new file mode 100644 index 000000000..d4651f9f1 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-blur.mdx @@ -0,0 +1,111 @@ +--- +title: "Backdrop Blur" +description: "Utilities for applying backdrop blur filters to an element." +--- + +import utilities from 'utilities?plugin=backdropBlur' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + filterRules: ([utility]) => utility !== '.backdrop-blur-0', + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-blur'], + } + }, +} + +## Basic usage + +### Blurring behind an element + +Use the `backdrop-blur-{amount?}` utilities to control an element’s backdrop blur. + + +
    +
    +
    +

    backdrop-blur-sm

    +
    +
    + +
    +
    +
    +
    +

    backdrop-blur-md

    +
    +
    + +
    +
    +
    +
    +

    backdrop-blur-xl

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-blur` utilities. You can customize these values by editing `theme.backdropBlur` or `theme.extend.backdropBlur` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropBlur: { ++ xs: '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-brightness.mdx b/src/pages/ZH/docs/backdrop-brightness.mdx new file mode 100644 index 000000000..084a6d281 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-brightness.mdx @@ -0,0 +1,111 @@ +--- +title: "Backdrop Brightness" +description: "Utilities for applying backdrop brightness filters to an element." +--- + +import utilities from 'utilities?plugin=backdropBrightness' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-brightness'], + } + }, +} + +## Basic usage + +### Controlling backdrop brightness + +Use the `backdrop-brightness-{amount?}` utilities to control an element's backdrop brightness. + + +
    +
    +
    +

    backdrop-brightness-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-brightness-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-brightness-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-brightness` utilities. You can customize these values by editing `theme.backdropBrightness` or `theme.extend.backdropBrightness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropBrightness: { ++ 25: '.25', ++ 175: '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-contrast.mdx b/src/pages/ZH/docs/backdrop-contrast.mdx new file mode 100644 index 000000000..9f63e5e47 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-contrast.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Contrast" +description: "Utilities for applying backdrop contrast filters to an element." +--- + +import utilities from 'utilities?plugin=backdropContrast' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-contrast'], + } + }, +} + +## Basic usage + +### Controlling backdrop contrast + +Use the `backdrop-contrast-{amount?}` utilities to control an element's backdrop contrast. + + +
    +
    +
    +

    backdrop-contrast-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-contrast-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-contrast-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-contrast` utilities. You can customize these values by editing `theme.backdropContrast` or `theme.extend.backdropContrast` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropContrast: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-grayscale.mdx b/src/pages/ZH/docs/backdrop-grayscale.mdx new file mode 100644 index 000000000..92499a751 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-grayscale.mdx @@ -0,0 +1,99 @@ +--- +title: "Backdrop Grayscale" +description: "Utilities for applying backdrop grayscale filters to an element." +--- + +import utilities from 'utilities?plugin=backdropGrayscale' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-grayscale'], + } + }, +} + +## Basic usage + +### Making an element grayscale + +Use the `backdrop-grayscale` and `backdrop-grayscale-0` utilities to control whether an element's backdrop should be rendered as grayscale or in full color. + + +
    +
    +
    +

    backdrop-grayscale-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-grayscale

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-grayscale` utilities. You can customize these values by editing `theme.backdropGrayscale` or `theme.extend.backdropGrayscale` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropGrayscale: { ++ 50: '.5', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-hue-rotate.mdx b/src/pages/ZH/docs/backdrop-hue-rotate.mdx new file mode 100644 index 000000000..199892d3b --- /dev/null +++ b/src/pages/ZH/docs/backdrop-hue-rotate.mdx @@ -0,0 +1,121 @@ +--- +title: "Backdrop Hue Rotate" +description: "Utilities for applying backdrop hue-rotate filters to an element." +--- + +import utilities from 'utilities?plugin=backdropHueRotate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-hue-rotate'], + } + }, +} + +## Basic usage + +### Rotating the backdrop's hue + +Use the `backdrop-hue-rotate-{amount}` utilities to rotate the hue of an element's backdrop. + + +
    +
    +
    +

    backdrop-hue-rotate-90

    +
    +
    + +
    +
    +
    +
    +

    backdrop-hue-rotate-180

    +
    +
    + +
    +
    +
    +
    +

    -backdrop-hue-rotate-60

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Using negative values + +To use a negative backdrop hue rotate value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-hue-rotate` utilities. You can customize these values by editing `theme.backdropHueRotate` or `theme.extend.backdropHueRotate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropHueRotate: { ++ '-270': '-270deg', ++ 270: '270deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-invert.mdx b/src/pages/ZH/docs/backdrop-invert.mdx new file mode 100644 index 000000000..9b16e5a25 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-invert.mdx @@ -0,0 +1,100 @@ +--- +title: "Backdrop Invert" +description: "Utilities for applying backdrop invert filters to an element." +--- + +import utilities from 'utilities?plugin=backdropInvert' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-invert'], + } + }, +} + +## Basic usage + +### Inverting an element's backdrop + +Use the `backdrop-invert` and `backdrop-invert-0` utilities to control whether an element should be rendered with inverted backdrop colors or normally. + + +
    +
    +
    +

    backdrop-invert-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-invert

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-invert` utilities. You can customize these values by editing `theme.backdropInvert` or `theme.extend.backdropInvert` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropInvert: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-opacity.mdx b/src/pages/ZH/docs/backdrop-opacity.mdx new file mode 100644 index 000000000..422a73229 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-opacity.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Opacity" +description: "Utilities for applying backdrop opacity filters to an element." +--- + +import utilities from 'utilities?plugin=backdropOpacity' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-opacity'], + } + }, +} + +## Basic usage + +### Controlling opacity of backdrop filters + +Use the `backdrop-opacity-{amount}` utilities to control the opacity of other backdrop filters applied to an element. + + +
    +
    +
    +

    backdrop-opacity-10

    +
    +
    + +
    +
    +
    +
    +

    backdrop-opacity-60

    +
    +
    + +
    +
    +
    +
    +

    backdrop-opacity-95

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-opacity` utilities. You can customize these values by editing `theme.backdropOpacity` or `theme.extend.backdropOpacity` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropOpacity: { ++ 15: '.15', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-saturate.mdx b/src/pages/ZH/docs/backdrop-saturate.mdx new file mode 100644 index 000000000..fb3cd06dd --- /dev/null +++ b/src/pages/ZH/docs/backdrop-saturate.mdx @@ -0,0 +1,110 @@ +--- +title: "Backdrop Saturate" +description: "Utilities for applying backdrop saturation filters to an element." +--- + +import utilities from 'utilities?plugin=backdropSaturate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-saturate'], + } + }, +} + +## Basic usage + +### Changing backdrop saturation + +Use the `saturate-{amount}` utilities to control an element's backdrop saturation. + + +
    +
    +
    +

    backdrop-saturate-50

    +
    +
    + +
    +
    +
    +
    +

    backdrop-saturate-125

    +
    +
    + +
    +
    +
    +
    +

    backdrop-saturate-200

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-saturate` utilities. You can customize these values by editing `theme.backdropSaturate` or `theme.extend.backdropSaturate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropSaturate: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/backdrop-sepia.mdx b/src/pages/ZH/docs/backdrop-sepia.mdx new file mode 100644 index 000000000..f6ed92b71 --- /dev/null +++ b/src/pages/ZH/docs/backdrop-sepia.mdx @@ -0,0 +1,100 @@ +--- +title: "Backdrop Sepia" +description: "Utilities for applying backdrop sepia filters to an element." +--- + +import utilities from 'utilities?plugin=backdropSepia' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingBackdropFilters } from '@/components/RemovingBackdropFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'backdrop-filter': properties['--tw-backdrop-sepia'], + } + }, +} + +## Basic usage + +### Adding backdrop sepia filters + +Use the `backdrop-sepia` and `backdrop-sepia-0` utilities to control whether an element's backdrop should be rendered as sepia or in full color. + + +
    +
    +
    +

    backdrop-sepia-0

    +
    +
    + +
    +
    +
    +
    +

    backdrop-sepia

    +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing backdrop filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `backdrop-sepia` utilities. You can customize these values by editing `theme.backdropSepia` or `theme.extend.backdropSepia` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backdropSepia: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-attachment.mdx b/src/pages/ZH/docs/background-attachment.mdx new file mode 100644 index 000000000..e90b5f914 --- /dev/null +++ b/src/pages/ZH/docs/background-attachment.mdx @@ -0,0 +1,93 @@ +--- +title: "Background Attachment" +description: "Utilities for controlling how a background image behaves when scrolling." +--- + +import utilities from 'utilities?plugin=backgroundAttachment' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Fixed + +Use `bg-fixed` to fix the background image relative to the viewport. + + +
    +
    +
    +
    +
    My trip to the summit
    +
    November 16, 2021 · 4 min read
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +

    Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +
    +
    +
    +     + +```html +
    +``` + +### Local + +Use `bg-local` to scroll the background image with the container and the viewport. + + +
    +
    +
    +
    +
    +

    "Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day."

    +
    — Newman
    +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Scroll + +Use `bg-scroll` to scroll the background image with the viewport, but not with the container. + + +
    +
    +
    +
    +
    +

    "Because the mail never stops. It just keeps coming and coming and coming, there's never a let-up. It's relentless. Every day it piles up more and more and more. And you gotta get it out but the more you get it out the more it keeps coming in. And then the barcode reader breaks and it's Publisher's Clearing House day."

    +
    — Newman
    +
    +
    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-blend-mode.mdx b/src/pages/ZH/docs/background-blend-mode.mdx new file mode 100644 index 000000000..6666a69b2 --- /dev/null +++ b/src/pages/ZH/docs/background-blend-mode.mdx @@ -0,0 +1,34 @@ +--- +title: "Background Blend Mode" +description: "Utilities for controlling how an element's background image should blend with its background color." +--- + +import utilities from 'utilities?plugin=backgroundBlendMode' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background blend mode + +Use the `bg-blend-{mode}` utilities to control how an element's background image(s) should blend with its background color. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-clip.mdx b/src/pages/ZH/docs/background-clip.mdx new file mode 100644 index 000000000..1ebc95614 --- /dev/null +++ b/src/pages/ZH/docs/background-clip.mdx @@ -0,0 +1,71 @@ +--- +title: "Background Clip" +description: "Utilities for controlling the bounding box of an element's background." +--- + +import utilities from 'utilities?plugin=backgroundClip' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background clip + +Use the `bg-clip-{keyword}` utilities to control the bounding box of an element's background. + + +
    +
    +

    bg-clip-border

    +
    +
    +
    +

    bg-clip-padding

    +
    +
    +
    +

    bg-clip-content

    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +### Cropping to text + +Use `bg-clip-text` to crop an element's background to match the shape of the text. Useful for effects where you want a background image to be visible through the text. + + +
    + + Hello world + +
    +     + +```html +
    + + Hello world + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-color.mdx b/src/pages/ZH/docs/background-color.mdx new file mode 100644 index 000000000..a6867d600 --- /dev/null +++ b/src/pages/ZH/docs/background-color.mdx @@ -0,0 +1,131 @@ +--- +title: "Background Color" +description: "Utilities for controlling an element's background color." +--- + +import utilities from 'utilities?plugin=backgroundColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-bg-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-bg-opacity)', '') + }) + return properties + }, + preview: (css) => ( + +
    + + ), +} + +## Basic usage + +### Setting the background color + +Control the background color of an element using the `bg-{color}` utilities. + + +
    + +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's background color using the color opacity modifier. + + +
    +
    +

    bg-sky-500

    + +
    +
    +

    bg-sky-500/75

    + +
    +
    +

    bg-sky-500/50

    + +
    +
    +     + +```html + + + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + +
    +     + +```html + +``` + +     + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-image.mdx b/src/pages/ZH/docs/background-image.mdx new file mode 100644 index 000000000..c69e28d23 --- /dev/null +++ b/src/pages/ZH/docs/background-image.mdx @@ -0,0 +1,77 @@ +--- +title: "Background Image" +description: "Utilities for controlling an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundImage' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Linear gradients + +To give an element a linear gradient background, use one of the `bg-gradient-{direction}` utilities, in combination with the [gradient color stop](/docs/gradient-color-stops) utilities. + + +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes background image utilities for creating linear gradient backgrounds in eight directions. + +You can add your own background images by editing the `theme.backgroundImage` section of your `tailwind.config.js` file: + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ backgroundImage: { ++ 'hero-pattern': "url('/img/hero-pattern.svg')", ++ 'footer-texture': "url('/img/footer-texture.png')", ++ } + } + } + } +``` + +These don't just have to be gradients — they can be any background images you need. + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-origin.mdx b/src/pages/ZH/docs/background-origin.mdx new file mode 100644 index 000000000..33b9bccca --- /dev/null +++ b/src/pages/ZH/docs/background-origin.mdx @@ -0,0 +1,53 @@ +--- +title: "Background Origin" +description: "Utilities for controlling how an element's background is positioned relative to borders, padding, and content." +--- + +import utilities from 'utilities?plugin=backgroundOrigin' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background origin + +Use `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` to control where an element's background is rendered. + + +
    +
    +
    +

    bg-origin-border

    +
    +
    +
    +

    bg-origin-padding

    +
    +
    +
    +

    bg-origin-content

    +
    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-position.mdx b/src/pages/ZH/docs/background-position.mdx new file mode 100644 index 000000000..2cc03ca0e --- /dev/null +++ b/src/pages/ZH/docs/background-position.mdx @@ -0,0 +1,158 @@ +--- +title: "Background Position" +description: "Utilities for controlling the position of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundPosition' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the background position + +Use the `bg-{side}` utilities to control the position of an element's background image. + + +
    +
    +
    +

    bg-left-top

    +
    +
    + +
    +
    +
    +

    bg-top

    +
    +
    + +
    +
    +
    +

    bg-right-top

    +
    +
    + +
    +
    +
    +

    bg-left

    +
    +
    + +
    +
    +
    +

    bg-center

    +
    +
    + +
    +
    +
    +

    bg-right

    +
    +
    + +
    +
    +
    +

    bg-left-bottom

    +
    +
    + +
    +
    +
    +

    bg-bottom

    +
    +
    + +
    +
    +
    +

    bg-right-bottom

    +
    +
    + +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html +
    +``` + +     + + +### Breakpoints and media queries + + + +```html +
    +``` + +     + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `theme.backgroundPosition` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + backgroundPosition: { + bottom: 'bottom', ++ 'bottom-4': 'center bottom 1rem', + center: 'center', + left: 'left', +- 'left-bottom': 'left bottom', +- 'left-top': 'left top', + right: 'right', + 'right-bottom': 'right bottom', + 'right-top': 'right top', + top: 'top', ++ 'top-4': 'center top 1rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/background-repeat.mdx b/src/pages/ZH/docs/background-repeat.mdx new file mode 100644 index 000000000..ef8f747ea --- /dev/null +++ b/src/pages/ZH/docs/background-repeat.mdx @@ -0,0 +1,76 @@ +--- +title: "Background Repeat" +description: "Utilities for controlling the repetition of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundRepeat' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Repeat + +Use `bg-repeat` to repeat the background image both vertically and horizontally. + + +
    +
    +     + +```html +
    +``` + +### No Repeat + +Use `bg-no-repeat` when you don't want to repeat the background image. + + +
    +
    +     + +```html +
    +``` + +### Repeat Horizontally + +Use `bg-repeat-x` to repeat the background image only horizontally. + + +
    +
    +     + +```html +
    +``` + +### Repeat Vertically + +Use `bg-repeat-y` to repeat the background image only vertically. + + +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/background-size.mdx b/src/pages/ZH/docs/background-size.mdx new file mode 100644 index 000000000..3f86b3e0a --- /dev/null +++ b/src/pages/ZH/docs/background-size.mdx @@ -0,0 +1,102 @@ +--- +title: "Background Size" +description: "Utilities for controlling the background size of an element's background image." +--- + +import utilities from 'utilities?plugin=backgroundSize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `bg-auto` to display the background image at its default size. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Cover + +Use `bg-cover` to scale the background image until it fills the background layer. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +### Contain + +Use `bg-contain` to scale the background image to the outer edges without cropping or stretching. + + +
    +
    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `theme.backgroundSize` section of your config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + backgroundSize: { + 'auto': 'auto', + 'cover': 'cover', + 'contain': 'contain', ++ '50%': '50%', ++ '16': '4rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/blur.mdx b/src/pages/ZH/docs/blur.mdx new file mode 100644 index 000000000..eda1d636f --- /dev/null +++ b/src/pages/ZH/docs/blur.mdx @@ -0,0 +1,118 @@ +--- +title: "Blur" +description: "Utilities for applying blur filters to an element." +--- + +import utilities from 'utilities?plugin=blur' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + filterRules: ([utility]) => utility !== '.blur-0', + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-blur'], + } + }, +} + +## Basic usage + +### Blurring elements + +Use the `blur-{amount?}` utilities to blur an element. + + +
    +
    +
    +

    blur-none

    +
    + +
    +
    +
    +
    +

    blur-sm

    +
    + +
    +
    +
    +
    +

    blur-lg

    +
    + +
    +
    +
    +
    +

    blur-2xl

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `blur` utilities. You can customize these values by editing `theme.blur` or `theme.extend.blur` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ blur: { ++ xs: '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-collapse.mdx b/src/pages/ZH/docs/border-collapse.mdx new file mode 100644 index 000000000..a64adfc0c --- /dev/null +++ b/src/pages/ZH/docs/border-collapse.mdx @@ -0,0 +1,136 @@ +--- +title: "Border Collapse" +description: "Utilities for controlling whether table borders should collapse or be separated." +--- + +import utilities from 'utilities?plugin=borderCollapse' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Collapse + +Use `border-collapse` to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level `` tag. + + +
    +
    + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +
    + + +```html + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +``` + +### Separate + +Use `border-separate` to force each cell to display its own separate borders. + + +
    + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + +
    StateCity
    IndianaIndianapolis
    OhioColumbus
    MichiganDetroit
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/border-color.mdx b/src/pages/ZH/docs/border-color.mdx new file mode 100644 index 000000000..b99688e9f --- /dev/null +++ b/src/pages/ZH/docs/border-color.mdx @@ -0,0 +1,185 @@ +--- +title: "Border Color" +description: "Utilities for controlling the color of an element's borders." +--- + +import utilities from 'utilities?plugin=borderColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-border-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-border-opacity)', '') + }) + return properties + }, + preview: (css, { utility, className }) => ( + +
    + + ), +} + +## Basic usage + +### Setting the border color + +Control the border color of an element using the `border-{color}` utilities. + + +
    + + This field is required. +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's border color using the color opacity modifier. + + +
    +
    +

    border-indigo-500/100

    +
    +
    +
    +

    border-indigo-500/75

    +
    +
    +
    +

    border-indigo-500/50

    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    +``` + +### Individual sides + +Use the `border-{side}-{color}` utilities to set the border color for one side of an element. + + +
    +
    +

    border-t-indigo-500

    +
    +
    +
    +

    border-r-indigo-500

    +
    +
    +
    +

    border-b-indigo-500

    +
    +
    +
    +

    border-l-indigo-500

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Horizontal and vertical sides + +Use the `border-{x|y}-{color}` utilities to set the border color on two sides of an element at the same time. + + +
    +
    +

    border-x-indigo-500

    +
    +
    +
    +

    border-y-indigo-500

    +
    +
    +
    +     + +```html +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + +
    +     + +```html + +``` + +     + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-radius.mdx b/src/pages/ZH/docs/border-radius.mdx new file mode 100644 index 000000000..335e5e2c7 --- /dev/null +++ b/src/pages/ZH/docs/border-radius.mdx @@ -0,0 +1,188 @@ +--- +title: "Border Radius" +description: "Utilities for controlling the border radius of an element." +--- + +import utilities from 'utilities?plugin=borderRadius' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Rounded corners + +Use utilities like `.rounded-sm`, `.rounded`, or `.rounded-lg` to apply different border radius sizes to an element. + + +
    +
    +

    rounded

    +
    +
    +
    +

    rounded-md

    +
    +
    +
    +

    rounded-lg

    +
    +
    +
    +

    rounded-full

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Pill buttons + +Use the `rounded-full` utility to create pill buttons. + + +
    +
    +

    rounded-full

    + +
    +
    +     + +```html + +``` + +### No rounding + +Use `rounded-none` to remove an existing border radius from an element. + +This is most commonly used to remove a border radius that was applied at a smaller breakpoint. + + +
    +
    +

    rounded-none

    + +
    +
    +     + +```html + +``` + +### Rounding sides separately + +Use `rounded-{t|r|b|l}{-size?}` to only round one side of an element. + + +
    +
    +

    rounded-t-lg

    +
    +
    +
    +

    rounded-r-lg

    +
    +
    +
    +

    rounded-b-lg

    +
    +
    +
    +

    rounded-l-lg

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +## Rounding corners separately + +Use `rounded-{tl|tr|br|bl}{-size?}` to only round one corner an element. + + +
    +
    +

    rounded-tl-lg

    +
    +
    +
    +

    rounded-tr-lg

    +
    +
    +
    +

    rounded-br-lg

    +
    +
    +
    +

    rounded-bl-lg

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `theme.borderRadius` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderRadius: { + 'none': '0', +- 'sm': '0.125rem', +- DEFAULT: '0.25rem', ++ DEFAULT: '4px', +- 'md': '0.375rem', +- 'lg': '0.5rem', +- 'full': '9999px', ++ 'large': '12px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/border-style.mdx b/src/pages/ZH/docs/border-style.mdx new file mode 100644 index 000000000..837604fba --- /dev/null +++ b/src/pages/ZH/docs/border-style.mdx @@ -0,0 +1,72 @@ +--- +title: "Border Style" +description: "Utilities for controlling the style of an element's borders." +--- + +import utilities from 'utilities?plugin=borderStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the border style + +Use `border-{style}` to control an element's border style. + + +
    +
    +

    border-solid

    + +
    +
    +

    border-dashed

    + +
    +
    +

    border-dotted

    + +
    +
    +

    border-double

    + +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### No style + +Use `border-none` to remove an existing border style from an element. + +This is most commonly used to remove a border style that was applied at a smaller breakpoint. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/border-width.mdx b/src/pages/ZH/docs/border-width.mdx new file mode 100644 index 000000000..e10136fac --- /dev/null +++ b/src/pages/ZH/docs/border-width.mdx @@ -0,0 +1,163 @@ +--- +title: "Border Width" +description: "Utilities for controlling the width of an element's borders." +--- + +import utilities from 'utilities?plugin=borderWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### All sides + +Use the `border`, `.border-0`, `.border-2`, `.border-4`, or `.border-8` utilities to set the border width for all sides of an element. + + +
    +
    +

    border

    +
    +
    +
    +

    border-2

    +
    +
    +
    +

    border-4

    +
    +
    +
    +

    border-8

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Individual sides + +Use the `border-{side}`, `.border-{side}-0`, `.border-{side}-2`, `.border-{side}-4`, or `.border-{side}-8` utilities to set the border width for one side of an element. + + +
    +
    +

    border-t-4

    +
    +
    +
    +

    border-r-4

    +
    +
    +
    +

    border-b-4

    +
    +
    +
    +

    border-l-4

    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Horizontal and vertical sides + +Use the `border-{x|y}-{width}` utilities to set the border width on two sides of an element at the same time. + + +
    +
    +

    border-x-4

    +
    +
    +
    +

    border-y-4

    +
    +
    +
    +     + +```html +
    +
    +``` + +### Between elements + +You can also add borders between child elements using the `divide-{x/y}-{width}` and `divide-{color}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +Learn more in the [Divide Width](/docs/divide-width) and [Divide Color](/docs/divide-color) documentation. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides five `border-width` utilities, and the same number of utilities per side (horizontal, vertical, top, right, bottom, and left). You change, add, or remove these by editing the `theme.borderWidth` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-decoration-break.mdx b/src/pages/ZH/docs/box-decoration-break.mdx new file mode 100644 index 000000000..2bccd5d0f --- /dev/null +++ b/src/pages/ZH/docs/box-decoration-break.mdx @@ -0,0 +1,67 @@ +--- +title: "Box Decoration Break" +description: "Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages." +--- + +import utilities from 'utilities?plugin=boxDecorationBreak' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'box-decoration-clone': {'box-decoration-break': 'clone'}, + 'box-decoration-slice': {'box-decoration-break': 'slice'}, + }, +} + +## Basic usage + +### Setting the box decoration break + +Use the `box-decoration-slice` and `box-decoration-clone` utilities to control whether properties like background, border, border-image, box-shadow, clip-page, margin, and padding should be rendered as if the element were one continuous fragment, or distinct blocks. + + +
    +
    +

    box-decoration-slice

    +
    + + Hello
    + World +     +
    +
    +
    +

    box-decoration-clone

    +
    + + Hello
    + World +     +
    +
    +
    +     + +```html + + Hello
    + World +     + + Hello
    + World +     +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/box-shadow-color.mdx b/src/pages/ZH/docs/box-shadow-color.mdx new file mode 100644 index 000000000..0aa0abe1d --- /dev/null +++ b/src/pages/ZH/docs/box-shadow-color.mdx @@ -0,0 +1,93 @@ +--- +title: "Box Shadow Color" +description: "Utilities for controlling the color of a box shadow." +--- + +import utilities from 'utilities?plugin=boxShadowColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + filterProperties: (property) => property !== '--tw-shadow', +} + +## Basic usage + +### Setting the box shadow color + +Use the `shadow-{color}` utilities to change the color of an existing box shadow. By default colored shadows have an opacity of 100%, but you can adjust this using the opacity modifier. + + +
    +
    +

    shadow-cyan-500/50

    + +
    +
    +

    shadow-blue-500/50

    + +
    +
    +

    shadow-indigo-500/50

    + +
    +
    +     + +```html + + + +``` + +### Using shadows on colored backgrounds + +When using shadows on a colored background, colored shadows can often look more natural than the default black-based shadows, which tend to appear gray and washed-out. + + +
    +
    +

    Default shadow

    + +
    +
    +

    Colored shadow

    + +
    +
    +     + +```html + + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-shadow.mdx b/src/pages/ZH/docs/box-shadow.mdx new file mode 100644 index 000000000..c508b256c --- /dev/null +++ b/src/pages/ZH/docs/box-shadow.mdx @@ -0,0 +1,128 @@ +--- +title: "Box Shadow" +description: "Utilities for controlling the box shadow of an element." +--- + +import utilities from 'utilities?plugin=boxShadow' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + 'box-shadow': properties['--tw-shadow'], + } + }, +} + +## Basic usage + +### Adding an outer shadow + +Use the `shadow-sm`, `shadow`, `shadow-md`, `shadow-lg`, `shadow-xl`, or `shadow-2xl` utilities to apply different sized outer box shadows to an element. + + +
    +
    +
    +

    shadow-md

    +
    +
    +
    +

    shadow-lg

    +
    +
    +
    +

    shadow-xl

    +
    +
    +
    +

    shadow-2xl

    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +### Adding an inner shadow + +Use the `shadow-inner` utility to apply a subtle inset box shadow to an element. This can be useful for things like form controls or wells. + + +
    +
    +

    shadow-inner

    +
    +
    +
    +     + +```html +
    +``` + +### Removing the shadow + +Use `shadow-none` to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint. + + +
    +
    +

    shadow-none

    +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six drop shadow utilities, one inner shadow utility, and a utility for removing existing shadows. You can customize these values by editing `theme.boxShadow` or `theme.extend.boxShadow` in your `tailwind.config.js` file. + +If a `DEFAULT` shadow is provided, it will be used for the non-suffixed `shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `shadow-2` utility. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ boxShadow: { ++ '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/box-sizing.mdx b/src/pages/ZH/docs/box-sizing.mdx new file mode 100644 index 000000000..059bf1a4c --- /dev/null +++ b/src/pages/ZH/docs/box-sizing.mdx @@ -0,0 +1,150 @@ +--- +title: "Box Sizing" +description: "Utilities for controlling how the browser should calculate an element's total size." +--- + +import utilities from 'utilities?plugin=boxSizing' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Including borders and padding + +Use `box-border` to set an element's `box-sizing` to `border-box`, telling the browser to include the element's borders and padding when you give it a height or width. + +This means a 100px × 100px element with a 2px border and 4px of padding on all sides will be rendered as 100px × 100px, with an internal content area of 88px × 88px. + +Tailwind makes this the default for all elements in our [preflight base styles](/docs/preflight). + + +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +### Excluding borders and padding + +Use `box-content` to set an element's `box-sizing` to `content-box`, telling the browser to add borders and padding on top of the element's specified width or height. + +This means a 100px × 100px element with a 2px border and 4px of padding on all sides will actually be rendered as 112px × 112px, with an internal content area of 100px × 100px. + + +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    + +
    128px
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-after.mdx b/src/pages/ZH/docs/break-after.mdx new file mode 100644 index 000000000..0d6a00a82 --- /dev/null +++ b/src/pages/ZH/docs/break-after.mdx @@ -0,0 +1,37 @@ +--- +title: "Break After" +description: "Utilities for controlling how a column or page should break after an element." +--- + +import utilities from 'utilities?plugin=breakAfter' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-after behavior + +Use the `break-after-{value}` utilities to control how a column or page break should behave after an element. For example, use the `break-after-column` utility to force a column break after an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-before.mdx b/src/pages/ZH/docs/break-before.mdx new file mode 100644 index 000000000..34ff6f10a --- /dev/null +++ b/src/pages/ZH/docs/break-before.mdx @@ -0,0 +1,37 @@ +--- +title: "Break Before" +description: "Utilities for controlling how a column or page should break before an element." +--- + +import utilities from 'utilities?plugin=breakBefore' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-before behavior + +Use the `break-before-{value}` utilities to control how a column or page break should behave before an element. For example, use the `break-before-column` utility to force a column break before an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/break-inside.mdx b/src/pages/ZH/docs/break-inside.mdx new file mode 100644 index 000000000..f359d2b8b --- /dev/null +++ b/src/pages/ZH/docs/break-inside.mdx @@ -0,0 +1,37 @@ +--- +title: "Break Inside" +description: "Utilities for controlling how a column or page should break within an element." +--- + +import utilities from 'utilities?plugin=breakInside' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the break-inside behavior + +Use the `break-inside-{value}` utilities to control how a column or page break should behave within an element. For example, use the `break-inside-avoid-column` utility to avoid a column break within an element. + +```html +
    +

    Well, let me tell you something, ...

    +

    Sure, go ahead, laugh...

    +

    Maybe we can live without...

    +

    Look. If you think this is...

    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/brightness.mdx b/src/pages/ZH/docs/brightness.mdx new file mode 100644 index 000000000..aee0431d3 --- /dev/null +++ b/src/pages/ZH/docs/brightness.mdx @@ -0,0 +1,118 @@ +--- +title: "Brightness" +description: "Utilities for applying brightness filters to an element." +--- + +import utilities from 'utilities?plugin=brightness' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-brightness'], + } + }, +} + +## Basic usage + +### Changing element brightness + +Use the `brightness-{amount?}` utilities to control an element's brightness. + + +
    +
    +
    +

    brightness-50

    +
    + +
    +
    +
    +
    +

    brightness-100

    +
    + +
    +
    +
    +
    +

    brightness-125

    +
    + +
    +
    +
    +
    +

    brightness-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `brightness` utilities. You can customize these values by editing `theme.brightness` or `theme.extend.brightness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ brightness: { ++ 25: '.25', ++ 175: '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/browser-support.mdx b/src/pages/ZH/docs/browser-support.mdx new file mode 100644 index 000000000..2446248bb --- /dev/null +++ b/src/pages/ZH/docs/browser-support.mdx @@ -0,0 +1,48 @@ +--- +title: Browser Support +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11. + +While most of the features in Tailwind CSS will work in all modern browsers, Tailwind also includes APIs for several bleeding-edge features that aren't yet supported by all browsers, for example the `:focus-visible` pseudo-class and `backdrop-filter` utilities. + +Since Tailwind is such a low-level framework, it's easy to avoid these features if you can't use them by simply not using the utility or modifier that's not supported, much like how you just wouldn't use those CSS features in your CSS. + +The [Can I Use](https://caniuse.com/?search=focus-visible) database is a great resource when you're unsure about the support for an unfamiliar CSS feature. + +--- + +## Vendor Prefixes + +Many CSS properties require vendor prefixes to be understood by browsers, for example `background-clip: text` needs the `-webkit` prefix to work in most browsers: + +```css +.bg-clip-text { + background-clip: text; + -webkit-background-clip: text; +} +``` + +If you're using the Tailwind CLI tool, vendor prefixes like this will be added automatically. + +If not, we recommend that you use [Autoprefixer](https://github.com/postcss/autoprefixer), which is a PostCSS plugin that automatically adds any necessary vendor prefixes based on the browsers you tell it you need to support. + +To use it, install it via npm: + +```shell +npm install autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +```js +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +To learn more about specifying which browsers you need to support, check out [Browserslist](https://github.com/browserslist/browserslist) which is the standard way to define target browsers in front-end tooling. diff --git a/src/pages/ZH/docs/caret-color.mdx b/src/pages/ZH/docs/caret-color.mdx new file mode 100644 index 000000000..935c6213f --- /dev/null +++ b/src/pages/ZH/docs/caret-color.mdx @@ -0,0 +1,70 @@ +--- +title: "Caret Color" +description: "Utilities for controlling the color of the text input cursor." +--- + +import utilities from 'utilities?plugin=caretColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the caret color + +Use the `caret-{color}` utilities to change the color of the text input cursor. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/clear.mdx b/src/pages/ZH/docs/clear.mdx new file mode 100644 index 000000000..feedd6f5b --- /dev/null +++ b/src/pages/ZH/docs/clear.mdx @@ -0,0 +1,136 @@ +--- +title: "Clear" +description: "Utilities for controlling the wrapping of content around an element." +--- + +import utilities from 'utilities?plugin=clear' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Clearing left-floated elements + +Use `clear-left` to position an element below any preceding left-floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Clearing right-floated elements + +Use `clear-right` to position an element below any preceding right-floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Clearing all floated elements + +Use `clear-both` to position an element below all preceding floated elements. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +### Disabling applied clears + +Use `clear-none` to reset any clears that are applied to an element. This is the default value for the clear property. + + +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + + +

    Maybe we can live without libraries...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/columns.mdx b/src/pages/ZH/docs/columns.mdx new file mode 100644 index 000000000..20f6ed74a --- /dev/null +++ b/src/pages/ZH/docs/columns.mdx @@ -0,0 +1,210 @@ +--- +title: "Columns" +description: "Utilities for controlling the number of columns within an element." +--- + +import utilities from 'utilities?plugin=columns' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Adding based on column count + +Use the `columns-{count}` utilities to set the number of columns that should be created for the content within an element. The column width will be automatically adjusted to accommodate that number. + + +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + + + + + + +
    +
    +     + +```html +
    + + + +
    +``` + +### Adding based on column width + +Use the `columns-{width}` utilities to set the ideal column width for the content within an element, with the number of columns (the count) automatically adjusting to accommodate that value. + +This "t-shirt" scale is the same as the [max-width](/docs/max-width) scale, with the addition of `2xs` and `3xs`, since smaller columns may be desirable. + + +
    +
    +
    + +
    +
    +
    + +
    +
    + + +
    +
    +     + +```html +
    + + + +
    +``` + +### Setting the column gap + +To specify the width between columns, you can use the [gap-x](/docs/gap) utilities: + + +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + + + + + + +
    +
    +     + +```html +
    + + + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides a column count scale from `1-12` as well as a column t-shirt scale from `3xs-7xl`. You can customize these values by editing `theme.columns` or `theme.extend.columns` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ columns: { ++ '4xs': '14rem', ++ } + }, + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/configuration.mdx b/src/pages/ZH/docs/configuration.mdx new file mode 100644 index 000000000..1ef262656 --- /dev/null +++ b/src/pages/ZH/docs/configuration.mdx @@ -0,0 +1,440 @@ +--- +title: Configuration +description: A guide to configuring and customizing your Tailwind installation. +--- + +import { CorePluginReference } from '@/components/CorePluginReference' + +Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind. + +By default, Tailwind will look for an optional `tailwind.config.js` file at the root of your project where you can define any customizations. + +```js tailwind.config.js +module.exports = { + content: ['./src/**/*.{html,js}'], + theme: { + 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: { + '8xl': '96rem', + '9xl': '128rem', + }, + borderRadius: { + '4xl': '2rem', + } + } + }, +} +``` + +Every section of the config file is optional, so you only have to specify what you'd like to change. Any missing sections will fall back to Tailwind's [default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js). + +--- + +## Creating your configuration file + +Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package: + +```shell +npx tailwindcss init +``` + +This will create a minimal `tailwind.config.js` file at the root of your project: + +```js tailwind.config.js +module.exports = { + content: [], + theme: { + extend: {}, + }, + plugins: [], +} +``` + +### Using a different file name + +To use a name other than `tailwind.config.js`, pass it as an argument on the command-line: + +```shell +npx tailwindcss init tailwindcss-config.js +``` + +When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool: + +```shell +npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css +``` + +If you're using Tailwind as a PostCSS plugin, you will need to specify your custom configuration path in your PostCSS configuration: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: { config: './tailwindcss-config.js' }, + }, +} +``` + +### Generating a PostCSS configuration file + +Use the `-p` flag if you'd like to also generate a basic `postcss.config.js` file alongside your `tailwind.config.js` file: + +```shell +npx tailwindcss init -p +``` + +This will generate a `postcss.config.js` file in your project that looks like this: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + +### Scaffolding the entire default configuration + +For most users we encourage you to keep your config file as minimal as possible, and only specify the things you want to customize. + +If you'd rather scaffold a complete configuration file that includes all of Tailwind's default configuration, use the `--full` option: + +```shell +npx tailwindcss init --full +``` + +You'll get a file that matches the [default configuration file](https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js) Tailwind uses internally. + +--- + +## Configuration options + +### Content + +The `content` section is where you configure the paths to all of your HTML templates, JS components, and any other files that contain Tailwind class names. + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + // ... +} +``` + +Learn more about configuring your content sources in the [Content Configuration](/docs/content-configuration) documentation. + +### Theme + +The `theme` section is where you define your color palette, fonts, type scale, border sizes, breakpoints — anything related to the visual design of your site. + +```js tailwind.config.js +module.exports = { + // ... + theme: { + 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: { + '8xl': '96rem', + '9xl': '128rem', + }, + borderRadius: { + '4xl': '2rem', + } + } + } +} +``` + +Learn more about the default theme and how to customize it in the [theme configuration guide](/docs/theme). + +### Plugins + +The `plugins` section allows you to register plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants. + +```js tailwind.config.js +module.exports = { + // ... + plugins: [ + require('@tailwindcss/forms'), + require('@tailwindcss/aspect-ratio'), + require('@tailwindcss/typography'), + require('tailwindcss-children'), + ], +} +``` + +Learn more about writing your own plugins in the [plugin authoring guide](/docs/plugins). + +### Presets + +The `presets` section allows you to specify your own custom base configuration instead of using Tailwind's default base configuration. + +```js tailwind.config.js +module.exports = { + // ... + presets: [ + require('@acmecorp/base-tailwind-config') + ], + + // Project-specific customizations + theme: { + //... + }, +} +``` + +Learn more about presets in the [presets documentation](/docs/presets). + +### Prefix + +The `prefix` option allows you to add a custom prefix to all of Tailwind's generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts. + +For example, you could add a `tw-` prefix by setting the `prefix` option like so: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', +} +``` + +Now every class will be generated with the configured prefix: + +```css +.tw-text-left { + text-align: left; +} +.tw-text-center { + text-align: center; +} +.tw-text-right { + text-align: right; +} +/* etc. */ +``` + +It's important to understand that this prefix is added _after_ any variant modifiers. That means that classes with responsive or state modifiers like `sm:` or `hover:` will still have the responsive or state modifier *first*, with your custom prefix appearing after the colon: + +```html +
    + +
    +``` + +Prefixes are only added to classes generated by Tailwind; **no prefix will be added to your own custom classes.** + +That means if you add your own custom utility like this: + +```css +@layer utilities { + .bg-brand-gradient { /* ... */ } +} +``` + +...the generated variants will not have your configured prefix: + +```css +.bg-brand-gradient { /* ... */ } +.hover\:bg-brand-gradient:hover { /* ... */ } +``` + +If you'd like to prefix your own utilities as well, just add the prefix to the class definition: + +```css +@layer utilities { + .tw-bg-brand-gradient { /* ... */ } +} +``` + +### Important + +The `important` option lets you control whether or not Tailwind's utilities should be marked with `!important`. This can be really useful when using Tailwind with existing CSS that has high specificity selectors. + +To generate utilities as `!important`, set the `important` key in your configuration options to `true`: + +```js tailwind.config.js +module.exports = { + important: true, +} +``` + +Now all of Tailwind's utility classes will be generated as `!important`: + +```css +.leading-none { + line-height: 1 !important; +} +.leading-tight { + line-height: 1.25 !important; +} +.leading-snug { + line-height: 1.375 !important; +} +/* etc. */ +``` + +Note that any of your own custom utilities **will not** automatically be marked as `!important` by enabling this option. + +If you'd like to make your own utilities `!important`, just add `!important` to the end of each declaration yourself: + +```css +@layer utilities { + .bg-brand-gradient { + background-image: linear-gradient(#3490dc, #6574cd) !important; + } +} +``` + +#### Selector strategy + +Setting `important` to `true` can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements. In those cases, Tailwind's `!important` utilities defeat the inline styles, which can break your intended design. + +To get around this, you can set `important` to an ID selector like `#app` instead: + +```js tailwind.config.js +module.exports = { + // ... + important: '#app', +} +``` + +This configuration will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them `!important`. + +After you specify the `important` selector, you'll need to ensure that the root element of your site matches it. Using the example above, we would need to set our root element's `id` attribute to `app` in order for styles to work properly. + +After your configuration is all set up and your root element matches the selector in your Tailwind config, all of Tailwind's utilities will have a high enough specificity to defeat other classes used in your project, **without** interfering with inline styles: + +```html + + + + +
    +
    + +
    +
    +
    + + +
    + + +``` + +When using the selector strategy, be sure that the template file that includes your root selector is included in your [content configuration](/docs/optimizing-for-production#basic-usage), otherwise all of your CSS will be removed when building for production. + + +### Separator + +The `separator` option lets you customize which character should be used to separate modifiers (screen sizes, `hover`, `focus`, etc.) from utility names (`text-center`, `items-end`, etc.). + +We use a colon by default (`:`), but it can be useful to change this if you're using a templating language like [Pug](https://pugjs.org) that doesn't support special characters in class names. + +```js tailwind.config.js +module.exports = { + separator: '_', +} +``` + +### Core Plugins + +The `corePlugins` section lets you completely disable classes that Tailwind would normally generate by default if you don't need them for your project. + +To disable specific core plugins, provide an object for `corePlugins` that sets those plugins to `false`: + +```js tailwind.config.js +module.exports = { + corePlugins: { + float: false, + objectFit: false, + objectPosition: false, + } +} +``` + +If you'd like to safelist which core plugins should be enabled, provide an array that includes a list of the core plugins you'd like to use: + +```js tailwind.config.js +module.exports = { + corePlugins: [ + 'margin', + 'padding', + 'backgroundColor', + // ... + ] +} +``` + +If you'd like to disable all of Tailwind's core plugins and simply use Tailwind as a tool for processing your own custom plugins, provide an empty array: + +```js tailwind.config.js +module.exports = { + corePlugins: [] +} +``` + + +Here's a list of every core plugin for reference: + + + +--- + +## Referencing in JavaScript + +It can often be useful to reference your configuration values in your own client-side JavaScript — for example to access some of your theme values when dynamically applying inline styles in a React or Vue component. + +To make this easy, Tailwind provides a `resolveConfig` helper you can use to generate a fully merged version of your configuration object: + +```js +import resolveConfig from 'tailwindcss/resolveConfig' +import tailwindConfig from './tailwind.config.js' + +const fullConfig = resolveConfig(tailwindConfig) + +fullConfig.theme.width[4] +// => '1rem' + +fullConfig.theme.screens.md +// => '768px' + +fullConfig.theme.boxShadow['2xl'] +// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)' +``` + +Note that this will transitively pull in a lot of our build-time dependencies, resulting in bigger bundle client-side size. To avoid this, we recommend using a tool like [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval) to generate a static version of your configuration at build-time. diff --git a/src/pages/ZH/docs/container.mdx b/src/pages/ZH/docs/container.mdx new file mode 100644 index 000000000..1ddb9af7e --- /dev/null +++ b/src/pages/ZH/docs/container.mdx @@ -0,0 +1,146 @@ +--- +title: "Container" +description: "A component for fixing an element's width to the current breakpoint." +--- + +import defaultConfig from 'defaultConfig' +export const screens = defaultConfig.theme.screens + +export const classes = { + custom: ( + + + + + + + + + + + + + + + + + + + + {Object.keys(screens).map((screen) => ( + + + + + ))} + +
    +
    Class
    +     		+
    Breakpoint
    +     		+
    Properties
    +
    + container + + None + + width: 100%; +
    + {screen} ({screens[screen]}) + + max-width: {screens[screen]}; +
    + ), +} + +## Basic usage + +### Using the container + +The `container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport. + +Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.** + +To center a container, use the `mx-auto` utility: + +```html +
    + +
    +``` + +To add horizontal padding, use the `px-{size}` utilities: + +```html +
    + +
    +``` + +If you'd like to center your containers by default or include default horizontal padding, see the [customization options](#customizing) below. + +--- + +## Applying conditionally + +### Responsive variants + +The `container` class also includes responsive variants like `md:container` by default that allow you to make something behave like a container at only a certain breakpoint and up: + +```html + +
    + +
    +``` + +--- + +## Customizing + +### Centering by default + +To center containers by default, set the `center` option to `true` in the `theme.container` section of your config file: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + center: true, + }, + }, +} +``` + +### Adding horizontal padding + +To add horizontal padding by default, specify the amount of padding you'd like using the `padding` option in the `theme.container` section of your config file: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + padding: '2rem', + }, + }, +} +``` + +If you want to specify a different padding amount for each breakpoint, use an object to provide a `default` value and any breakpoint-specific overrides: + +```js tailwind.config.js +module.exports = { + theme: { + container: { + padding: { + DEFAULT: '1rem', + sm: '2rem', + lg: '4rem', + xl: '5rem', + '2xl': '6rem', + }, + }, + }, +}; +``` diff --git a/src/pages/ZH/docs/content-configuration.mdx b/src/pages/ZH/docs/content-configuration.mdx new file mode 100644 index 000000000..37280fb43 --- /dev/null +++ b/src/pages/ZH/docs/content-configuration.mdx @@ -0,0 +1,510 @@ +--- +title: Content Configuration +shortTitle: Content +description: Configuring the content sources for your project. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { SnippetGroup } from '@/components/SnippetGroup' +import { ThemeReference } from '@/components/ThemeReference' + +The `content` section of your `tailwind.config.js` file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names. + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + // ... +} +``` + +This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project. + +--- + +## Configuring source paths + +Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles. + +In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names. + +Configure the paths to all of your content files in the `content` section of your configuration file: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}' + ], + // ... +} +``` + +Paths are configured as [glob patterns](https://en.wikipedia.org/wiki/Glob_(programming)), making it easy to match all of the content files in your project without a ton of configuration: + +- Use `*` to match anything except slashes and hidden files +- Use `**` to match zero or more directories +- Use comma separate values between `{}` to match against a list of options + +Tailwind uses the [fast-glob](https://github.com/mrmlnc/fast-glob) library under-the-hood — check out their documentation other supported pattern features. + +### Pattern recommendations + +For the best performance and to avoid false positives, be as specific as possible with your content configuration. + +If you use a really broad pattern like this one, Tailwind will even scan `node_modules` for content which is probably not what you want: + +Don't use extremely broad patterns + +```js tailwind.config.js +module.exports = { + content: [ + './**/*.{html,js}', + ], + // ... +} +``` + +If you have any files you need to scan that are at the root of your project (often an `index.html` file), list that file independently so your other patterns can be more specific: + +Be specific with your content patterns + +```js tailwind.config.js +module.exports = { + content: [ + './components/**/*.{html,js}', + './pages/**/*.{html,js}', + './index.html', + ], + // ... +} +``` + +Some frameworks hide their main HTML entry point in a different place than the rest of your templates (often `public/index.html`), so if you are adding Tailwind classes to that file make sure it's included in your configuration as well: + +Don't forget your HTML entry point if applicable + +```js tailwind.config.js + module.exports = { + content: [ +> './public/index.html', + './src/**/*.{html,js}', + ], + // ... + } +``` + +If you have any JavaScript files that manipulate your HTML to add classes, make sure you include those as well: + +```js tailwind.config.js +module.exports = { + content: [ + // ... + './src/**/*.js', + ], + // ... +} +``` + +```js src/spaghetti.js +// ... +menuButton.addEventListener('click', function () { + let classList = document.getElementById('nav').classList + classList.toggle('hidden') + classList.toggle('block') +}) +// ... +``` + +It's also important that you don't scan any CSS files — configure Tailwind to scan your _templates_ where your class names are being used, never the CSS file that Tailwind is generating. + +Never include CSS files in your content configuration + +```js tailwind.config.js +module.exports = { + content: [ + './src/**/*.css', + ], + // ... +} +``` + +### Class detection in-depth + +The way Tailwind scans your source code for classes is intentionally very simple — we don't actually parse or execute any of your code in the language it's written in, we just use regular expressions to extract every string that could possibly be a class name. + +For example, here's some HTML with every potential class name string individually highlighted: + +```html +<**div** **class**="**md:flex**"> + <**div** **class**="**md:flex-shrink-0**"> + <**img** **class**="**rounded-lg** **md:w-56**" **src**="**/img/shopping.jpg**" **alt**="**Woman** **paying** **for** **a** **purchase**"> + + <**div** **class**="**mt-4** **md:mt-0** **md:ml-6**"> + <**div** **class**="**uppercase** **tracking-wide** **text-sm** **text-indigo-600** **font-bold**"> + **Marketing** + + <**a** **href**="**/get-started**" **class**="**block** **mt-1** **text-lg** **leading-tight** **font-semibold** **text-gray-900** **hover:underline**"> + **Finding** **customers** **for** **your** **new** **business** + + <**p** **class**="**mt-2** **text-gray-600**"> + **Getting** **a** **new** **business** **off** **the** **ground** **is** **a** **lot** **of** **hard** **work.** + **Here** **are** **five** **ideas** **you** **can** **use** **to** **find** **your** **first** **customers.** + + + +``` + +We don't just limit our search to `class="..."` attributes because you could be using classes anywhere, like in some JavaScript for toggling a menu: + +```html spaghetti.js + +``` + +By using this very simple approach, Tailwind works extremely reliably with any programming language, like JSX for example: + +```jsx Button.jsx +const sizes = { + md: 'px-4 py-2 rounded-md text-base', + lg: 'px-5 py-3 rounded-lg text-lg', +} + +const colors = { + indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white', + cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white', +} + +export default function Button({ color, size, children }) { + let colorClasses = colors[color] + let sizeClasses = sizes[size] + + return ( + + ) +} +``` + +The most important implication of how Tailwind extracts class names is that it will only find classes that exist _as complete unbroken strings_ in your source files. + +If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS: + +Don't construct class names dynamically + +```html +
    +``` + +In the example above, the strings `text-red-600` and `text-green-600` do not exist, so Tailwind will not generate those classes. + +Instead, make sure any class names you're using exist in full: + +Always use complete class names + +```html +
    +``` + +As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time. + + +### Working with third-party libraries + +If you're working with any third-party libraries (for example [Select2](https://select2.org/)) and styling that library with your own custom CSS, we recommend writing those styles _without_ using Tailwind's `@layer` feature: + +```css main.css +@tailwind base; +@tailwind components; + +.select2-dropdown { + @apply rounded-b-lg shadow-md; +} +.select2-search { + @apply border border-gray-300 rounded; +} +.select2-results__group { + @apply text-lg font-bold text-gray-900; +} +/* ... */ + +@tailwind utilities; +``` + +This will ensure that Tailwind _always_ includes those styles in your CSS, which is a lot easier than configuring Tailwind to scan the source code of a third-party library. + +If you've created your own reusable set of components that are styled with Tailwind and are importing them in multiple projects, make sure to configure Tailwind to scan those components for class names: + +```js tailwind.config.js + module.exports = { + content: [ + './components/**/*.{html,js}', + './pages/**/*.{html,js}', +> './node_modules/@my-company/tailwind-components/**/*.js', + ], + // ... + } +``` + +This will make sure Tailwind generates all of the CSS needed for those components as well. + +### Configuring raw content + +If for whatever reason you need to configure Tailwind to scan some raw content rather than the contents of a file, use an object with a `raw` key instead of a path: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}' + './components/**/*.{html,js}', + { raw: '
    ', extension: 'html' }, + ], + // ... +} +``` + +There aren't many valid use-cases for this — [safelisting](#safelisting-classes) is usually what you really want instead. + +--- + +## Safelisting classes + +For the smallest file size and best development experience, we highly recommend relying on your `content` configuration to tell Tailwind which classes to generate as much as possible. + +Safelisting is a last-resort, and should only be used in situations where it's impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature. + +If you need to make sure Tailwind generates certain class names that don't exist in your content files, use the `safelist` option: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}' + './components/**/*.{html,js}', + ], + safelist: [ + 'bg-red-500', + 'text-3xl', + 'lg:text-4xl', + ] + // ... +} +``` + +One example of where this can be useful is if your site displays user-generated content and you want users to be able to use a constrained set of Tailwind classes in their content that might not exist in your own site's source files. + +### Using regular expressions + +Tailwind supports pattern-based safelisting for situations where you need to safelist a lot of classes: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + safelist: [ + 'text-2xl', + 'text-3xl', + { + pattern: /bg-(red|green|blue)-(100|200|300)/, + }, + ], + // ... +} +``` + +Patterns can only match against base utility names like `/bg-red-.+/`, and won't match if the pattern includes a variant modifier like `/hover:bg-red-.+/`. + +If you want to force Tailwind to generate variants for any matched classes, include them using the `variants` option: + +```js tailwind.config.js +module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', + ], + safelist: [ + 'text-2xl', + 'text-3xl', + { + pattern: /bg-(red|green|blue)-(100|200|300)/, + variants: ['hover', 'focus'], + }, + ], + // ... +} +``` + +--- + +## Transforming source files + +If you're authoring content in a format that _compiles_ to HTML (like Markdown), it often makes sense to compile that content to HTML _before_ scanning it for class names. + +Use the `content.transform` option to transform any content matching a specific file extension before extracting classes: + +```js tailwind.config.js +const remark = require('remark') + +module.exports = { + content: { + files: ['./src/**/*.{html,md}'], + transform: { + md: (content) => { + return remark().process(content) + } + } + }, + // ... +} +``` + +When using `content.transform`, you'll need to provide your source paths using `content.files` instead of as a top-level array under `content`. + +--- + +## Customizing extraction logic + +Use the `extract` option to override the logic Tailwind uses to detect class names for specific file extensions: + +```js tailwind.config.js +module.exports = { + content: { + files: ['./src/**/*.{html,wtf}'], + extract: { + wtf: (content) => { + return content.match(/[^<>"'`\s]*/) + } + } + }, + // ... +} +``` + +This is an advanced feature and most users won't need it — the default extraction logic in Tailwind works extremely well for almost all projects. + +As with transforming, when using `content.extract`, you'll need to provide your source paths using `content.files` instead of as a top-level array under `content`. + +--- + +## Troubleshooting + +### Classes aren't generated + +If Tailwind isn't generating classes, make sure your `content` configuration is correct and matches all of the right source files. + +A common mistake is missing a file extension, for example if you're using `jsx` instead of `js` for your React components: + +```diff-js tailwind.config.js + module.exports = { + content: [ +- './src/**/*.{html,js}', ++ './src/**/*.{html,js,jsx}' + ], + // ... + } +``` + +Or creating a new folder mid-project that wasn't covered originally and forgetting to add it to your configuration: + +```diff-js tailwind.config.js + module.exports = { + content: [ + './pages/**/*.{html,js}', + './components/**/*.{html,js}', ++ './util/**/*.{html,js,js}' + ], + // ... + } +``` + +### Dynamic class names + +As outlined in [Class detection in-depth](#class-detection-in-depth), Tailwind doesn't actually run your source code and won't detect dynamically constructed class names. + +Don't construct class names dynamically + +```html +
    +``` + +Make sure you always use complete class names in your code: + +Always use complete class names + +```html +
    +``` + +### Styles rebuild in an infinite loop + +If your CSS seems to be rebuilding in an infinite loop, there's a good chance it's because your build tool doesn't support the `glob` option when [registering PostCSS dependencies](https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#31-rebuild-when-dependencies-change). + +Many build tools (such as webpack) don't support this option, and as a result we can only tell them to watch specific files or _entire directories_. We can't tell webpack to _only_ watch `*.html` files in a directory for example. + +That means that if building your CSS causes _any_ files in those directories to change, a rebuild will be triggered, even if the changed file doesn't match the extension in your glob. + +```js tailwind.config.js +module.exports = { + content: [ + // With some build tools, your CSS will rebuild + // any time *any* file in `src` changes. + './src/**/*.{html,js}', + ], + // ... +} +``` + +So if you are watching `src/**/*.html` for changes, but you are writing your CSS output file to `src/css/styles.css`, you will get an infinite rebuild loop using some tools. + +Ideally we could warn you about this in the console, but many tools support it perfectly fine (including our own CLI tool), and we have no reliable way to detect what build tool you are using. + +To solve this problem, use more specific paths in your `content` config, making sure to only include directories that won't change when your CSS builds: + +```diff-js tailwind.config.js + module.exports = { + content: [ +- './src/**/*.{html,js}', ++ './src/pages/**/*.{html,js}', ++ './src/components/**/*.{html,js}', ++ './src/layouts/**/*.{html,js}', ++ './src/index.html', + ], + // ... + } +``` + +If necessary, adjust your actual project directory structure to make sure you can target your template files without accidentally catching your CSS file or other build artifacts like manifest files. + +If you absolutely can't change your content config or directory structure, your best bet is to compile your CSS separately with a tool that has complete glob support. We recommend using [Tailwind CLI](/docs/installation), which is a fast, simple, purpose-built tool for compiling your CSS with Tailwind. + +### It just isn't working properly + +If you are experiencing weird, hard to describe issues with the output, or things just don't seem like they are working at all, there's a good chance it's due to your build tool not supporting PostCSS dependency messages properly _(or at all)_. One known example of this currently is [Stencil](https://github.com/ionic-team/stencil-postcss/issues/38). + +When you are having these sorts of issues, we recommend using [Tailwind CLI](/docs/installation) to compile your CSS separately instead of trying to integrate Tailwind into your existing tooling. + +You can use packages like `npm-run-all` or `concurrently` to compile your CSS alongside your usual development command by adding some scripts to your project like this: + +```js +// package.json +{ + // ... + "scripts": { + "start": "concurrently \"npm run start:css\" \"react-scripts start\"", + "start:css": "tailwindcss -o src/tailwind.css --watch", + "build": "npm run build:css && react-scripts build", + "build:css": "NODE_ENV=production tailwindcss -o src/tailwind.css -m", + }, +} +``` + +Either way, please be sure to [check for an existing issue](https://github.com/tailwindlabs/tailwindcss/issues) or [open a new one](https://github.com/tailwindlabs/tailwindcss/issues/new/choose) so we can figure out the problem and try to improve compatibility with whatever tool you are using. diff --git a/src/pages/ZH/docs/content.mdx b/src/pages/ZH/docs/content.mdx new file mode 100644 index 000000000..b9f4833a6 --- /dev/null +++ b/src/pages/ZH/docs/content.mdx @@ -0,0 +1,129 @@ +--- +title: "Content" +description: "Utilities for controlling the content of the before and after pseudo-elements." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'content-none': { 'content': '""' } + } +} + +## Basic usage + +### Setting a pseudo-element's content + +Use the `content-{value}` utilities along with the `before` and `after` variant modifiers to set the contents of the `::before` and `::after` pseudo-elements. + +Out of the box, `content-none` is the only available preconfigured content utility. And while you can add additional utilities by [customizing your theme](#customizing-your-theme), it generally makes more sense to just use an arbitrary value. + +Use the square bracket notation to define any arbitrary content value on the fly. + + +
    +
    + Higher resolution means more than just a better-quality image. With a Retina 6K display, Pro Display XDR gives you nearly 40 percent more screen real estate than a 5K display. +
    +
    + + +```html +Higher resolution means more than just a better-quality image. With a Retina +6K display, Pro Display XDR gives you +nearly 40 percent more screen real estate than a 5K display. +``` + +### Referencing an attribute value + +These content utilities even support CSS features like the `attr()` function, which you can use to reference a value stored in an attribute: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +### Using spaces and underscores + +Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +If you need to include an actual underscore, you can do this by escaping it with a backslash: + + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind only provides the `content-none` utility. You can customize these values by editing `theme.content` or `theme.extend.content` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ content: { ++ 'link': 'url("/icons/link.svg")', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/contrast.mdx b/src/pages/ZH/docs/contrast.mdx new file mode 100644 index 000000000..4c8d6238e --- /dev/null +++ b/src/pages/ZH/docs/contrast.mdx @@ -0,0 +1,117 @@ +--- +title: "Contrast" +description: "Utilities for applying contrast filters to an element." +--- + +import utilities from 'utilities?plugin=contrast' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-contrast'], + } + }, +} + +## Basic usage + +### Changing element contrast + +Use the `contrast-{amount?}` utilities to control an element's contrast. + + +
    +
    +
    +

    contrast-50

    +
    + +
    +
    +
    +
    +

    contrast-100

    +
    + +
    +
    +
    +
    +

    contrast-125

    +
    + +
    +
    +
    +
    +

    contrast-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `contrast` utilities. You can customize these values by editing `theme.contrast` or `theme.extend.contrast` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ contrast: { ++ 25: '.25', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/cursor.mdx b/src/pages/ZH/docs/cursor.mdx new file mode 100644 index 000000000..c0e491092 --- /dev/null +++ b/src/pages/ZH/docs/cursor.mdx @@ -0,0 +1,88 @@ +--- +title: "Cursor" +description: "Utilities for controlling the cursor style when hovering over an element." +--- + +import utilities from 'utilities?plugin=cursor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + rowStyle: ({ css }) => css, + preview: (css, { className, utility }) => ( + + + + ), +} + +## Basic Usage + +### Setting the cursor style + +Use the `cursor-{style}` to control which cursor is displayed when hovering over an element. + + +
    + + + +
    +     + +```html + + + +``` + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes `cursor` utilities for many built in options. You can customize these values by editing `theme.cursor` or `theme.extend.cursor` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ cursor: { ++ 'fancy': 'url(hand.cur), pointer', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/customizing-colors.mdx b/src/pages/ZH/docs/customizing-colors.mdx new file mode 100644 index 000000000..03aa04bff --- /dev/null +++ b/src/pages/ZH/docs/customizing-colors.mdx @@ -0,0 +1,365 @@ +--- +title: Customizing Colors +shortTitle: Colors +description: Customizing the default color palette for your project. +--- + +import { Heading } from '@/components/Heading' +import { ColorPaletteReference } from '@/components/ColorPaletteReference' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don't have your own specific branding in mind. + +
    + + + +
    + +But when you do need to customize your palette, you can configure your colors under the `colors` key in the `theme` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + // Configure your color palette here + } + } +} +``` + +When it comes to building a custom color palette, you can either [configure your own custom colors](#using-custom-colors) from scratch if you know exactly what you want, or [curate your colors](#using-the-default-colors) from our extensive included color palette if you want a head start. + +--- + +## Using custom colors + +If you'd like to completely replace the default color palette with your own custom colors, add your colors directly under the `theme.colors` section of your configuration file: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + 'white': '#ffffff', + 'purple': '#3f3cbb', + 'midnight': '#121063', + 'metal': '#565584', + 'tahiti': '#3ab7bf', + 'silver': '#evebff', + 'bubble-gum': '#ff77e9', + 'bermuda': '#78dcca', + }, + }, +} +``` + +By default, these colors will be made available everywhere in the framework where you use colors, like the [text color](/docs/text-color) utilities, [border color](/docs/border-color) utilities, [background color](/docs/text-color) utilities, and more. + +```html +
    + +
    +``` + +Don't forget to include values like `transparent` and `currentColor` if you want to use them in your project. + +### Color object syntax + +When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + 'white': '#ffffff', + 'tahiti': { + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, + // ... + }, + }, +} +``` + +The nested keys will be combined with the parent key to form class names like `bg-tahiti-400`. + +### Arbitrary values + +If you need a one-off custom color in your project, consider using Tailwind's arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme: + + +
    + +
    +     + +```html + +``` + +Learn more in the [using arbitrary values](/docs/adding-custom-styles#using-arbitrary-values) documentation. + +### Generating colors + +If you're wondering how to automatically generate the 50–900 shades of your own custom colors, bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating color palettes like this automatically. + +We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them. + +Two useful tools we _can_ recommend are [Palettte](https://palettte.app/) and [ColorBox](https://colorbox.io/) — they won't do the work for you but their interfaces are well-designed for doing this sort of work. + +--- + +## Using the default colors + +If you don't have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing `tailwindcss/colors` in your configuration file and choosing the colors you want to use: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + }, + }, +} +``` + +This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by [IntelliSense](/docs/editor-setup#intelli-sense-for-vs-code). + +### Aliasing color names + +You can also alias the colors in our default palette to make the names simpler and easier to remember: + +```js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, +> gray: colors.slate, +> green: colors.emerald, +> purple: colors.violet, +> yellow: colors.amber, +> pink: colors.fuchsia, + }, + }, + } +``` + +This is especially common for grays, as you usually only use one set in any given project and it's nice to be able to type `bg-gray-300` instead of `bg-neutral-300` for example. + +### Adding additional colors + +If you'd like to add a brand new color to the default palette, add it in the `theme.extend.colors` section of your configuration file: + + + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + brown: { + 50: '#fdf8f6', + 100: '#f2e8e5', + 200: '#eaddd7', + 300: '#e0cec7', + 400: '#d2bab0', + 500: '#bfa094', + 600: '#a18072', + 700: '#977669', + 800: '#846358', + 900: '#43302b', + }, + } + }, + }, +} +``` + +You can also use `theme.extend.colors` to add additional shades to an existing color if it's needed for your design: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + blue: { + 950: '#17275c', + }, + } + }, + }, +} +``` + +### Disabling a default color + +If you'd like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you _do_ want: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + transparent: 'transparent', + current: 'currentColor', + black: colors.black, + white: colors.white, + gray: colors.gray, + emerald: colors.emerald, + indigo: colors.indigo, + yellow: colors.yellow, + }, + }, +} +``` + +--- + +## Naming your colors + +Tailwind uses literal color names _(like red, green, etc.)_ and a numeric scale _(where 50 is light and 900 is dark)_ by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like `primary` or `danger`. + +That said, you can name your colors in Tailwind whatever you like, and if you're working on a project that needs to support multiple themes for example, it might make sense to use more abstract names: + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + primary: '#5c6ac4', + secondary: '#ecc94b', + // ... + } + } +} +``` + +You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them: + +```js tailwind.config.js +const colors = require('tailwindcss/colors') + +module.exports = { + theme: { + colors: { + primary: colors.indigo, + secondary: colors.yellow, + neutral: colors.gray, + } + } +} +``` + +Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason. + +### Using CSS variables + +If you're using abstract color names because you want to support multiple themes in your project, there's a good chance you also want to use CSS variables to define your colors. + +The best way to do this is to define your CSS variables as just the color _channels_, without including the actual color function: + +```css main.css +@tailwind base; +@tailwind components; +@tailwind utilities; + +.theme-startup { + --color-primary: 255 115 179; + --color-secondary: 111 114 185; + /* ... */ +} + +.theme-boring { + --color-primary: 2 82 204; + --color-secondary: 255 196 2; + /* ... */ +} + +.theme-elegant { + --color-primary: 192 178 131; + --color-secondary: 220 208 192; + /* ... */ +} +``` + +Then define your colors in your configuration file as _functions_, and apply the `opacityValue` if it's defined: + +```js tailwind.config.js +function withOpacityValue(variable) { + return ({ opacityValue }) => { + if (opacityValue === undefined) { + return `rgb(var(${variable}))` + } + return `rgb(var(${variable}) / ${opacityValue})` + } +} + +module.exports = { + theme: { + colors: { + primary: withOpacityValue('--color-primary'), + secondary: withOpacityValue('--color-secondary'), + // ... + } + } +} +``` + +This makes it possible to use Tailwind's color opacity modifiers to do things like `bg-primary/75` even when you're using CSS variables to define your colors. diff --git a/src/pages/ZH/docs/customizing-spacing.mdx b/src/pages/ZH/docs/customizing-spacing.mdx new file mode 100644 index 000000000..682453f21 --- /dev/null +++ b/src/pages/ZH/docs/customizing-spacing.mdx @@ -0,0 +1,79 @@ +--- +title: Customizing Spacing +shortTitle: Spacing +description: Customizing the default spacing and sizing scale for your project. +--- + +import { SpacingScale } from '@/components/SpacingScale' + +Use the `spacing` key in the `theme` section of your `tailwind.config.js` file to customize Tailwind's [default spacing/sizing scale](#default-spacing-scale). + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + '1': '8px', + '2': '12px', + '3': '16px', + '4': '24px', + '5': '32px', + '6': '48px', + } + } +} +``` + +By default the spacing scale is inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `gap`, `inset`, `space`, and `translate` core plugins. + +--- + +## Extending the default spacing scale + + +As described in the [theme documentation](/docs/theme#extending-the-default-theme), if you'd like to extend the default spacing scale, you can do so using the `theme.extend.spacing` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + spacing: { + '13': '3.25rem', + '15': '3.75rem', + '128': '32rem', + '144': '36rem', + } + } + } +} +``` + +This will generate classes like `p-13`, `m-15`, and `h-128` in addition to all of Tailwind's default spacing/sizing utilities. + +--- + +## Overriding the default spacing scale + +As described in the [theme documentation](/docs/theme#overriding-the-default-theme), if you'd like to override the default spacing scale, you can do so using the `theme.spacing` section of your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + sm: '8px', + md: '12px', + lg: '16px', + xl: '24px', + } + } +} +``` + +This will disable Tailwind's default spacing scale and generate classes like `p-sm`, `m-md`, `w-lg`, and `h-xl` instead. + +--- + +## Default spacing scale + +By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so `16` is twice as much spacing as `8` for example. One spacing unit is equal to `0.25rem`, which translates to `4px` by default in common browsers. + + diff --git a/src/pages/ZH/docs/dark-mode.mdx b/src/pages/ZH/docs/dark-mode.mdx new file mode 100644 index 000000000..d04d776b6 --- /dev/null +++ b/src/pages/ZH/docs/dark-mode.mdx @@ -0,0 +1,126 @@ +--- +title: Dark Mode +description: Using Tailwind CSS to style your site in dark mode. +--- + +import { Heading } from '@/components/Heading' + +## + +Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design. + +To make this as easy as possible, Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled: + + +
    +
    +

    Light mode

    +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +
    +
    +

    Dark mode

    +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +
    +
    +     + +```html +
    +
    + + + +
    +

    Writes Upside-Down

    +

    + The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. +

    +
    +``` + +By default this uses the `prefers-color-scheme` CSS media feature, but you can also build sites that support toggling dark mode manually using the ['class' strategy](#toggling-dark-mode-manually). + +--- + +## Toggling dark mode manually + +If you want to support toggling dark mode manually instead of relying on the operating system preference, use the `class` strategy instead of the `media` strategy: + +```js tailwind.config.js +module.exports = { + darkMode: 'class', + // ... +} +``` + +Now instead of `dark:{class}` classes being applied based on `prefers-color-scheme`, they will be applied whenever `dark` class is present earlier in the HTML tree. + +```html + + + + +
    + +
    + + + + + + + +
    + +
    + + +``` + +How you add the `dark` class to the `html` element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere (like `localStorage`) and updates the DOM accordingly. + +Here's a simple example of how you can support light mode, dark mode, as well as respecting the operating system preference: + +```js +// On page load or when changing themes, best to add inline in `head` to avoid FOUC +if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.classList.add('dark') +} else { + document.documentElement.classList.remove('dark') +} + +// Whenever the user explicitly chooses light mode +localStorage.theme = 'light' + +// Whenever the user explicitly chooses dark mode +localStorage.theme = 'dark' + +// Whenever the user explicitly chooses to respect the OS preference +localStorage.removeItem('theme') +``` + +Again you can manage this however you like, even storing the preference server-side in a database and rendering the class on the server — it's totally up to you. \ No newline at end of file diff --git a/src/pages/ZH/docs/display.mdx b/src/pages/ZH/docs/display.mdx new file mode 100644 index 000000000..77b12ce27 --- /dev/null +++ b/src/pages/ZH/docs/display.mdx @@ -0,0 +1,311 @@ +--- +title: "Display" +description: "Utilities for controlling the display box type of an element." +--- + +import utilities from 'utilities?plugin=display' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Block & Inline + +Use `inline`, `inline-block`, and `block` to control the flow of text and elements. + + +
    + When controlling the flow of text, using the CSS property display: inline + will cause the text inside the element to wrap normally. +

    + While using the property + display: inline-block + will wrap the element to prevent the text inside from extending beyond its parent. +

    + Lastly, using the property + display: block + will put the element on it's own line and fill its parent. +
    +     + +```html +
    + When controlling the flow of text, using the CSS property + display: inline + will cause the text inside the element to wrap normally. + + While using the property display: inline-block + will wrap the element to prevent the text inside from extending beyond its parent. + + Lastly, using the property display: block + will put the element on it's own line and fill its parent. +
    +``` + +### Flow Root + +Use `flow-root` to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). + + +
    +
    +
    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
    +
    +
    +
    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
    +
    +
    +     + +```html +
    +
    +
    Well, let me tell you something, ...
    +
    +
    +
    Sure, go ahead, laugh if you want...
    +
    +
    +``` + +### Flex + +Use `flex` to create a block-level flex container. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    +     + +```html +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +``` + +### Inline Flex + +Use `inline-flex` to create an inline flex container that flows with text. + + +

    + Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here. + + Kramer + keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I just have to believe there's a way to make it work, there's simply too much opportunity here. +

    +     + +```html +

    + Today I spent most of the day researching ways to ... + + + Kramer + + keeps telling me there is no way to make it work, that ... +

    +``` + +### Grid + +Use `grid` to create a grid container. + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    07
    +
    08
    +
    09
    +
    +     + +```html +
    + +
    +``` + +### Inline Grid + +Use `inline-grid` to create an inline grid container. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +
    +     + +```html + + 01 + 02 + 03 + 04 + 05 + 06 + + + 01 + 02 + 03 + 04 + 05 + 06 + +``` + +### Contents + +Use `contents` to create a "phantom" container whose children act like direct children of the parent. + + +
    +
    01
    +
    +
    02
    +
    03
    +
    +
    04
    +
    +     + +```html +
    +
    01
    +
    +
    02
    +
    03
    +
    +
    04
    +
    +``` + +### Table + +Use the `table`, `.table-row`, `.table-cell`, `.table-caption`, `.table-column`, `.table-column-group`, `.table-header-group`, `table-row-group`, and `.table-footer-group` utilities to create elements that behave like their respective table elements. + + +
    +
    +
    +
    +
    Song
    +
    Artist
    +
    Year
    +
    +
    +
    +
    +
    The Sliding Mr. Bones (Next Stop, Pottersville)
    +
    Malcolm Lockyer
    +
    1961
    +
    +
    +
    Witchy Woman
    +
    The Eagles
    +
    1972
    +
    +
    +
    Shining Star
    +
    Earth, Wind, and Fire
    +
    1975
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    Title
    +
    Artist
    +
    Year
    +
    +
    +
    +
    +
    Chocolate Starfish And The Hot Dog Flavored Water
    +
    Limp Bizkit
    +
    2000
    +
    +
    +
    Significant Other
    +
    Limp Bizkit
    +
    1999
    +
    +
    +
    Three Dollar Bill, Y’all $
    +
    Limp Bizkit
    +
    1997
    +
    +
    +
    +``` + +### Hidden + +Use `hidden` to set an element to `display: none` and remove it from the page layout (compare with `.invisible` from the [visibility](/docs/visibility#invisible) documentation). + + +
    + +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/divide-color.mdx b/src/pages/ZH/docs/divide-color.mdx new file mode 100644 index 000000000..e7d0c9c25 --- /dev/null +++ b/src/pages/ZH/docs/divide-color.mdx @@ -0,0 +1,114 @@ +--- +title: "Divide Color" +description: "Utilities for controlling the border color between elements." +--- + +import utilities from 'utilities?plugin=divideColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ selector, properties }) => { + delete properties['--tw-divide-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-divide-opacity)', '') + }) + return properties + }, + preview: (css, { className }) => ( + +
    +
    +
    +
    + + ), +} + +## Basic usage + +### Setting the divide color + +Control the border color between elements using the `divide-{color}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Changing the opacity + +Control the opacity of the divide color using the color opacity modifier. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    + +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/divide-style.mdx b/src/pages/ZH/docs/divide-style.mdx new file mode 100644 index 000000000..f3bb3bf6d --- /dev/null +++ b/src/pages/ZH/docs/divide-style.mdx @@ -0,0 +1,51 @@ +--- +title: "Divide Style" +description: "Utilities for controlling the border style between elements." +--- + +import utilities from 'utilities?plugin=divideStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), +} + +## Basic usage + +### Set the divide style + +Control the border style between elements using the `divide-{style}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/divide-width.mdx b/src/pages/ZH/docs/divide-width.mdx new file mode 100644 index 000000000..1f2e5ffe2 --- /dev/null +++ b/src/pages/ZH/docs/divide-width.mdx @@ -0,0 +1,152 @@ +--- +title: "Divide Width" +description: "Utilities for controlling the border width between elements." +--- + +import utilities from 'utilities?plugin=divideWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ selector, properties }) => { + if (!selector.includes('reverse')) { + delete properties['--tw-divide-y-reverse'] + delete properties['--tw-divide-x-reverse'] + } + Object.keys(properties).forEach(key => { + // TODO: This is iffy. Clean it up. + properties[key] = properties[key].replace(/calc\((\d+px) \* var\(.*\)\)/, "$1") + properties[key] = properties[key].replace(/calc\((\d+px) \* calc\(.*\)\)/, "0px") + }) + return properties + }, +} + +## Basic usage + +### Add borders between horizontal children + +Add borders between horizontal elements using the `divide-x-{width}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Add borders between stacked children + +Add borders between stacked elements using the `divide-y-{width}` utilities. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Reversing children order + +If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `divide-x-reverse` or `divide-y-reverse` utilities to ensure the border is added to the correct side of each element. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +The divide width scale inherits its values from the `borderWidth` scale by default, so if you'd like to customize your values for both border width and divide width together, use the `theme.borderWidth` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + borderWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +To customize only the divide width values, use the `theme.divideWidth` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + divideWidth: { + DEFAULT: '1px', + '0': '0', + '2': '2px', ++ '3': '3px', + '4': '4px', ++ '6': '6px', +- '8': '8px', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/drop-shadow.mdx b/src/pages/ZH/docs/drop-shadow.mdx new file mode 100644 index 000000000..3e7c0b4a1 --- /dev/null +++ b/src/pages/ZH/docs/drop-shadow.mdx @@ -0,0 +1,113 @@ +--- +title: "Drop Shadow" +description: "Utilities for applying drop-shadow filters to an element." +--- + +import utilities from 'utilities?plugin=dropShadow' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-drop-shadow'], + } + }, +} + +## Basic usage + +### Adding a drop shadow + +Use the `drop-shadow-{amount}` utilities to add a drop shadow to an element. + + +
    +
    +
    +

    drop-shadow-md

    +
    +
    +
    +
    +
    +

    drop-shadow-lg

    +
    +
    +
    +
    +
    +

    drop-shadow-xl

    +
    +
    +
    +
    +
    +

    drop-shadow-2xl

    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `dropShadow` utilities. You can customize these values by editing `theme.dropShadow` or `theme.extend.dropShadow` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ dropShadow: { ++ '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/editor-setup.mdx b/src/pages/ZH/docs/editor-setup.mdx new file mode 100644 index 000000000..52f0b7639 --- /dev/null +++ b/src/pages/ZH/docs/editor-setup.mdx @@ -0,0 +1,33 @@ +--- +# title: Editor Setup +title: 編輯器設定 +description: Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS. +--- + +## Syntax support + +Tailwind CSS uses a lot of custom CSS at-rules like `@tailwind`, `@apply`, and `@screen`, and in many editors this can trigger warnings or errors where these rules aren't recognized. + +The solution to this is almost always to install a plugin for your editor/IDE for PostCSS language support instead of regular CSS. For example, VS Code has a [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss) plugin you can use that works great with Tailwind CSS. + +In some cases, you may need to disable native CSS linting/validations if your editor is very strict about the syntax it expects in your CSS files. + + +## IntelliSense for VS Code + +The official [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for Visual Studio Code enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting. + +Tailwind CSS IntelliSense extension for Visual Studio Code + +- **Autocomplete**. Intelligent suggestions for class names, as well as [CSS functions and directives](/docs/functions-and-directives). +- **Linting**. Highlights errors and potential bugs in both your CSS and your markup. +- **Hover Previews**. See the complete CSS for a Tailwind class name by hovering over it. +- **Syntax Highlighting**. Provides syntax definitions so that Tailwind features are highlighted correctly. + +Check out the project [on GitHub](https://github.com/tailwindcss/intellisense) to learn more, or [add it to Visual Studio Code](vscode:extension/bradlc.vscode-tailwindcss) to get started now. + +## JetBrains IDEs + +JetBrains IDEs like WebStorm, PhpStorm, and others include support for intelligent Tailwind CSS completions in your HTML and when using `@apply`. + +[Learn more about Tailwind CSS support in JetBrains IDEs →](https://www.jetbrains.com/help/webstorm/tailwind-css.html) diff --git a/src/pages/ZH/docs/fill.mdx b/src/pages/ZH/docs/fill.mdx new file mode 100644 index 000000000..3130d6dd2 --- /dev/null +++ b/src/pages/ZH/docs/fill.mdx @@ -0,0 +1,56 @@ +--- +title: "Fill" +description: "Utilities for styling the fill of SVG elements." +--- + +import utilities from 'utilities?plugin=fill' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the fill color + +Use the `fill-{color}` utilities to change the fill color of an SVG. + + +
    + +
    +     + +```html + + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-basis.mdx b/src/pages/ZH/docs/flex-basis.mdx new file mode 100644 index 000000000..d805e830c --- /dev/null +++ b/src/pages/ZH/docs/flex-basis.mdx @@ -0,0 +1,103 @@ +--- +title: "Flex Basis" +description: "Utilities for controlling the initial size of flex items." +--- + +import utilities from 'utilities?plugin=flexBasis' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the flex basis + +Use the `basis-{size}` utilities to set the initial size of flex items. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +     + +--- + +## Using custom values + +### Customizing your theme + +The default flex basis scale is a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale) as well as a set of percentage based values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '112': '28rem', ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the flex basis scale by editing `theme.flexBasis` or `theme.extend.flexBasis` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexBasis: { ++ '1/7': '14.2857143%', ++ '2/7': '28.5714286%', ++ '3/7': '42.8571429%', ++ '4/7': '57.1428571%', ++ '5/7': '71.4285714%', ++ '6/7': '85.7142857%', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-direction.mdx b/src/pages/ZH/docs/flex-direction.mdx new file mode 100644 index 000000000..c253b4b4f --- /dev/null +++ b/src/pages/ZH/docs/flex-direction.mdx @@ -0,0 +1,104 @@ +--- +title: "Flex Direction" +description: "Utilities for controlling the direction of flex items." +--- + +import utilities from 'utilities?plugin=flexDirection' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Row + +Use `flex-row` to position flex items horizontally in the same direction as text: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Row reversed + +Use `flex-row-reverse` to position flex items horizontally in the opposite direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Column + +Use `flex-col` to position flex items vertically: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Column reversed + +Use `flex-col-reverse` to position flex items vertically in the opposite direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/flex-grow.mdx b/src/pages/ZH/docs/flex-grow.mdx new file mode 100644 index 000000000..b93d806bd --- /dev/null +++ b/src/pages/ZH/docs/flex-grow.mdx @@ -0,0 +1,119 @@ +--- +title: "Flex Grow" +description: "Utilities for controlling how flex items grow." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.grow': { 'flex-grow': '1' }, + '.grow-0': { 'flex-grow': '0' }, + }, +} + +## Basic usage + +### Grow + +Use `grow` to allow a flex item to grow to fill any available space: + + +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Don't grow + +Use `grow-0` to prevent a flex item from growing: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides two `grow` utilities. You can customize these values by editing `theme.flexGrow` or `theme.extend.flexGrow` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexGrow: { ++ '2': 2 ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-shrink.mdx b/src/pages/ZH/docs/flex-shrink.mdx new file mode 100644 index 000000000..3333861c7 --- /dev/null +++ b/src/pages/ZH/docs/flex-shrink.mdx @@ -0,0 +1,119 @@ +--- +title: "Flex Shrink" +description: "Utilities for controlling how flex items shrink." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.shrink': { 'flex-shrink': '1' }, + '.shrink-0': { 'flex-shrink': '0' }, + }, +} + +## Basic usage + +### Shrink + +Use `shrink` to allow a flex item to shrink if needed: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Don't shrink + +Use `shrink-0` to prevent a flex item from shrinking: + + +
    +
    + 01 +
    +
    + 02 +
    + +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides two `shrink` utilities. You can customize these values by editing `theme.flexShrink` or `theme.extend.flexShrink` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flexShrink: { ++ '2': 2 ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/flex-wrap.mdx b/src/pages/ZH/docs/flex-wrap.mdx new file mode 100644 index 000000000..08c176ed6 --- /dev/null +++ b/src/pages/ZH/docs/flex-wrap.mdx @@ -0,0 +1,90 @@ +--- +title: "Flex Wrap" +description: "Utilities for controlling how flex items wrap." +--- + +import utilities from 'utilities?plugin=flexWrap' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Don't wrap + +Use `flex-nowrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Wrap normally + +Use `flex-wrap` to allow flex items to wrap: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Wrap reversed + +Use `flex-wrap-reverse` to wrap flex items in the reverse direction: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/flex.mdx b/src/pages/ZH/docs/flex.mdx new file mode 100644 index 000000000..ad1dd92ee --- /dev/null +++ b/src/pages/ZH/docs/flex.mdx @@ -0,0 +1,167 @@ +--- +title: "Flex" +description: "Utilities for controlling how flex items both grow and shrink." +--- + +import utilities from 'utilities?plugin=flex' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Initial + +Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Flex 1 + +Use `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### Auto + +Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +### None + +Use `flex-none` to prevent a flex item from growing or shrinking: + + +
    +
    +
    + 01 +
    +
    +
    +
    + 02 +
    +
    +
    +
    + 03 +
    +
    +
    +     + +```html +
    +
    + 01 +
    +
    + 02 +
    +
    + 03 +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four `flex` utilities. You can customize these values by editing `theme.flex` or `theme.extend.flex` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ flex: { ++ '2': '2 2 0%' ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/float.mdx b/src/pages/ZH/docs/float.mdx new file mode 100644 index 000000000..0143793f1 --- /dev/null +++ b/src/pages/ZH/docs/float.mdx @@ -0,0 +1,99 @@ +--- +title: "Floats" +description: "Utilities for controlling the wrapping of content around an element." +--- + +import utilities from 'utilities?plugin=float' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Floating elements to the right + +Use `float-right` to float an element to the right of its container. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +### Floating elements to the left + +Use `float-left` to float an element to the left of its container. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +### Disabling a float + +Use `float-none` to reset any floats that are applied to an element. This is the default value for the float property. + + +
    +
    +
    + +
    +
    +
    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better? Look. If you think this is about overdue fines and missing books, you'd better think again. This is about that kid's right to read a book without getting his mind warped! Or: maybe that turns you on, Seinfeld; maybe that's how y'get your kicks. You and your good-time buddies.

    +
    +     + +```html + +

    Maybe we can live without libraries, people like you and me. ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/font-family.mdx b/src/pages/ZH/docs/font-family.mdx new file mode 100644 index 000000000..dd9b9030b --- /dev/null +++ b/src/pages/ZH/docs/font-family.mdx @@ -0,0 +1,113 @@ +--- +title: "Font Family" +description: "Utilities for controlling the font family of an element." +--- + +import utilities from 'utilities?plugin=fontFamily' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font family + +You can control the typeface of text using the font family utilities. + + +
    +
    + font-sans +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-serif +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-mono +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the `theme.fontFamily` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontFamily: { +- 'sans': ['ui-sans-serif', 'system-ui', ...], +- 'serif': ['ui-serif', 'Georgia', ...], +- 'mono': ['ui-monospace', 'SFMono-Regular', ...], ++ 'display': ['Oswald', ...], ++ 'body': ['"Open Sans"', ...], + } + } + } +``` + +Font families can be specified as an array or as a simple comma-delimited string: + +```js +{ + // Array format: + 'sans': ['Helvetica', 'Arial', 'sans-serif'], + + // Comma-delimited format: + 'sans': 'Helvetica, Arial, sans-serif', +} +``` + +Note that **Tailwind does not automatically escape font names** for you. If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters. + +```js +{ + // Won't work: + 'sans': ['Exo 2', ...], + + // Add quotes: + 'sans': ['"Exo 2"', ...], + + // ...or escape the space: + 'sans': ['Exo\\ 2', ...], +} +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/font-size.mdx b/src/pages/ZH/docs/font-size.mdx new file mode 100644 index 000000000..ac1d52fdf --- /dev/null +++ b/src/pages/ZH/docs/font-size.mdx @@ -0,0 +1,161 @@ +--- +title: "Font Size" +description: "Utilities for controlling the font size of an element." +--- + +import utilities from 'utilities?plugin=fontSize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font size + +Control the font size of an element using the `text-{size}` utilities. + + +
    +
    + text-sm +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-base +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-lg +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-xl +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + text-2xl +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides 10 `font-size` utilities. You change, add, or remove these by editing the `theme.fontSize` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontSize: { +- 'xs': '.75rem', +- 'sm': '.875rem', ++ 'tiny': '.875rem', + 'base': '1rem', + 'lg': '1.125rem', + 'xl': '1.25rem', + '2xl': '1.5rem', +- '3xl': '1.875rem', +- '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '4rem', ++ '7xl': '5rem', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Providing a default line-height + +You can provide a default line-height for each of your font-sizes using a tuple of the form `[fontSize, lineHeight]` in your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + sm: ['14px', '20px'], + base: ['16px', '24px'], + lg: ['20px', '28px'], + xl: ['24px', '32px'], + } + } +} +``` + +You can also specify a default line-height using object syntax: + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + sm: ['14px', { + lineHeight: '20px', + }], + } + } +} +``` + +We already provide default line heights for each `.text-{size}` class. + +### Providing a default letter-spacing + +If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + fontSize: { + '2xl': ['24px', { + letterSpacing: '-0.01em', + }], + // Or with a default line-height as well + '3xl': ['32px', { + letterSpacing: '-0.02em', + lineHeight: '40px', + }], + } + } +} +``` + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/font-smoothing.mdx b/src/pages/ZH/docs/font-smoothing.mdx new file mode 100644 index 000000000..98fe31ca6 --- /dev/null +++ b/src/pages/ZH/docs/font-smoothing.mdx @@ -0,0 +1,50 @@ +--- +title: "Font Smoothing" +description: "Utilities for controlling the font smoothing of an element." +--- + +import utilities from 'utilities?plugin=fontSmoothing' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Applying font smoothing + +Use the `subpixel-antialiased` utility to render text using subpixel antialiasing and the `antialiased` utility to render text using grayscale antialiasing. + + +
    +
    + subpixel-antialiased +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + antialiased +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-style.mdx b/src/pages/ZH/docs/font-style.mdx new file mode 100644 index 000000000..43d2f417c --- /dev/null +++ b/src/pages/ZH/docs/font-style.mdx @@ -0,0 +1,50 @@ +--- +title: "Font Style" +description: "Utilities for controlling the style of text." +--- + +import utilities from 'utilities?plugin=fontStyle' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Italicizing text + +The `italic` utility can be used to make text italic. Likewise, the `not-italic` utility can be used to display text normally — typically to reset italic text at different breakpoints. + + +
    +
    + italic +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + not-italic +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-variant-numeric.mdx b/src/pages/ZH/docs/font-variant-numeric.mdx new file mode 100644 index 000000000..a414c0afa --- /dev/null +++ b/src/pages/ZH/docs/font-variant-numeric.mdx @@ -0,0 +1,227 @@ +--- +title: "Font Variant Numeric" +description: "Utilities for controlling the variant of numbers." +--- + +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.normal-nums': { 'font-variant-numeric': 'normal' }, + '.ordinal': { 'font-variant-numeric': 'ordinal' }, + '.slashed-zero': { 'font-variant-numeric': 'slashed-zero' }, + '.lining-nums': { 'font-variant-numeric': 'lining-nums' }, + '.oldstyle-nums': { 'font-variant-numeric': 'oldstyle-nums' }, + '.proportional-nums': { 'font-variant-numeric': 'proportional-nums' }, + '.tabular-nums': { 'font-variant-numeric': 'tabular-nums' }, + '.diagonal-fractions': { 'font-variant-numeric': 'diagonal-fractions' }, + '.stacked-fractions': { 'font-variant-numeric': 'stacked-fractions' }, + }, +} + +## Basic usage + +### Applying numeric variants + +Use the `font-variant-numeric` utilities to enable additional glyphs for numbers, fractions, and ordinal markers *(in fonts that support them)*. + +These utilities are composable so you can enable multiple `font-variant-numeric` features by combining multiple classes in your HTML: + +```html +

    + 1234567890 +

    +``` + +Note that many fonts don't support these features *(stacked fractions support for example is especially rare)*, so some of these utilities may have no effect depending on the font family you are using. + +-- block + +### Ordinal + +Use the `ordinal` utility to enable special glyphs for the ordinal markers. + +-- column + + +

    1st

    +     + +```html +

    1st

    +``` + +-- /block + +-- block + +### Slashed Zero + +Use the `slashed-zero` utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. + +-- column + + +

    0

    +     + +```html +

    0

    +``` + +-- /block + +-- block + +### Lining figures + +Use the `lining-nums` utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the `lnum` OpenType feature. This is the default for most fonts. + +-- column + + +

    1234567890

    +     + +```html +

    + 1234567890 +

    +``` + +-- /block + +-- block + +### Oldstyle figures + +Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders. This corresponds to the `onum` OpenType feature. + +-- column + + +

    1234567890

    +     + +```html +

    + 1234567890 +

    +``` + +-- /block + +-- block + +### Proportional figures + +Use the `proportional-nums` utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the `pnum` OpenType feature. + +-- column + + +
    +

    12121

    +

    90909

    +
    +     + +```html +

    + 12121 +

    +

    + 90909 +

    +``` + +-- /block + +-- block + +### Tabular figures + +Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the `tnum` OpenType feature. + +-- column + + +
    +

    12121

    +

    90909

    +
    +     + +```html +

    + 12121 +

    +

    + 90909 +

    +``` + +-- /block + +-- block + +### Diagonal fractions + +Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the `frac` OpenType feature. + +-- column + + +

    1/2 3/4 5/6

    +     + +```html +

    + 1/2 3/4 5/6 +

    +``` + +-- /block + +-- block + +### Stacked fractions + +Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the `frac` OpenType feature. Very few fonts seem to support this feature — we've used Ubuntu Mono here. + +-- column + + +

    1/2 3/4 5/6

    +     + +```html +

    + 1/2 3/4 5/6 +

    +``` + +-- /block + +### Resetting numeric font variants + +Use the `normal-nums` propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint: + +```html +

    + 12345 +

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/font-weight.mdx b/src/pages/ZH/docs/font-weight.mdx new file mode 100644 index 000000000..65b23cefa --- /dev/null +++ b/src/pages/ZH/docs/font-weight.mdx @@ -0,0 +1,106 @@ +--- +title: "Font Weight" +description: "Utilities for controlling the font weight of an element." +--- + +import utilities from 'utilities?plugin=fontWeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the font weight + +Control the font weight of an element using the `font-{weight}` utilities. + + +
    +
    + font-light +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-normal +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-medium +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-semibold +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + font-bold +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides 10 `font-weight` utilities. You change, add, or remove these by editing the `theme.fontWeight` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + fontWeight: { +- hairline: 100, ++ 'extra-light': 100, +- thin: 200, + light: 300, + normal: 400, + medium: 500, +- semibold: 600, + bold: 700, +- extrabold: 800, ++ 'extra-bold': 800, + black: 900, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/functions-and-directives.mdx b/src/pages/ZH/docs/functions-and-directives.mdx new file mode 100644 index 000000000..ed26dd157 --- /dev/null +++ b/src/pages/ZH/docs/functions-and-directives.mdx @@ -0,0 +1,277 @@ +--- +title: Functions & Directives +description: A reference for the custom functions and directives Tailwind exposes to your CSS. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +## Directives + +Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects. + +### @tailwind + +Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `variants` styles into your CSS. + +```css +/** + * This injects Tailwind's base styles and any base styles registered by + * plugins. + */ +@tailwind base; + +/** + * This injects Tailwind's component classes and any component classes + * registered by plugins. + */ +@tailwind components; + +/** + * This injects Tailwind's utility classes and any utility classes registered + * by plugins. + */ +@tailwind utilities; + +/** + * Use this directive to control where Tailwind injects the hover, focus, + * responsive, dark mode, and other variants of each class. + * + * If omitted, Tailwind will append these classes to the very end of + * your stylesheet by default. + */ +@tailwind variants; +``` + +### @layer + +Use the `@layer` directive to tell Tailwind which "bucket" a set of custom styles belong to. Valid layers are `base`, `components`, and `utilities`. + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } +} + +@layer components { + .btn-blue { + @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; + } +} + +@layer utilities { + .filter-none { + filter: none; + } + .filter-grayscale { + filter: grayscale(100%); + } +} +``` + +Tailwind will automatically move any CSS within a `@layer` directive to the same place as the corresponding `@tailwind` rule, so you don't have to worry about authoring your CSS in a specific order to avoid specificity issues. + +Any custom CSS added to a layer will only be included in the final build if that CSS is actually used in your HTML, just like all of the classes built in to Tailwind by default. + +Wrapping any custom CSS in a `@layer` directive also makes it possible to use modifiers with those rules, like `hover:` and `focus:` or responsive modifiers like `md:` and `lg:`. + +### @apply + +Use `@apply` to inline any existing utility classes into your own custom CSS. + +This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you're used to using in your HTML. + +```css +.select2-dropdown { + @apply rounded-b-lg shadow-md; +} +.select2-search { + @apply border border-gray-300 rounded; +} +.select2-results__group { + @apply text-lg font-bold text-gray-900; +} +``` + +Any rules inlined with `@apply` will have `!important` **removed** by default to avoid specificity issues: + +```css +/* Input */ +.foo { + color: blue !important; +} + +.bar { + @apply foo; +} + +/* Output */ +.foo { + color: blue !important; +} + +.bar { + color: blue; +} +``` + +If you'd like to `@apply` an existing class and make it `!important`, simply add `!important` to the end of the declaration: + + +```css +/* Input */ +.btn { + @apply font-bold py-2 px-4 rounded !important; +} + +/* Output */ +.btn { + font-weight: 700 !important; + padding-top: .5rem !important; + padding-bottom: .5rem !important; + padding-right: 1rem !important; + padding-left: 1rem !important; + border-radius: .25rem !important; +} +``` + +Note that if you're using Sass/SCSS, you'll need to use Sass' interpolation feature to get this to work: + +```css +.btn { + @apply font-bold py-2 px-4 rounded #{!important}; +} +``` + +#### Using @apply with per-component CSS + +Component frameworks like Vue and Svelte support adding per-component styles within a ` +``` + +This is because under-the-hood, frameworks like Vue and Svelte are processing every single ` + + +>
    + +
    + + `, + }, + }, +] + +export default function PlayCdn({ code }) { + return ( + +
    +

    + Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN + is designed for development purposes only, and is not the best choice for production. +

    +
    + +     + ) +} + +export function getStaticProps() { + // let { highlightCode } = require('../../../../remark/utils') + let { highlightCode } = require('../../../../../remark/utils') + + return { + props: { + code: steps.map(({ code }) => { + let isArray = Array.isArray(code) + code = isArray ? code : [code] + code = code.map((code) => { + if (code.lang && code.lang !== 'terminal') { + return highlightCode(code.code, code.lang) + } + return code.code + }) + return isArray ? code : code[0] + }), + }, + } +} + +PlayCdn.layoutProps = { + meta: { + title: 'Installation: Play CDN', + section: 'Getting Started', + }, + Layout: DocumentationLayout, + allowOverflow: false, +} diff --git a/src/pages/ZH/docs/installation/using-postcss.js b/src/pages/ZH/docs/installation/using-postcss.js new file mode 100644 index 000000000..ac0be1f8f --- /dev/null +++ b/src/pages/ZH/docs/installation/using-postcss.js @@ -0,0 +1,169 @@ +import { DocumentationLayout } from '@/layouts/.ZH/DocumentationLayout' +import { InstallationLayout } from '@/layouts/.ZH/InstallationLayout' +import { Cta } from '@/components/Cta' +import { Steps } from '@/components/Steps' + +let steps = [ + { + title: 'Install Tailwind CSS', + body: () => ( +

    + Install tailwindcss and its peer dependencies via npm, and create your{' '} + tailwind.config.js file. +

    + ), + code: { + name: 'Terminal', + lang: 'terminal', + code: 'npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init', + }, + }, + { + title: 'Add Tailwind to your PostCSS configuration', + body: () => ( +

    + Add tailwindcss and autoprefixer to your{' '} + postcss.config.js file. +

    + ), + code: { + name: 'postcss.config.js', + lang: 'js', + code: ` module.exports = { + plugins: { +> tailwindcss: {}, +> autoprefixer: {}, + } + }`, + }, + }, + { + title: 'Configure your template paths', + body: () => ( +

    + Add the paths to all of your template files in your tailwind.config.js file. +

    + ), + code: { + name: 'tailwind.config.js', + lang: 'js', + code: ` module.exports = { +> content: ["./src/**/*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], + }`, + }, + }, + { + title: 'Add the Tailwind directives to your CSS', + body: () => ( +

    + Add the @tailwind directives for each of Tailwind’s layers to your main CSS + file. +

    + ), + code: { + name: 'main.css', + lang: 'css', + code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;', + }, + }, + { + title: 'Start your build process', + body: () => ( +

    + Run your build process with npm run dev or whatever command is configured + in your package.json file. +

    + ), + code: { + name: 'Terminal', + lang: 'terminal', + code: 'npm run dev', + }, + }, + { + title: 'Start using Tailwind in your HTML', + body: () => ( +

    + Make sure your compiled CSS is included in the {''}{' '} + (your framework might handle this for you), then start using Tailwind’s utility + classes to style your content. +

    + ), + code: { + name: 'index.html', + lang: 'html', + code: ` + + + + + + + +>

    +> Hello world! +>

    + + `, + }, + }, +] + +export default function UsingPostCss({ code }) { + return ( + +
    +

    + Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with + build tools like webpack, Rollup, Vite, and Parcel. +

    +
    + + + Are you stuck? Setting up + Tailwind with PostCSS can be a bit different across different build tools. Check our + framework guides to see if we have more specific instructions for your particular setup. + + } + /> +     + ) +} + +export function getStaticProps() { + // let { highlightCode } = require('../../../../remark/utils') + let { highlightCode } = require('../../../../../remark/utils') + + return { + props: { + code: steps.map(({ code }) => { + let isArray = Array.isArray(code) + code = isArray ? code : [code] + code = code.map((code) => { + if (code.lang && code.lang !== 'terminal') { + return highlightCode(code.code, code.lang) + } + return code.code + }) + return isArray ? code : code[0] + }), + }, + } +} + +UsingPostCss.layoutProps = { + meta: { + title: 'Installation: Using PostCSS', + section: 'Getting Started', + }, + Layout: DocumentationLayout, + allowOverflow: false, +} diff --git a/src/pages/ZH/docs/invert.mdx b/src/pages/ZH/docs/invert.mdx new file mode 100644 index 000000000..eb4151da8 --- /dev/null +++ b/src/pages/ZH/docs/invert.mdx @@ -0,0 +1,99 @@ +--- +title: "Invert" +description: "Utilities for applying invert filters to an element." +--- + +import utilities from 'utilities?plugin=invert' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-invert'], + } + }, +} + +## Basic usage + +### Inverting an element's color + +Use the `invert` and `invert-0` utilities to control whether an element should be rendered with inverted colors or normally. + + +
    +
    +
    +

    invert-0

    +
    + +
    +
    +
    +
    +

    invert

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `invert` utilities. You can customize these values by editing `theme.invert` or `theme.extend.invert` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ invert: { ++ 25: '.25', ++ 50: '.5', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/isolation.mdx b/src/pages/ZH/docs/isolation.mdx new file mode 100644 index 000000000..12bfd43ff --- /dev/null +++ b/src/pages/ZH/docs/isolation.mdx @@ -0,0 +1,34 @@ +--- +title: "Isolation" +description: "Utilities for controlling whether an element should explicitly create a new stacking context." +--- + +import utilities from 'utilities?plugin=isolation' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stacking context + +Use the `isolate` and `isolation-auto` utilities to control whether an element should explicitly create a new stacking context. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-content.mdx b/src/pages/ZH/docs/justify-content.mdx new file mode 100644 index 000000000..4975248f9 --- /dev/null +++ b/src/pages/ZH/docs/justify-content.mdx @@ -0,0 +1,144 @@ +--- +title: "Justify Content" +description: "Utilities for controlling how flex and grid items are positioned along a container's main axis." +--- + +import utilities from 'utilities?plugin=justifyContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `justify-start` to justify items against the start of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Center + +Use `justify-center` to justify items along the center of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### End + +Use `justify-end` to justify items against the end of the container's main axis: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space between + +Use `justify-between` to justify items along the container's main axis such that there is an equal amount of space between each item: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space around + +Use `justify-around` to justify items along the container's main axis such that there is an equal amount of space on each side of each item: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Space evenly + +Use `justify-evenly` to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `justify-around`: + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-items.mdx b/src/pages/ZH/docs/justify-items.mdx new file mode 100644 index 000000000..6517e4dcc --- /dev/null +++ b/src/pages/ZH/docs/justify-items.mdx @@ -0,0 +1,164 @@ +--- +title: "Justify Items" +description: "Utilities for controlling how grid items are aligned along their inline axis." +--- + +import utilities from 'utilities?plugin=justifyItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `justify-items-start` to justify grid items against the start of their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `justify-items-end` to justify grid items against the end of their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `justify-items-center` to justify grid items along their inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `justify-items-stretch` to stretch items along their inline axis: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/justify-self.mdx b/src/pages/ZH/docs/justify-self.mdx new file mode 100644 index 000000000..e7ff693c6 --- /dev/null +++ b/src/pages/ZH/docs/justify-self.mdx @@ -0,0 +1,172 @@ +--- +title: "Justify Self" +description: "Utilities for controlling how an individual grid item is aligned along its inline axis." +--- + +import utilities from 'utilities?plugin=justifySelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `justify-self-auto` to align an item based on the value of the grid's `justify-items` property: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Start + +Use `justify-self-start` to align a grid item to the start its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Center + +Use `justify-self-center` to align a grid item along the center its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### End + +Use `justify-self-end` to align a grid item to the end its inline axis: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +### Stretch + +Use `justify-self-stretch` to stretch a grid item to fill the grid area on its inline axis: + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +     + +```html +
    + +
    02
    + + + + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/letter-spacing.mdx b/src/pages/ZH/docs/letter-spacing.mdx new file mode 100644 index 000000000..b304cff60 --- /dev/null +++ b/src/pages/ZH/docs/letter-spacing.mdx @@ -0,0 +1,117 @@ +--- +title: "Letter Spacing" +description: "Utilities for controlling the tracking (letter spacing) of an element." +--- + +import utilities from 'utilities?plugin=letterSpacing' +import { SnippetGroup } from '@/components/SnippetGroup' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the letter spacing + +Control the letter spacing of an element using the `tracking-{size}` utilities. + + +
    +
    + tracking-tight +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + tracking-normal +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + tracking-wide +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +### Using negative values + +To use a negative letter-spacing value, prefix the class name with a dash to convert it to a negative value. + +Using negative values doesn't make a ton of sense with the letter-spacing scale Tailwind includes out of the box, but if you've opted to customize your letter-spacing scale to use numbers instead of descriptive words like "wide" the negative value modifier can be useful. + + + +```html HTML +

    The quick brown fox ...

    +``` + +```js tailwind.config.js +module.exports = { + theme: { + letterSpacing: { + '1': '0em', + '2': '0.025em', + '3': '0.05em', + '4': '0.1em', + } + } +} +``` + +     + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six tracking utilities. You can change, add, or remove these by editing the `theme.letterSpacing` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + letterSpacing: { ++ tightest: '-.075em', + tighter: '-.05em', +- tight: '-.025em', + normal: '0', +- wide: '.025em', + wider: '.05em', +- widest: '.1em', ++ widest: '.25em', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/line-height.mdx b/src/pages/ZH/docs/line-height.mdx new file mode 100644 index 000000000..b5f2f89ec --- /dev/null +++ b/src/pages/ZH/docs/line-height.mdx @@ -0,0 +1,140 @@ +--- +title: "Line Height" +description: "Utilities for controlling the leading (line height) of an element." +--- + +import utilities from 'utilities?plugin=lineHeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Relative line-heights + +Use the `leading-none`, `leading-tight`, `leading-snug`, `leading-normal`, `leading-relaxed`, and `leading-loose` utilities to give an element a relative line-height based on its current font-size. + + +
    +
    + leading-normal +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-relaxed +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-loose +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +``` + +### Fixed line-heights + +Use the `leading-{size}` utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element's final size. + + +
    +
    + leading-6 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-7 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    + leading-8 +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +

    So I started to walk into the water...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +### Overriding default line-heights + +It's important to note that by default, Tailwind's [font-size](/docs/font-size) utilities each set their own default line-height. This means that any time you use a responsive font-size utility like `sm:text-xl`, any explicit line-height you have set for a smaller breakpoint will be overridden. + +```html + +

    + Maybe we can live without libraries... +

    +``` + +If you want to override the default line-height after setting a breakpoint-specific font-size, make sure to set a breakpoint-specific line-height as well: + +```html + +

    + Maybe we can live without libraries... +

    +``` + +Using the same line-height across different font sizes is generally not going to give you good typographic results. Line-height should typically get smaller as font-size increases, so the default behavior here usually saves you a ton of work. If you find yourself fighting it, you can always [customize your font-size scale](https://tailwindcss.com/docs/font-size#customizing) to not include default line-heights. + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six relative and eight fixed `line-height` utilities. You change, add, or remove these by customizing the `lineHeight` section of your Tailwind theme config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ lineHeight: { ++ 'extra-loose': '2.5', ++ '12': '3rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/list-style-position.mdx b/src/pages/ZH/docs/list-style-position.mdx new file mode 100644 index 000000000..ed505b371 --- /dev/null +++ b/src/pages/ZH/docs/list-style-position.mdx @@ -0,0 +1,63 @@ +--- +title: "List Style Position" +description: "Utilities for controlling the position of bullets/numbers in lists." +--- + +import utilities from 'utilities?plugin=listStylePosition' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the list style position + +Control the position of the markers and text indentation in a list using the `list-inside` and `list-outside` utilities. + + +
    +
    +
    +

    list-inside

    +
      +
    • 5 cups chopped Porcini mushrooms
      • +
    • 1/2 cup of olive oil
      • +
    • 3lb of celery
      • +
    +
    +
    +
    +

    list-outside

    +
      +
    • 5 cups chopped Porcini mushrooms
      • +
    • 1/2 cup of olive oil
      • +
    • 3lb of celery
      • +
    +
    +
    +     + +```html +
      +
    • 5 cups chopped Porcini mushrooms
      • + +
    + +
      +
    • 5 cups chopped Porcini mushrooms
      • + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/list-style-type.mdx b/src/pages/ZH/docs/list-style-type.mdx new file mode 100644 index 000000000..c2d4320db --- /dev/null +++ b/src/pages/ZH/docs/list-style-type.mdx @@ -0,0 +1,103 @@ +--- +title: "List Style Type" +description: "Utilities for controlling the bullet/number style of a list." +--- + +import utilities from 'utilities?plugin=listStyleType' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the list style type + +To create bulleted or numeric lists, use the `list-disc` and `list-decimal` utilities. + + +
    +
    + list-disc +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    + list-decimal +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    + list-none +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • +
    • And I like to take a minute and sit right here
      • +
    • I'll tell you how I became the prince of a town called Bel-Air
      • +
    +
    +
    +     + +```html +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • + +
    + +
      +
    1. Now this is a story all about how, my life got flipped turned upside down
      2. + +
    + +
      +
    • Now this is a story all about how, my life got flipped turned upside down
      • + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `theme.listStyleType` section of your Tailwind config. + +```diff-js tailwind.config.js + module.exports = { + theme: { + listStyleType: { + none: 'none', +- disc: 'disc', +- decimal: 'decimal', ++ square: 'square', ++ roman: 'upper-roman', + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/margin.mdx b/src/pages/ZH/docs/margin.mdx new file mode 100644 index 000000000..deaa6d325 --- /dev/null +++ b/src/pages/ZH/docs/margin.mdx @@ -0,0 +1,173 @@ +--- +title: "Margin" +description: "Utilities for controlling an element's margin." +--- + +import utilities from 'utilities?plugin=margin' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Add margin to a single side + +Control the margin on one side of an element using the `m{t|r|b|l}-{size}` utilities. + +For example, `mt-6` would add `1.5rem` of margin to the top of an element, `mr-4` would add `1rem` of margin to the right of an element, `mb-8` would add `2rem` of margin to the bottom of an element, and `ml-2` would add `0.5rem` of margin to the left of an element. + + +
    +
    +
    +
    mt-6
    +
    +
    +
    +
    +
    mr-4
    +
    +
    +
    +
    +
    mb-8
    +
    +
    +
    +
    +
    ml-2
    +
    +
    +
    +     + +```html +
    mt-6
    +
    mr-4
    +
    mb-8
    +
    ml-2
    +``` + +### Add horizontal margin + +Control the horizontal margin of an element using the `mx-{size}` utilities. + + +
    +
    +
    mx-8
    +
    +
    +     + +```html +
    mx-8
    +``` + +### Add vertical margin + +Control the vertical margin of an element using the `my-{size}` utilities. + + +
    +
    +
    my-8
    +
    +
    +     + +```html +
    my-8
    +``` + +### Add margin to all sides + +Control the margin on all sides of an element using the `m-{size}` utilities. + + +
    +
    +
    m-8
    +
    +
    +     + +```html +
    m-8
    +``` + +### Using negative values + +To use a negative margin value, prefix the class name with a dash to convert it to a negative value. + + +
    +
    +
    +
    -mt-8
    +
    +
    +     + +```html +
    +
    -mt-8
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's margin scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the margin scale by editing `theme.margin` or `theme.extend.margin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ margin: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/max-height.mdx b/src/pages/ZH/docs/max-height.mdx new file mode 100644 index 000000000..20ae2ca8e --- /dev/null +++ b/src/pages/ZH/docs/max-height.mdx @@ -0,0 +1,83 @@ +--- +title: "Max-Height" +description: "Utilities for setting the maximum height of an element." +--- + +import utilities from 'utilities?plugin=maxHeight' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Setting the maximum height + +Set the maximum height of an element using the `max-h-full` or `max-h-screen` utilities. + +```html +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's max-height scale uses a combination of the [default spacing scale](/docs/customizing-spacing) as well as some additional height related values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the max-height scale by editing `theme.maxHeight` or `theme.extend.maxHeight` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ maxHeight: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/max-width.mdx b/src/pages/ZH/docs/max-width.mdx new file mode 100644 index 000000000..2d11ffaf6 --- /dev/null +++ b/src/pages/ZH/docs/max-width.mdx @@ -0,0 +1,124 @@ +--- +title: "Max-Width" +description: "Utilities for setting the maximum width of an element." +--- + +import utilities from 'utilities?plugin=maxWidth' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Setting the maximum width + +Set the maximum width of an element using the `max-w-{size}` utilities. + + +
    + +
    +
    Andrew Alfred
    +
    Assistant to the Traveling Secretary
    +
    +
    +     + +```html +
    + +
    +``` + +### Reading width + +The `max-w-prose` utility gives an element a max-width optimized for readability and adapts based on the font size. + + +
    +
    + text-sm +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    + text-base +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    + text-xl +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +
    +
    +     + +```html +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    + +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    + +
    +

    Oh yeah. It's the best part. It's crunchy, it's explosive, it's where the muffin breaks free of the pan and sort of does it's own thing. I'll tell you. That's a million dollor idea right there. Just sell the tops.

    +
    +``` + +### Constraining to your breakpoints + +The `max-w-screen-{breakpoint}` classes can be used to give an element a max-width matching a specific breakpoint. These values are automatically derived from the [`theme.screens` section](/docs/theme#screens) of your `tailwind.config.js` file. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `max-width` scale by editing `theme.maxWidth` or `theme.extend.maxWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ maxWidth: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/min-height.mdx b/src/pages/ZH/docs/min-height.mdx new file mode 100644 index 000000000..b55802da8 --- /dev/null +++ b/src/pages/ZH/docs/min-height.mdx @@ -0,0 +1,61 @@ +--- +title: "Min-Height" +description: "Utilities for setting the minimum height of an element." +--- + +import utilities from 'utilities?plugin=minHeight' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the minimum height + +Set the minimum height of an element using the `min-h-0`, `min-h-full`, or `min-h-screen` utilities. + +```html +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `min-height` scale by editing `theme.minHeight` or `theme.extend.minHeight` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ minHeight: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/min-width.mdx b/src/pages/ZH/docs/min-width.mdx new file mode 100644 index 000000000..c6c515207 --- /dev/null +++ b/src/pages/ZH/docs/min-width.mdx @@ -0,0 +1,59 @@ +--- +title: "Min-Width" +description: "Utilities for setting the minimum width of an element." +--- + +import utilities from 'utilities?plugin=minWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the minimum width + +Set the minimum width of an element using the `min-w-{width}` utilities. + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize your `min-width` scale by editing `theme.minWidth` or `theme.extend.minWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { ++ minWidth: { ++ '1/2': '50%', ++ } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/mix-blend-mode.mdx b/src/pages/ZH/docs/mix-blend-mode.mdx new file mode 100644 index 000000000..3d426b660 --- /dev/null +++ b/src/pages/ZH/docs/mix-blend-mode.mdx @@ -0,0 +1,42 @@ +--- +title: "Mix Blend Mode" +description: "Utilities for controlling how an element should blend with the background." +--- + +import utilities from 'utilities?plugin=mixBlendMode' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting an element's blend mode + +Use the `mix-blend-{mode}` utilities to control how an element's content should be blended with the background. + + +
    +
    +
    +
    +     + +```html +
    +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/object-fit.mdx b/src/pages/ZH/docs/object-fit.mdx new file mode 100644 index 000000000..c598ca19c --- /dev/null +++ b/src/pages/ZH/docs/object-fit.mdx @@ -0,0 +1,119 @@ +--- +title: "Object Fit" +description: "Utilities for controlling how a replaced element's content should be resized." +--- + +import utilities from 'utilities?plugin=objectFit' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Resizing to cover a container + +Resize an element's content to cover its container using `.object-cover`. + + +
    + +
    +     + +```html +
    + +
    +``` + +### Containing an element + +Resize an element's content to stay contained within its container using `.object-contain`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +### Stretching to fit a container + +Stretch an element's content to fit its container using `.object-fill`. + + +
    + +
    +     + +```html +
    + +
    +``` + +### Scaling down if too large + +Display an element's content at its original size but scale it down to fit its container if necessary using `.object-scale-down`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +### Using an element's original size + +Display an element's content at its original size ignoring the container size using `.object-none`. + + +
    +
    + +
    +     + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + +### Breakpoints and media queries + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/object-position.mdx b/src/pages/ZH/docs/object-position.mdx new file mode 100644 index 000000000..6d3d12216 --- /dev/null +++ b/src/pages/ZH/docs/object-position.mdx @@ -0,0 +1,156 @@ +--- +title: "Object Position" +description: "Utilities for controlling how a replaced element's content should be positioned within its container." +--- + +import utilities from 'utilities?plugin=objectPosition' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Positioning a replaced element + +Use the `object-{side}` utilities to specify how a replaced element's content should be positioned within its container. + + +
    +
    +
    +

    object-left-top

    +
    +
    + +
    +
    +
    +

    object-top

    +
    +
    + +
    +
    +
    +

    object-right-top

    +
    +
    + +
    +
    +
    +

    object-left

    +
    +
    + +
    +
    +
    +

    object-center

    +
    +
    + +
    +
    +
    +

    object-right

    +
    +
    + +
    +
    +
    +

    object-left-bottom

    +
    +
    + +
    +
    +
    +

    object-bottom

    +
    +
    + +
    +
    +
    +

    object-right-bottom

    +
    +
    + +
    +
    +
    +
    +     + +```html + + + + + + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + +``` + + + + +### Breakpoints and media queries + + + +```html + +``` + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides nine object position utilities. You can customize these values by editing `theme.objectPosition` or `theme.extend.objectPosition` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ objectPosition: { ++ 'center-bottom': 'center bottom', ++ } + }, + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + + +```html + +``` + + diff --git a/src/pages/ZH/docs/opacity.mdx b/src/pages/ZH/docs/opacity.mdx new file mode 100644 index 000000000..9292c3623 --- /dev/null +++ b/src/pages/ZH/docs/opacity.mdx @@ -0,0 +1,83 @@ +--- +title: "Opacity" +description: "Utilities for controlling the opacity of an element." +--- + +import utilities from 'utilities?plugin=opacity' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing an element's opacity + +Control the opacity of an element using the `opacity-{amount}` utilities. + + +
    +
    +

    opacity-100

    + +
    +
    +

    opacity-75

    + +
    +
    +

    opacity-50

    + +
    +
    +

    opacity-25

    + +
    +
    +     + +```html + + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides several opacity utilities for general purpose use. You can customize these values by editing `theme.opacity` or `theme.extend.opacity` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ opacity: { ++ '67': '.67', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/optimizing-for-production.mdx b/src/pages/ZH/docs/optimizing-for-production.mdx new file mode 100644 index 000000000..0f88efea7 --- /dev/null +++ b/src/pages/ZH/docs/optimizing-for-production.mdx @@ -0,0 +1,38 @@ +--- +title: Optimizing for Production +description: Getting the most performance out of Tailwind CSS projects. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' +import { SnippetGroup } from '@/components/SnippetGroup' +import stats from '@/utils/stats' +import { Performance } from '@/components/home/Performance' + +Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are _actually using_ in your project. + +Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for [Netflix Top 10](https://top10.netflix.com/) and the entire website delivers only 6.5kB of CSS over the network. + +With CSS files this small, you don't have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that's downloaded once and cached until you redeploy your site. + +For the smallest possible production build, we recommend minifying your CSS with a tool like [cssnano](https://cssnano.co/), and compressing your CSS with [Brotli](https://en.wikipedia.org/wiki/Brotli). + +If you're using Tailwind CLI, you can minify your CSS by adding the `--minify` flag: + +```shell +npx tailwindcss -o build.css --minify +``` + +If you've installed Tailwind as a PostCSS plugin, add `cssnano` to the end of your plugin list: + +```js postcss.config.js +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + ...(NODE_ENV === 'production' ? { cssnano: {} } : {}) + } +} +``` + +If you're using a framework, check the documentation as this is often handled for you in production automatically and you don't even need to configure it. \ No newline at end of file diff --git a/src/pages/ZH/docs/order.mdx b/src/pages/ZH/docs/order.mdx new file mode 100644 index 000000000..dea72fa22 --- /dev/null +++ b/src/pages/ZH/docs/order.mdx @@ -0,0 +1,81 @@ +--- +title: "Order" +description: "Utilities for controlling the order of flex and grid items." +--- + +import utilities from 'utilities?plugin=order' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Ordering flex and grid items + +Use `order-{order}` to render flex and grid items in a different order than they appear in the DOM. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Using negative values + +To use a negative order value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides utilities for `order-first`, `order-last`, `order-none`, and an `order-{number}` utility for the numbers 1 through 12. You can customize these values by editing `theme.order` or `theme.extend.order` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ order: { ++ '13': '13' ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-color.mdx b/src/pages/ZH/docs/outline-color.mdx new file mode 100644 index 000000000..1ce4dab2a --- /dev/null +++ b/src/pages/ZH/docs/outline-color.mdx @@ -0,0 +1,88 @@ +--- +title: "Outline Color" +description: "Utilities for controlling the color of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline color + +Use the `outline-{color}` utilities to change the color of an element's outline. + + +
    +
    +

    outline-blue-500

    + +
    +
    +

    outline-cyan-500

    + +
    +
    +

    outline-pink-500

    + +
    +
    +     + +```html + + + +``` + +### Changing the opacity + +Control the opacity of an element's outline color using the color opacity modifier. + + +
    +
    +

    outline-blue-500/50

    + +
    +
    +     + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-offset.mdx b/src/pages/ZH/docs/outline-offset.mdx new file mode 100644 index 000000000..52a35dd8c --- /dev/null +++ b/src/pages/ZH/docs/outline-offset.mdx @@ -0,0 +1,78 @@ +--- +title: "Outline Offset" +description: "Utilities for controlling the offset of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineOffset' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline offset + +Use the `outline-{offset}` utilities to change the offset of an element's outline. + + +
    +
    +

    outline-offset-0

    + +
    +
    +

    outline-offset-2

    + +
    +
    +

    outline-offset-4

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `outline-offset-{width}` utilities by editing `theme.outlineOffset` or `theme.extend.outlineOffset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ outlineOffset: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/outline-style.mdx b/src/pages/ZH/docs/outline-style.mdx new file mode 100644 index 000000000..7f1f34164 --- /dev/null +++ b/src/pages/ZH/docs/outline-style.mdx @@ -0,0 +1,82 @@ +--- +title: "Outline Style" +description: "Utilities for controlling the style of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineStyle' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline style + +Use the `outline-{style}` utilities to change the style of an element's outline. + + +
    +
    +

    outline

    + +
    +
    +

    outline-dashed

    + +
    +
    +

    outline-dotted

    + +
    +
    +

    outline-double

    + +
    +
    +     + +```html + + + + +``` + +### Removing outlines + +Use `outline-none` to hide the default browser outline on focused elements. + +It is highly recommended to apply your own focus styling for accessibility when using this utility. + + +
    + + +
    +     + +```html + + + +``` + +The `outline-none` utility is implemented using a transparent outline under the hood to ensure elements are still visibly focused to [Windows high contrast mode](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/) users. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/outline-width.mdx b/src/pages/ZH/docs/outline-width.mdx new file mode 100644 index 000000000..e7780ca0a --- /dev/null +++ b/src/pages/ZH/docs/outline-width.mdx @@ -0,0 +1,80 @@ +--- +title: "Outline Width" +description: "Utilities for controlling the width of an element's outline." +--- + +import utilities from 'utilities?plugin=outlineWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the outline width + +Use the `outline-{width}` utilities to change the width of an element's outline. + + +
    +
    +

    outline-1

    + +
    +
    +

    outline-2

    + +
    +
    +

    outline-4

    + +
    +
    +     + +```html + + + +``` + +The default outline width is `3px`. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `outline-{width}` utilities by editing `theme.outlineWidth` or `theme.extend.outlineWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ outlineWidth: { ++ 5: '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/overflow.mdx b/src/pages/ZH/docs/overflow.mdx new file mode 100644 index 000000000..cb9c11586 --- /dev/null +++ b/src/pages/ZH/docs/overflow.mdx @@ -0,0 +1,453 @@ +--- +title: "Overflow" +description: "Utilities for controlling how an element handles content that is too large for the container." +--- + +import utilities from 'utilities?plugin=overflow' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Showing content that overflows + +Use `overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible. + + +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +     + +```html +
    +``` + +### Hiding content that overflows + +Use `overflow-hidden` to clip any content within an element that overflows the bounds of that element. + + +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +     + +```html +
    +``` + +### Scrolling if needed + +Use `overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always shows scrollbars, this utility will only show them if scrolling is necessary. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling horizontally if needed + +Use `overflow-x-auto` to allow horizontal scrolling if needed. + + +
    +
    +
    +
    + + Andrew +
    +
    +
    +
    + + Emily +
    +
    +
    +
    + + Whitney +
    +
    +
    +
    + + David +
    +
    +
    +
    + + Kristin +
    +
    +
    +
    + + Sarah +
    +
    +
    +
    +     + +```html +
    +``` + +### Scrolling vertically if needed + +Use `overflow-y-auto` to allow vertical scrolling if needed. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling horizontally always + +Use `overflow-x-scroll` to allow horizontal scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. + + +
    +
    +
    +
    + + Andrew +
    +
    +
    +
    + + Emily +
    +
    +
    +
    + + Whitney +
    +
    +
    +
    + + David +
    +
    +
    +
    + + Kristin +
    +
    +
    +
    + + Sarah +
    +
    +
    +
    +     + +```html +
    +``` + +### Scrolling vertically always + +Use `overflow-y-scroll` to allow vertical scrolling and always show scrollbars unless always-visible scrollbars are disabled by the operating system. + + +
    +
    + +
    + Andrew Alfred + Technical advisor +
    +
    +
    + +
    + Debra Houston + Analyst +
    +
    +
    + +
    + Jane White + Director, Marketing +
    +
    +
    + +
    + Ray Flint + Technical Advisor +
    +
    +
    +     + +```html +
    +``` + +### Scrolling in all directions + +Use `overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems (like macOS) hide unnecessary scrollbars regardless of this setting. + + +
    +
    + +
    +
    Sun
    +
    Mon
    +
    Tue
    +
    Wed
    +
    Thu
    +
    Fri
    +
    Sat
    +
    5 AM
    +
    +
    +
    +
    +
    +
    +
    +
    6 AM
    +
    +
    +
    +
    +
    +
    +
    +
    7 AM
    +
    +
    +
    +
    +
    +
    +
    +
    8 AM
    +
    +
    +
    +
    +
    +
    +
    +
    9 AM
    +
    +
    +
    +
    +
    +
    +
    +
    10 AM
    +
    +
    +
    +
    +
    +
    +
    +
    11 AM
    +
    +
    +
    +
    +
    +
    +
    +
    12 PM
    +
    +
    +
    +
    +
    +
    +
    +
    1 PM
    +
    +
    +
    +
    +
    +
    +
    +
    2 PM
    +
    +
    +
    +
    +
    +
    +
    +
    3 PM
    +
    +
    +
    +
    +
    +
    +
    +
    4 PM
    +
    +
    +
    +
    +
    +
    +
    +
    5 PM
    +
    +
    +
    +
    +
    +
    +
    +
    6 PM
    +
    +
    +
    +
    +
    +
    +
    +
    7 PM
    +
    +
    +
    +
    +
    +
    +
    +
    8 PM
    +
    +
    +
    +
    +
    +
    +
    + +
    + 5 AM + Flight to vancouver + Toronto YYZ +
    +
    + 6 AM + Breakfast + Mel's Diner +
    +
    + 5 PM + 🎉 Party party 🎉 + We like to party! +
    +
    +
    +     + +```html +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/overscroll-behavior.mdx b/src/pages/ZH/docs/overscroll-behavior.mdx new file mode 100644 index 000000000..64424acdc --- /dev/null +++ b/src/pages/ZH/docs/overscroll-behavior.mdx @@ -0,0 +1,72 @@ +--- +title: "Overscroll Behavior" +description: "Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area." +--- + +import utilities from 'utilities?plugin=overscrollBehavior' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Preventing parent overscrolling + +Use `overscroll-contain` to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +### Preventing overscroll bouncing + +Use `overscroll-none` to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +### Using the default overscroll behavior + +Use `overscroll-auto` to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area. + + +
    +

    Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

    +

    Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

    +

    Maybe we can live without libraries, people like you and me. Maybe. Sure, we're too old to change the world, but what about that kid, sitting down, opening a book, right now, in a branch at the local library and finding drawings of pee-pees and wee-wees on the Cat in the Hat and the Five Chinese Brothers? Doesn't HE deserve better?

    +
    +     + +```html +
    Well, let me tell you something, ...
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/padding.mdx b/src/pages/ZH/docs/padding.mdx new file mode 100644 index 000000000..7256641b3 --- /dev/null +++ b/src/pages/ZH/docs/padding.mdx @@ -0,0 +1,168 @@ +--- +title: "Padding" +description: "Utilities for controlling an element's padding." +--- + +import utilities from 'utilities?plugin=padding' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Add padding to a single side + +Control the padding on one side of an element using the `p{t|r|b|l}-{size}` utilities. + +For example, `pt-6` would add `1.5rem` of padding to the top of an element, `pr-4` would add `1rem` of padding to the right of an element, `pb-8` would add `2rem` of padding to the bottom of an element, and `pl-2` would add `0.5rem` of padding to the left of an element. + + +
    +
    +
    +
    +
    +
    pt-6
    +
    +
    +
    +
    +
    pr-4
    +
    +
    +
    +
    +
    +
    +
    +
    pb-8
    +
    +
    +
    +
    +
    +
    +
    pl-2
    +
    +
    +
    +
    +     + +```html +
    pt-6
    +
    pr-4
    +
    pb-8
    +
    pl-2
    +``` + +### Add horizontal padding + +Control the horizontal padding of an element using the `px-{size}` utilities. + + +
    +
    +
    +
    px-8
    +
    +
    +
    +     + +```html +
    px-8
    +``` + +### Add vertical padding + +Control the vertical padding of an element using the `py-{size}` utilities. + + +
    +
    +
    +
    py-8
    +
    +
    +
    +     + +```html +
    py-8
    +``` + +### Add padding to all sides + +Control the padding on all sides of an element using the `p-{size}` utilities. + + +
    +
    +
    p-8
    +
    +
    +     + +```html +
    p-8
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's padding scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the padding scale by editing `theme.padding` or `theme.extend.padding` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ padding: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/place-content.mdx b/src/pages/ZH/docs/place-content.mdx new file mode 100644 index 000000000..de3953b1d --- /dev/null +++ b/src/pages/ZH/docs/place-content.mdx @@ -0,0 +1,207 @@ +--- +title: "Place Content" +description: "Utilities for controlling how content is justified and aligned at the same time." + +--- + +import utilities from 'utilities?plugin=placeContent' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Center + +Use `place-content-center` to pack items in the center of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Start + +Use `place-content-start` to pack items against the start of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-content-end` to to pack items against the end of the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space between + +Use `place-content-between` to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space around + +Use `place-content-around` distribute grid items such that there is an equal amount of space around each row on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Space evenly + +Use `place-content-evenly` to distribute grid items such that they are evenly spaced on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-content-stretch` to stretch grid items along their grid areas on the block axis: + + +
    +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/place-items.mdx b/src/pages/ZH/docs/place-items.mdx new file mode 100644 index 000000000..3cd6ec514 --- /dev/null +++ b/src/pages/ZH/docs/place-items.mdx @@ -0,0 +1,184 @@ +--- +title: "Place Items" +description: "Utilities for controlling how items are justified and aligned at the same time." +--- + +import utilities from 'utilities?plugin=placeItems' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Start + +Use `place-items-start` to place grid items on the start of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-items-end` to place grid items on the end of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `place-items-center` to place grid items on the center of their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-items-stretch` to stretch items along their grid areas on both axis: + + +
    +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/place-self.mdx b/src/pages/ZH/docs/place-self.mdx new file mode 100644 index 000000000..12dbbfbbe --- /dev/null +++ b/src/pages/ZH/docs/place-self.mdx @@ -0,0 +1,160 @@ +--- +title: "Place Self" +description: "Utilities for controlling how an individual item is justified and aligned at the same time." +--- + +import utilities from 'utilities?plugin=placeSelf' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `place-self-auto` to align an item based on the value of the container's `place-items` property: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Start + +Use `place-self-start` to align an item to the start on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Center + +Use `place-self-center` to align an item at the center on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### End + +Use `place-self-end` to align an item to the end on both axes: + + +
    +
    01
    +
    +
    02
    +
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +### Stretch + +Use `place-self-stretch` to stretch an item on both axes: + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/play-cdn.mdx b/src/pages/ZH/docs/play-cdn.mdx new file mode 100644 index 000000000..200b39949 --- /dev/null +++ b/src/pages/ZH/docs/play-cdn.mdx @@ -0,0 +1,6 @@ +--- +title: Play CDN +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +To do. \ No newline at end of file diff --git a/src/pages/ZH/docs/plugins.mdx b/src/pages/ZH/docs/plugins.mdx new file mode 100644 index 000000000..8acccf08c --- /dev/null +++ b/src/pages/ZH/docs/plugins.mdx @@ -0,0 +1,607 @@ +--- +title: Plugins +description: Extending Tailwind with reusable third-party plugins. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Plugins let you register new styles for Tailwind to inject into the user's stylesheet using JavaScript instead of CSS. + +To get started with your first plugin, import Tailwind's `plugin` function from `tailwindcss/plugin`. Then inside your `plugins` array, and call it with an anonymous function as the first argument. + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities, addComponents, e, prefix, config }) { + // Add your custom styles here + }), + ] +} +``` + +Plugin functions receive a single object argument that can be [destructured](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) into several helper functions: + +- `addUtilities()`, for registering new static utility styles +- `matchUtilities()`, for registering new dynamic utility styles +- `addComponents()`, for registering new static component styles +- `matchComponents()`, for registering new dynamic component styles +- `addBase()`, for registering new base styles +- `addVariant()`, for registering custom variants +- `theme()`, for looking up values in the user's theme configuration +- `config()`, for looking up values in the user's Tailwind configuration +- `corePlugins()`, for checking if a core plugin is enabled +- `e()`, for manually escaping strings meant to be used in class names + +--- + +## Official plugins + +We've developed a handful of official plugins for popular features that for one reason or another don't belong in core yet. + +Plugins can be added to your project by installing them via npm, then adding them to your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + // ... + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/forms'), + require('@tailwindcss/line-clamp'), + require('@tailwindcss/aspect-ratio'), + ] +} +``` + + +### Typography + +The `@tailwindcss/typography` plugin adds a set of `prose` classes that can be used to quickly add sensible typographic styles to content blocks that come from sources like markdown or a CMS database. + +```html +
    +

    Garlic bread with cheese: What the science tells us

    +

    + For years parents have espoused the health benefits of eating garlic bread with cheese to their + children, with the food earning such an iconic status in our culture that kids will often dress + up as warm, cheesy loaf for Halloween. +

    +

    + But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases + springing up around the country. +

    + +
    +``` + +[Learn more about the typography plugin →](https://github.com/tailwindlabs/tailwindcss-typography) + +### Forms + +The `@tailwindcss/forms` plugin adds an opinionated form reset layer that makes it easier to style form elements with utility classes. + +```html + + + + + +``` + +[Learn more about the forms plugin →](https://github.com/tailwindlabs/tailwindcss-forms) + +### Line-clamp + +The `@tailwindcss/line-clamp` plugin adds `line-clamp-{lines}` classes you can use to truncate text to a fixed number of lines. + +```html +

    + Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis + dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate + possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit. +

    +``` + +[Learn more about the line-clamp plugin →](https://github.com/tailwindlabs/tailwindcss-line-clamp) + +### Aspect ratio + +The `@tailwindcss/aspect-ratio` plugin adds `aspect-w-{n}` and `aspect-h-{n}` classes that can be combined to give an element a fixed aspect ratio. + +```html +
    + +
    +``` + +[Learn more about the aspect ratio plugin →](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) + +--- + +## Adding utilities + +The `addUtilities` and `matchUtilities` functions allow you to register new styles in Tailwind's `utilities` layer. + +Like with the utilities Tailwind includes by default, utilities added by a plugin will only be included in the generated CSS if they are actually being used in the project. + +### Static utilities + +Use the `addUtilities` function to register simple static utilities that don't support user-provided values: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addUtilities }) { + addUtilities({ + '.content-auto': { + 'content-visibility': 'auto', + }, + '.content-hidden': { + 'content-visibility': 'hidden', + }, + '.content-visible': { + 'content-visibility': 'visible', + }, + }) + }) + ] +} +``` + +Learn more about to represent your styles in JavaScript in the [CSS-in-JS syntax](#css-in-js-syntax) reference. + +### Dynamic utilities + +Use the `matchUtilities` function to register utilities that map to values defined in the user's `theme` configuration: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + theme: { + tabSize: { + 1: '1', + 2: '2', + 4: '4', + 8: '8', + } + }, + plugins: [ + plugin(function({ matchUtilities, theme }) { + matchUtilities( + { + tab: (value) => ({ + tabSize: value + }), + }, + { values: theme('tabSize') } + ) + }) + ] +} +``` + +Utilities defined this way also support [arbitrary values](/docs/adding-custom-styles#using-arbitrary-values), which means you can use values not present in the theme using square bracket notation: + +```html +
    + +
    +``` + +### Prefix and important + +By default, plugin utilities automatically respect the user's [`prefix`](/docs/configuration/#prefix) and [`important`](/docs/configuration/#important) preferences. + +That means that given this Tailwind configuration: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', + important: true, + // ... +} +``` + +...the example plugin above would generate the following CSS: + +```css +.tw-content-auto { + content-visibility: auto !important; +} +.tw-content-hidden { + content-visibility: hidden !important; +} +.tw-content-visible { + content-visibility: visible !important; +} +``` + +### Using with modifiers + +Any custom utilities added using `addUtilities` can automatically be used with modifiers: + +```html +
    + +
    +``` + +Learn more in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +--- + +## Adding components + +The `addComponents` function allows you to register new styles in Tailwind's `components` layer. + +Use it to add more opinionated, complex classes like buttons, form controls, alerts, etc; the sort of pre-built components you often see in other frameworks that you might need to override with utility classes. + +To add new component styles from a plugin, call `addComponents`, passing in your styles using [CSS-in-JS syntax](#css-in-js-syntax): + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addComponents }) { + addComponents({ + '.btn': { + padding: '.5rem 1rem', + borderRadius: '.25rem', + fontWeight: '600', + }, + '.btn-blue': { + backgroundColor: '#3490dc', + color: '#fff', + '&:hover': { + backgroundColor: '#2779bd' + }, + }, + '.btn-red': { + backgroundColor: '#e3342f', + color: '#fff', + '&:hover': { + backgroundColor: '#cc1f1a' + }, + }, + }) + }) + ] +} +``` + +Like with other component classes in Tailwind, component classes added by a plugin will only be included in the generated CSS if they are actually being used in the project. + +### Prefix and important + +By default, component classes automatically respect the user's `prefix` preference, but _they are not affected_ by the user's `important` preference. + +That means that given this Tailwind configuration: + +```js tailwind.config.js +module.exports = { + prefix: 'tw-', + important: true, + // ... +} +``` + +...the example plugin above would generate the following CSS: + +```css +.tw-btn { + padding: .5rem 1rem; + border-radius: .25rem; + font-weight: 600; +} +.tw-btn-blue { + background-color: #3490dc; + color: #fff; +} +.tw-btn-blue:hover { + background-color: #2779bd; +} +.tw-btn-red { + background-color: #e3342f; + color: #fff; +} +.tw-btn-red:hover { + background-color: #cc1f1a; +} +``` + +Although there's rarely a good reason to make component declarations important, if you really need to do it you can always add `!important` manually: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addComponents }) { + addComponents({ + '.btn': { + padding: '.5rem 1rem !important', + borderRadius: '.25rem !important', + fontWeight: '600 !important', + }, + // ... + }) + }) + ] +} +``` + +All classes in a selector will be prefixed by default, so if you add a more complex style like: + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + prefix: 'tw-', + plugins: [ + plugin(function({ addComponents }) { + const components = { + // ... + '.navbar-inverse a.nav-link': { + color: '#fff', + } + } + + addComponents(components) + }) + ] +} +``` + +...the following CSS would be generated: + +```css +.tw-navbar-inverse a.tw-nav-link { + color: #fff; +} +``` + +### Using with modifiers + +Any component classes added using `addComponents` can automatically be used with modifiers: + +```html +
    + +
    +``` + +Learn more in the [Hover, Focus, and Other States](/docs/hover-focus-and-other-states) documentation. + +--- + +## Adding base styles + +The `addBase` function allows you to register new styles in Tailwind's `base` layer. Use it to add things like base typography styles, opinionated global resets, or `@font-face` rules. + +To add new base styles from a plugin, call `addBase`, passing in your styles using [CSS-in-JS syntax](#css-in-js-syntax): + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + plugins: [ + plugin(function({ addBase, theme }) { + addBase({ + 'h1': { fontSize: theme('fontSize.2xl') }, + 'h2': { fontSize: theme('fontSize.xl') }, + 'h3': { fontSize: theme('fontSize.lg') }, + }) + }) + ] +} +``` + +Since base styles are meant to target bare selectors like `div` or `h1`, they do not respect the user's `prefix` or `important` configuration. + +--- + +## Adding variants + +The `addVariant` function allows you to register your own custom [modifiers](/docs/hover-focus-and-other-states) that can be used just like the built-in hover, focus, active, etc. variants. + +To add a new variant, call the `addVariant` function, passing in the name of your custom variant, and a format string that represents how the selector should be modified. + +```js tailwind.config.js +const plugin = require('tailwindcss/plugin') + +module.exports = { + // ... + plugins: [ + plugin(function({ addVariant }) { + addVariant('optional', '&:optional') + addVariant('hocus', ['&:hover', '&:focus']) + addVariant('supports-grid', '@supports (display: grid)') + }) + ] +} +``` + +The first argument is the modifier name that users will use in their HTML, so the above example would make it possible to write classes like these: + +```html +
    + + +
    +``` + +--- + +## Exposing options + +Sometimes it makes sense for a plugin to be configurable in a way that doesn't really belong under `theme`, like perhaps you want users to be able to customize the class name your plugin uses. + +For cases like this, you can use `plugin.withOptions` to define a plugin that can be invoked with a configuration object. This API is similar to the regular `plugin` API, except each argument should be a function that receives the user's `options` and returns the value that you would have normally passed in using the regular API: + +```js ./plugins/markdown.js +const plugin = require('tailwindcss/plugin') + +module.exports = plugin.withOptions(function (options) { + return function({ addComponents }) { + const className = options.className ?? 'markdown' + + addComponents({ + [`.${className}`]: { + // ... + } + }) + } +}, function (options) { + return { + theme: { + markdown: { + // ... + } + }, + } +}) +``` + +The user would invoke your plugin passing along their options when registering it in their `plugins` configuration: + +```js tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('./plugins/markdown.js')({ + className: 'wysiwyg' + }) + ], +} +``` + +The user can also register plugins created this way normally without invoking them if they don't need to pass in any custom options: + +```js tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('./plugins/markdown.js') + ], +} +``` + +--- + +## CSS-in-JS syntax + +Tailwind's plugin system expect CSS rules written as JavaScript objects, using the same sort of syntax you might recognize from CSS-in-JS libraries like [Emotion](https://emotion.sh/docs/object-styles), powered by [postcss-js](https://github.com/postcss/postcss-js) under-the-hood. + +Consider this simple CSS rule: + +```css +.card { + background-color: #fff; + border-radius: .25rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); +} +``` + +Translating this to a CSS-in-JS object would look like this: + +```js +addComponents({ + '.card': { + 'background-color': '#fff', + 'border-radius': '.25rem', + 'box-shadow': '0 2px 4px rgba(0,0,0,0.2)', + } +}) +``` + +For convenience, property names can also be written in camelCase and will be automatically translated to dash-case: + +```js +addComponents({ + '.card': { + backgroundColor: '#fff', + borderRadius: '.25rem', + boxShadow: '0 2px 4px rgba(0,0,0,0.2)', + } +}) +``` + +Nesting is also supported (powered by [postcss-nested](https://github.com/postcss/postcss-nested)), using the same syntax you might be familiar with from Sass or Less: + +```js +addComponents({ + '.card': { + backgroundColor: '#fff', + borderRadius: '.25rem', + boxShadow: '0 2px 4px rgba(0,0,0,0.2)', + '&:hover': { + boxShadow: '0 10px 15px rgba(0,0,0,0.2)', + }, + '@media (min-width: 500px)': { + borderRadius: '.5rem', + } + } +}) +``` + +Multiple rules can be defined in the same object: + +```js +addComponents({ + '.btn': { + padding: '.5rem 1rem', + borderRadius: '.25rem', + fontWeight: '600', + }, + '.btn-blue': { + backgroundColor: '#3490dc', + color: '#fff', + '&:hover': { + backgroundColor: '#2779bd' + }, + }, + '.btn-red': { + backgroundColor: '#e3342f', + color: '#fff', + '&:hover': { + backgroundColor: '#cc1f1a' + }, + }, +}) +``` + +...or as an array of objects in case you need to repeat the same key: + +```js +addComponents([ + { + '@media (min-width: 500px)': { + // ... + } + }, + { + '@media (min-width: 500px)': { + // ... + } + }, + { + '@media (min-width: 500px)': { + // ... + } + }, +]) +``` \ No newline at end of file diff --git a/src/pages/ZH/docs/pointer-events.mdx b/src/pages/ZH/docs/pointer-events.mdx new file mode 100644 index 000000000..c6691e24d --- /dev/null +++ b/src/pages/ZH/docs/pointer-events.mdx @@ -0,0 +1,76 @@ +--- +title: "Pointer Events" +description: "Utilities for controlling whether an element responds to pointer events." +--- + +import utilities from 'utilities?plugin=pointerEvents' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling pointer event behavior + +Use `pointer-events-auto` to revert to the default browser behavior for pointer events (like `:hover` and `click`). + +Use `pointer-events-none` to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target. + + +
    +
    +

    pointer-events-auto

    +
    +
    + + + +
    + +
    +
    +
    +

    pointer-events-none

    +
    +
    + + + +
    + +
    +
    +
    +     + +```html +
    +
    + + + +
    + +
    + +
    +
    + + + +
    + +
    +``` + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/position.mdx b/src/pages/ZH/docs/position.mdx new file mode 100644 index 000000000..ac5b3a9af --- /dev/null +++ b/src/pages/ZH/docs/position.mdx @@ -0,0 +1,303 @@ +--- +title: "Position" +description: "Utilities for controlling how an element is positioned in the DOM." +--- + +import utilities from 'utilities?plugin=position' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Statically positioning elements + +Use `static` to position an element according to the normal flow of the document. + +Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children. + + +
    +
    +
    +

    Static parent

    +
    +

    Absolute child

    +
    +
    +
    +
    +     + +```html +
    +

    Static parent

    +
    +

    Absolute child

    +
    +
    +``` + +### Relatively positioning elements + +Use `relative` to position an element according to the normal flow of the document. + +Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    +

    Relative parent

    +
    +

    Absolute child

    +
    +
    +
    +
    +     + +```html +
    +

    Relative parent

    +
    +

    Absolute child

    +
    +
    +``` + +### Absolutely positioning elements + +Use `absolute` to position an element *outside* of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist. + +Offsets are calculated relative to the nearest parent that has a position other than `static`, and the element *will* act as a position reference for other absolutely positioned children. + + +
    +
    +

    With static positioning

    +
    +
    +

    Relative parent

    +
    +

    Static parent

    +
    +
    +

    Static child

    +
    +
    +

    Static sibling

    +
    +
    +
    +
    +
    +
    +
    +

    With absolute positioning

    +
    +
    +

    Relative parent

    +
    +

    Static parent

    +
    +
    +

    Absolute child

    +
    +
    +

    Static sibling

    +
    +
    +
    +
    +
    +
    +
    +     + +```html +
    + +

    Static child

    +

    Static sibling

    + +

    Absolute child

    +

    Static sibling

    +
    +``` + +### Fixed positioning elements + +Use `fixed` to position an element relative to the browser window. + +Offsets are calculated relative to the viewport and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    Contacts
    +
    +
    + + Andrew Alfred +
    +
    + + Debra Houston +
    +
    + + Jane White +
    +
    + + Ray Flint +
    +
    + + Mindy Albrect +
    +
    + + David Arnold +
    +
    +
    +
    +     + +```html +
    +
    Contacts
    +
    +
    + + Andrew Alfred +
    +
    + + Debra Houston +
    + +
    +
    +``` + +### Sticky positioning elements + +Use `sticky` to position an element as `relative` until it crosses a specified threshold, then treat it as fixed until its parent is off screen. + +Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children. + + +
    +
    +
    +
    A
    +
    +
    + + Andrew Alfred +
    +
    + + Aisha Houston +
    +
    + + Anna White +
    +
    + + Andy Flint +
    +
    +
    +
    +
    B
    +
    +
    + + Bob Alfred +
    +
    + + Bianca Houston +
    +
    + + Brianna White +
    +
    + + Bert Flint +
    +
    +
    +
    +
    C
    +
    +
    + + Colton Alfred +
    +
    + + Cynthia Houston +
    +
    + + Cheyenne White +
    +
    + + Charlie Flint +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    A
    +
    +
    + + Andrew Alfred +
    +
    + + Aisha Houston +
    + +
    +
    +
    +
    B
    +
    +
    + + Bob Alfred +
    + +
    +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/preflight.mdx b/src/pages/ZH/docs/preflight.mdx new file mode 100644 index 000000000..0db2dab9a --- /dev/null +++ b/src/pages/ZH/docs/preflight.mdx @@ -0,0 +1,236 @@ +--- +title: Preflight +description: An opinionated set of base styles for Tailwind projects. +--- + +import { Heading } from '@/components/Heading' +import { ConfigSample } from '@/components/ConfigSample' + +## + +Built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize), Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system. + +Tailwind automatically injects these styles when you include `@tailwind base` in your CSS: + +```css +@tailwind base; /* Preflight will be injected here */ + +@tailwind components; + +@tailwind utilities; +``` + +While most of the styles in Preflight are meant to go unnoticed — they simply make things behave more like you'd expect them to — some are more opinionated and can be surprising when you first encounter them. + +For a complete reference of all the styles applied by Preflight, [see the stylesheet](https://unpkg.com/tailwindcss@^2/dist/base.css). + +--- + +## Default margins are removed + +Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc. + +```css +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} +``` + +This makes it harder to accidentally rely on margin values applied by the user-agent stylesheet that are not part of your spacing scale. + +--- + +## Headings are unstyled + +All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text. + +```css +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} +``` + +The reason for this is two-fold: + +- **It helps you avoid accidentally deviating from your type scale**. By default, the browsers assigns sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale. +- **In UI development, headings should often be visually de-emphasized**. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately. + +You can always add default header styles to your project by [adding your own base styles](/docs/adding-base-styles). + +If you'd like to selectively introduce sensible default heading styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](/docs/typography-plugin/). + +--- + +## Lists are unstyled + +Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding. + +```css +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} +``` + +If you'd like to style a list, you can do so using the [list-style-type](/docs/list-style-type) and [list-style-position](/docs/list-style-position) utilities: + +```html +
      +
    • One
      • +
    • Two
      • +
    • Three
      • +
    +``` + +You can always add default list styles to your project by [adding your own base styles](/docs/adding-base-styles). + +If you'd like to selectively introduce default list styles into article-style parts of a page, we recommend the [@tailwindcss/typography plugin](/docs/typography-plugin/). + +### Accessibility considerations + +Unstyled lists are [not announced as lists by VoiceOver](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/). If your content is truly a list but you would like to keep it unstyled, [add a "list" role](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) to the element: + +```html +
      +
    • One
      • +
    • Two
      • +
    • Three
      • +
    +``` + +--- + +## Images are block-level + +Images and other replaced elements (like `svg`, `video`, `canvas`, and others) are `display: block` by default. + +```css +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + vertical-align: middle; +} +``` + +This helps to avoid unexpected alignment issues that you often run into using the browser default of `display: inline`. + +If you ever need to make one of these elements `inline` instead of `block`, simply use the `inline` utility: + +```html +... +``` + +--- + +## Border styles are reset globally + +In order to make it easy to add a border by simply adding the `border` class, Tailwind overrides the default border styles for all elements with the following rules: + +```css +*, +::before, +::after { + border-width: 0; + border-style: solid; + border-color: theme('borderColor.DEFAULT', currentColor); +} +``` + +Since the `border` class only sets the `border-width` property, this reset ensures that adding that class always adds a solid 1px border using your configured default border color. + +This can cause some unexpected results when integrating certain third-party libraries, like [Google maps](https://github.com/tailwindlabs/tailwindcss/issues/484) for example. + +When you run into situations like this, you can work around them by overriding the Preflight styles with your own custom CSS: + +```css +.google-map * { + border-style: none; +} +``` + +--- + +## Buttons have a default outline + +To ensure that we provide accessible styles out of the box, we made sure +that buttons have a default outline. You can of course override this by +applying `focus:ring` or similar utilities to your buttons. + +```css +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} +``` + +--- + +## Extending Preflight + +If you'd like to add your own base styles on top of Preflight, simply add them to your CSS within a `@layer base` directive: + +```css +@tailwind base; + +@layer base { + h1 { + @apply text-2xl; + } + h2 { + @apply text-xl; + } + h3 { + @apply text-lg; + } + a { + @apply text-blue-600 underline; + } +} + +@tailwind components; + +@tailwind utilities; +``` + +Learn more in the [adding base styles documentation](/docs/adding-base-styles). + +--- + +## Disabling Preflight + +If you'd like to completely disable Preflight — perhaps because you're integrating Tailwind into an existing project or because you'd like to provide your own base styles — all you need to do is set `preflight` to `false` in the `corePlugins` section of your `tailwind.config.js` file: + + +```diff-js tailwind.config.js + module.exports = { ++ corePlugins: { ++ preflight: false, ++ } + } +``` diff --git a/src/pages/ZH/docs/presets.mdx b/src/pages/ZH/docs/presets.mdx new file mode 100644 index 000000000..505f70e7d --- /dev/null +++ b/src/pages/ZH/docs/presets.mdx @@ -0,0 +1,260 @@ +--- +title: Presets +description: Creating your own reusable configuration presets. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { ThemeReference } from '@/components/ThemeReference' + +By default, any configuration you add in your own `tailwind.config.js` file is intelligently merged with the [default configuration](https://unpkg.com/browse/tailwindcss@^2/stubs/defaultConfig.stub.js), with your own configuration acting as a set of overrides and extensions. + +The `presets` option lets you specify a _different_ configuration to use as your base, making it easy to package up a set of customizations that you'd like to reuse across projects. + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/tailwind-base') + ], + // ... +} +``` + +This can be very useful for teams that manage multiple Tailwind projects for the same brand where they want a single source of truth for colors, fonts, and other common customizations. + +--- + +## Creating a preset + +Presets are just regular Tailwind configuration objects, taking the exact same shape as the configuration you would add in your `tailwind.config.js` file. + +```js my-preset.js +// Example preset +module.exports = { + theme: { + colors: { + blue: { + light: '#85d7ff', + DEFAULT: '#1fb6ff', + dark: '#009eeb', + }, + pink: { + light: '#ff7ce5', + DEFAULT: '#ff49db', + dark: '#ff16d1', + }, + gray: { + darkest: '#1f2d3d', + dark: '#3c4858', + DEFAULT: '#c0ccda', + light: '#e0e6ed', + lightest: '#f9fafc', + } + }, + fontFamily: { + sans: ['Graphik', 'sans-serif'], + }, + extend: { + flexGrow: { + 2: '2', + 3: '3', + }, + zIndex: { + 60: '60', + 70: '70', + 80: '80', + 90: '90', + 100: '100', + }, + } + }, + plugins: [ + require('@tailwindcss/typography'), + require('@tailwindcss/aspect-ratio'), + ], +} +``` + +As you can see, presets can contain all of the configuration options you're used to, including theme overrides and extensions, adding plugins, configuring a prefix, and so on. Read about [how configurations are merged](#how-configurations-are-merged) for more details. + +Assuming this preset was saved at `./my-preset.js`, you would use it by adding it to the `tailwind.config.js` file in your actual project under the `presets` key: + +```js tailwind.config.js +module.exports = { + presets: [ + require('./my-preset.js') + ], + // Customizations specific to this project would go here + theme: { + extend: { + minHeight: { + 48: '12rem', + } + } + }, + variants: { + extend: { + backgroundColor: ['active'] + }, + }, +} +``` + +By default, presets themselves extend Tailwind's [default configuration](https://unpkg.com/browse/tailwindcss@^3/stubs/defaultConfig.stub.js) just like your own configuration would. If you'd like to create a preset that completely replaces the default configuration, include an empty `presets` key in the preset itself: + +```js +// Example preset +module.exports = { + presets: [], + theme: { + // ... + }, + plugins: [ + // ... + ], +} +``` + +For more information, read about [disabling the default configuration](#disabling-the-default-configuration). + +--- + +## Merging logic in-depth + +Project-specific configurations (those found in your `tailwind.config.js` file) are merged against presets the same way they are merged against the default configuration. + +The following options in `tailwind.config.js` simply **replace** the same option if present in a preset: + +- `purge` +- `darkMode` +- `prefix` +- `important` +- `variantOrder` +- `separator` + +The remaining options are each carefully merged in the way that makes the most sense for that option, explained in more detail below. + +### Theme + +The `theme` object is merged shallowly, with top-level keys in `tailwind.config.js` replacing the same top-level keys in any presets. The exception to this is the `extend` key, which is collected across all configurations and applied on top of the rest of the theme configuration. + +Learn more about how the `theme` option works in the [theme configuration documentation](/docs/theme). + +### Presets + +The `presets` array is merged across configurations, allowing presets to include their own presets, which can also include their own presets. + +### Plugins + +The `plugins` array is merged across configurations to make it possible for a preset to register plugins while also allowing you to add additional plugins at the project-level. + +This means it's not possible to disable a plugin that has been added by a preset. If you find yourself wanting to disable a plugin in a preset, it's a sign that you should probably remove that plugin from the preset and include it on a project-by-project basis instead, or [split your preset into two presets](#extending-multiple-presets). + +### Core plugins + +The `corePlugins` option behaves differently depending on whether you configure it as an object or as an array. + +If you configure `corePlugins` as an object, it is merged across configurations. + +```js my-preset.js +module.exports = { + // ... + corePlugins: { + float: false, + }, +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./my-preset.js'), + ], + // This configuration will be merged + corePlugins: { + cursor: false + } +} +``` + +If you configure `corePlugins` as an array, it replaces any `corePlugins` configuration provided by your configured preset(s). + +```js my-preset.js +module.exports = { + // ... + corePlugins: { + float: false, + }, +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./example-preset.js'), + ], + // This will replace the configuration in the preset + corePlugins: ['float', 'padding', 'margin'] +} +``` + +--- + +## Extending multiple presets + +The `presets` option is an array and can accept multiple presets. This is useful if you want to split your reusable customizations up into composable chunks that can be imported independently. + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/tailwind-colors'), + require('@acmecorp/tailwind-fonts'), + require('@acmecorp/tailwind-spacing'), + ] +} +``` + +When adding multiple presets, it's important to note that if they overlap in any way, they are resolved the same way your own customizations are resolved against a preset, and the last configuration wins. + +For example, if both of these configurations provided a custom color palette (and were not using `extend`), the color palette from `configuration-b` would be used: + +```js tailwind.config.js +module.exports = { + presets: [ + require('@acmecorp/configuration-a'), + require('@acmecorp/configuration-b'), + ] +} +``` + +--- + +## Disabling the default configuration + +If you'd like to completely disable the default configuration and start with no base configuration at all, set `presets` to an empty array: + +```js tailwind.config.js +module.exports = { + presets: [], + // ... +} +``` + +This will completely disable all of Tailwind's defaults, so no colors, font families, font sizes, spacing values, etc. will be generated at all. + +You can also do this from within a preset if you'd like your preset to provide a complete design system on its own that doesn't extend Tailwind's defaults: + +```js my-preset.js +module.exports = { + presets: [], + // ... +} +``` + +```js tailwind.config.js +module.exports = { + presets: [ + require('./example-preset.js') + ], + // ... +} +``` diff --git a/src/pages/ZH/docs/resize.mdx b/src/pages/ZH/docs/resize.mdx new file mode 100644 index 000000000..51d1abc94 --- /dev/null +++ b/src/pages/ZH/docs/resize.mdx @@ -0,0 +1,81 @@ +--- +title: "Resize" +description: "Utilities for controlling how an element can be resized." +--- + +import utilities from 'utilities?plugin=resize' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Resizing in all directions + +Use `resize` to make an element horizontally and vertically resizable. + + +
    + +
    +     + +```html + +``` + +### Resizing vertically + +Use `resize-y` to make an element vertically resizable. + + +
    + +
    +     + +```html + +``` + +### Resizing horizontally + +Use `resize-x` to make an element horizontally resizable. + + +
    + +
    +     + +```html + +``` + +### Preventing resizing + +Use `resize-none` to prevent an element from being resizable. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/responsive-design.mdx b/src/pages/ZH/docs/responsive-design.mdx new file mode 100644 index 000000000..042223581 --- /dev/null +++ b/src/pages/ZH/docs/responsive-design.mdx @@ -0,0 +1,128 @@ +--- +title: Responsive Design +description: Using responsive utility variants to build adaptive user interfaces. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' + +## + +Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML. + +There are five breakpoints by default, inspired by common device resolutions: + +| Breakpoint prefix | Minimum width | CSS | +| --- | --- | --- | +| `sm` | 640px | `@media (min-width: 640px) { ... }` | +| `md` | 768px | `@media (min-width: 768px) { ... }` | +| `lg` | 1024px | `@media (min-width: 1024px) { ... }` | +| `xl` | 1280px | `@media (min-width: 1280px) { ... }` | +| `2xl` | 1536px | `@media (min-width: 1536px) { ... }` | + +To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the `:` character: + +```html + + +``` + +This works for **every utility class in the framework**, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles. + +Here's a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens *(resize your browser to see it in action)*: + + + + + +```html +
    +
    +
    + Man looking at item at a store +
    +
    +
    Case study
    + Finding customers for your new business +

    Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

    +
    +
    +
    +``` + +Here's how the example above works: + +- By default, the outer `div` is `display: block`, but by adding the `md:flex` utility, it becomes `display: flex` on medium screens and larger. +- When the parent is a flex container, we want to make sure the image never shrinks, so we've added `md:shrink-0` to prevent shrinking on medium screens and larger. Technically we could have just used `shrink-0` since it would do nothing on smaller screens, but since it only matters on `md` screens, it's a good idea to make that clear in the class name. +- On small screens the image is automatically full width by default. On medium screens and up, we've constrained the width to a fixed size and ensured the image is full height using `md:h-full md:w-48`. + +We've only used one breakpoint in this example, but you could easily customize this component at other sizes using the `sm`, `lg`, `xl`, or `2xl` responsive prefixes as well. + +--- + +## Mobile First + +By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap. + +What this means is that unprefixed utilities (like `uppercase`) take effect on all screen sizes, while prefixed utilities (like `md:uppercase`) only take effect at the specified breakpoint *and above*. + +### Targeting mobile screens + +Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the `sm:` prefixed version. Don't think of `sm:` as meaning "on small screens", think of it as "at the small *breakpoint*". + +Don't use sm: to target mobile devices + +```html + +
    +``` + +Use unprefixed utilities to target mobile, and override them at larger breakpoints + +```html + +
    +``` + +For this reason, it's often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for `sm` screens, followed by `md` screens, etc. + +### Targeting a single breakpoint + +Tailwind's breakpoints only include a `min-width` and don't include a `max-width`, which means any utilities you add at a smaller breakpoint will also be applied at larger breakpoints. + +If you'd like to apply a utility at one breakpoint only, the solution is to *undo* that utility at larger sizes by adding another utility that counteracts it. + +Here is an example where the background color is red at the `md` breakpoint, but green at every other breakpoint: + +```html +
    + +
    +``` + +Notice that **we did not** have to specify a background color for the `sm` breakpoint or the `xl` breakpoint — you only need to specify when a utility should *start* taking effect, not when it should stop. + +--- + +## Customizing breakpoints + +You can completely customize your breakpoints in your `tailwind.config.js` file: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'tablet': '640px', + // => @media (min-width: 640px) { ... } + + 'laptop': '1024px', + // => @media (min-width: 1024px) { ... } + + 'desktop': '1280px', + // => @media (min-width: 1280px) { ... } + }, + } +} +``` + +Learn more in the [customizing breakpoints documentation](/docs/breakpoints). diff --git a/src/pages/ZH/docs/reusing-styles.mdx b/src/pages/ZH/docs/reusing-styles.mdx new file mode 100644 index 000000000..752d030ad --- /dev/null +++ b/src/pages/ZH/docs/reusing-styles.mdx @@ -0,0 +1,331 @@ +--- +title: Reusing Styles +description: Managing duplication and creating reusable abstractions. +--- + +import { TipGood, TipBad, TipInfo } from '@/components/Tip' +import { MultiCursorDemo } from '@/components/MultiCursorDemo' + +Tailwind encourages a [utility-first](/docs/utility-first) workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. + +But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places. + +For example, in the template below you can see the utility classes for each avatar image are repeated six separate times: + + +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +     + +```html +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +``` + +Don't panic! In this guide, you'll learn about different strategies for reusing styles in your project, as well as best practices for when to employ each one. + +--- + +## Using editor and language features + +A lot of the time duplication like this isn't even a real problem because it's all together in one place, or doesn't even actually exist because you're iterating over an array of items and only writing the markup once. + +If the styles you need to reuse only need to be reused within a single file, multi-cursor editing and loops are the simplest way to manage any duplication. + +### Multi-cursor editing + +When duplication is localized to a group of elements in a single file, the easiest way to deal with it to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once: + + + +You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction. + +### Loops + +Before you assume you're going to need to extract a component or create a custom class for something, make sure you're _actually_ using it more than once in your template. + +A lot of the time a design element that shows up more than once in the rendered page is only actually authored once because the actual markup is rendered in a loop. + +For example, the duplicate avatars at the beginning of this guide would almost certainly be rendered in a loop in a real project: + + +
    +
    +

    Contributors

    + 204 +
    +
    + + + + + +
    +
    + + 198 others +
    +
    +     + +```html +
    +
    +

    Contributors

    + 204 +
    +
    +** {#each contributors as user}** +** {user.handle}** +** {/each}** +
    +
    + + 198 others +
    +
    +``` + +You could even rewrite the navigation example using a loop or `map` if you preferred as well: + + +
    +
    + +
    +
    +     + +```jsx + +``` + +When elements are rendered in a loop like this, the actual class list is only written once so there's no actual duplication problem to solve. + +--- + +## Extracting components and partials + +If you need to reuse some styles across multiple files, the best strategy is to create a _component_ if you're using a front-end framework like React, Svelte, or Vue, or a _template partial_ if you're using a templating language like Blade, ERB, Twig, or Nunjucks. + + +
    +
    + Beach +
    +
    +
    Private Villa
    +
    + Relaxing All-Inclusive Resort in Cancun +
    +
    $299 USD per night
    +
    +
    +
    +
    +     + +```html VacationCard.vue + + + +``` + +Now you can use this component in as many places as you like, while still having a single source of truth for the styles so they can easily be updated together in one place. + +### Compared to CSS abstractions + +Unless a component is a single HTML element, the information needed to define it can't be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS. + +Don't rely on CSS classes to extract complex components + + +
    +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +
    +     + +```html + +
    +
    + +
    +
    +

    ChitChat

    +

    You have a new message!

    +
    +
    + + +``` + +Even if you create classes for the different elements in a component like this, _you still have to duplicate the HTML every time you want to use this component_. Sure you can update the font-size for every instance in a single place, but what if you need to turn the title into a link? + +Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML _and_ the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too. + +Create a template partial or JavaScript component + + +
    +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +
    +     + +```jsx Notification.jsx +function Notification({ imageUrl, imageAlt, title, message }) { + return ( +
    +
    + {imageAlt} +
    +
    +
    {title}
    +

    {message}

    +
    +
    + ) +} +``` + +When you create components and template partials like this, there's no reason to use anything other than utility classes because you already have a single source of truth for the styles. + +--- + +## Extracting classes with @apply + +If you're using a traditional templating language like ERB or Twig, creating a template partial for something as small as a button can feel like overkill compared to a simple CSS class like `btn`. + +While it's highly recommended that you create proper template partials for more complex components, you can use Tailwind's `@apply` directive to extract repeated utility patterns to custom CSS classes when a template partial feels heavy-handed. + +Here's what a `btn-primary` class might look like using `@apply` to compose it from existing utilities: + + +
    + +
    +     + +```html HTML + + + + + +``` + +
    + +```css 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; + } +} +``` + +Learn more about `@apply` and `@layer` in the [Functions & Directives](/docs/functions-and-directives#layer) documentation. + + +### Avoiding premature abstraction + +Whatever you do, **don't use @apply just to make things look "cleaner"**. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. + +If you start using `@apply` for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example: + +- **You have to think up class names all the time** — nothing will slow you down or drain your energy like coming up with a class name for something that doesn't deserve to be named. +- **You have to jump between multiple files to make changes** — which is a way bigger workflow killer than you'd think before co-locating everything together. +- **Changing styles is scarier** — CSS is global, are you _sure_ you can change the min-width value in that class without breaking something in another part of the site? +- **Your CSS bundle will be bigger** — oof. + +If you're going to use `@apply`, use it for very small, highly reusable things like buttons and form controls — and even then only if you're not using a framework like React where a component would be a better choice. diff --git a/src/pages/ZH/docs/ring-color.mdx b/src/pages/ZH/docs/ring-color.mdx new file mode 100644 index 000000000..75eedb4ab --- /dev/null +++ b/src/pages/ZH/docs/ring-color.mdx @@ -0,0 +1,83 @@ +--- +title: "Ring Color" +description: "Utilities for setting the color of outline rings." +--- + +import utilities from 'utilities?plugin=ringColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-ring-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-ring-opacity)', '') + }) + return properties + } +} + +## Basic usage + +### Setting the ring color + +Use the `ring-{color}` utilities to set the color of an [outline ring](/docs/ring-width). + + +
    + +
    +     + +```html + +``` + +### Changing the opacity + +Control the opacity of an element's background color using the color opacity modifier. + + +
    + +
    +     + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-offset-color.mdx b/src/pages/ZH/docs/ring-offset-color.mdx new file mode 100644 index 000000000..e396cc3ab --- /dev/null +++ b/src/pages/ZH/docs/ring-offset-color.mdx @@ -0,0 +1,79 @@ +--- +title: "Ring Offset Color" +description: "Utilities for setting the color of outline ring offsets." +--- + +import utilities from 'utilities?plugin=ringOffsetColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + properties['box-shadow'] = `0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow)` + return properties + } +} + + +## Basic usage + +### Setting the ring offset color + +Use the `ring-offset-{color}` utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren't actually possible in CSS. + + +
    +
    +

    ring-offset-purple-100

    + +
    +
    +     + +```html + +``` + + +### Changing the opacity + +Control the opacity of an element's ring offset color using the color opacity modifier. + +```html + +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-offset-width.mdx b/src/pages/ZH/docs/ring-offset-width.mdx new file mode 100644 index 000000000..d5e0f4289 --- /dev/null +++ b/src/pages/ZH/docs/ring-offset-width.mdx @@ -0,0 +1,108 @@ +--- +title: "Ring Offset Width" +description: "Utilities for simulating an offset when adding outline rings." +--- + +import utilities from 'utilities?plugin=ringOffsetWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + properties['box-shadow'] = `0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow)` + return properties + } +} + + +## Basic usage + +### Setting the ring offset width + +Use the `ring-offset-{width}` utilities to simulate an offset by adding solid white box-shadow and increasing the thickness of the accompanying outline ring to accommodate the offset. + + +
    +
    +

    ring-offset-0

    + +
    +
    +

    ring-offset-2

    + +
    +
    +

    ring-offset-4

    + +
    +
    +     + +```html + + + +``` + +### Changing the offset color + +You can't actually offset a box-shadow in CSS, so we have to fake it using a solid color shadow that matches the parent background color. We use white by default, but if you are adding a ring offset over a different background color, you should use the `ring-offset-{color}` utilities to match the parent background color: + + +
    +
    +

    ring-offset-pink-500

    + +
    +
    +     + +```html + +``` + +For more information, see the [ring offset color](/docs/ring-offset-color) documentation. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +To customize which ring offset width utilities are generated, add your custom values under `ringOffsetWidth` key in the `theme` section of your `tailwind.config.js` file. + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + ringOffsetWidth: { + '3': '3px', + '6': '6px', + '10': '10px', + } + } + } +} +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/ring-width.mdx b/src/pages/ZH/docs/ring-width.mdx new file mode 100644 index 000000000..764749405 --- /dev/null +++ b/src/pages/ZH/docs/ring-width.mdx @@ -0,0 +1,143 @@ +--- +title: "Ring Width" +description: "Utilities for creating outline rings with box-shadows." +--- + +import utilities from 'utilities?plugin=ringWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + filterRules: ([selector]) => { + return selector.startsWith('.') + }, + transformProperties: ({ selector, properties }) => { + if (selector === '.ring-inset') { + return {'--tw-ring-inset': 'inset'} + } + delete properties['--tw-ring-inset'] + delete properties['--tw-ring-offset-width'] + delete properties['--tw-ring-offset-color'] + delete properties['--tw-ring-color'] + delete properties['--tw-ring-offset-shadow'] + delete properties['box-shadow'] + properties['box-shadow'] = properties['--tw-ring-shadow'] + delete properties['--tw-ring-shadow'] + return properties + }, + sort: (classes) => { + return [...classes].sort((a, b) => { + a = a === '.ring' ? '.ring-3' : a + b = b === '.ring' ? '.ring-3' : b + if (a < b) return -1 + if (b < a) return 1 + return 0 + }) + } +} + + +## Basic Usage + +### Adding a ring + +Use the `ring-{width}` utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems. + + +
    +
    +

    ring-2

    + +
    +
    +

    ring

    + +
    +
    +

    ring-4

    + +
    +
    +     + +```html + + + +``` + +Ring utilities compose gracefully with regular `shadow-{size}` utilities and can be combined on the same element. + +You can also control the color, opacity, and offset of rings using the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), and [ringOffsetWidth](/docs/ring-offset-width) utilities. + +### Focus rings + +The ring width utilities make it easy to use custom focus rings by adding `focus:` to the beginning of any `ring-{width}` utility. + + +
    + +
    +     + +```html + +``` + +The `focus` variant is enabled by default for the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), [ringOffsetWidth](/docs/ring-offset-width), and [ringOffsetColor](/docs/ring-offset-color) utilities as well. + +### Inset rings + +Use the `ring-inset` utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible. + + +
    + +
    +     + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `ring-width` utilities. You can customize these values by editing `theme.ringWidth` or `theme.extend.ringWidth` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ ringWidth: { ++ '10': '10px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/rotate.mdx b/src/pages/ZH/docs/rotate.mdx new file mode 100644 index 000000000..2acb8d547 --- /dev/null +++ b/src/pages/ZH/docs/rotate.mdx @@ -0,0 +1,142 @@ +--- +title: "Rotate" +description: "Utilities for rotating elements with transform." +--- + +import utilities from 'utilities?plugin=rotate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + transform: `rotate(${properties['--tw-rotate']})` + } + }, +} + +## Basic sage + +### Rotating an element + +Use the `rotate-{angle}` utilities to rotate an element. + + +
    +
    +
    +

    rotate-0

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-45

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-90

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    rotate-180

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + + +``` + +### Using negative values + +To use a negative rotate value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `rotate` utilities. You can customize these values by editing `theme.rotate` or `theme.extend.rotate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ rotate: { ++ '17': '17deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/saturate.mdx b/src/pages/ZH/docs/saturate.mdx new file mode 100644 index 000000000..15e181c38 --- /dev/null +++ b/src/pages/ZH/docs/saturate.mdx @@ -0,0 +1,118 @@ +--- +title: "Saturate" +description: "Utilities for applying saturation filters to an element." +--- + +import utilities from 'utilities?plugin=saturate' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-saturate'], + } + }, +} + +## Basic usage + +### Changing element saturation + +Use the `saturate-{amount}` utilities to control an element's saturation. + + +
    +
    +
    +

    saturate-50

    +
    + +
    +
    +
    +
    +

    saturate-100

    +
    + +
    +
    +
    +
    +

    saturate-150

    +
    + +
    +
    +
    +
    +

    saturate-200

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `saturate` utilities. You can customize these values by editing `theme.saturate` or `theme.extend.saturate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ saturate: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scale.mdx b/src/pages/ZH/docs/scale.mdx new file mode 100644 index 000000000..869e56870 --- /dev/null +++ b/src/pages/ZH/docs/scale.mdx @@ -0,0 +1,133 @@ +--- +title: "Scale" +description: "Utilities for scaling elements with transform." +--- + +import utilities from 'utilities?plugin=scale' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: numbersFirst, + transformProperties: ({ properties }) => { + let x = properties['--tw-scale-x'] + let y = properties['--tw-scale-y'] + return { + transform: x && y ? `scale(${x})` : (x ? `scaleX(${x})` : `scaleY(${y})`) + } + }, +} + +## Basic usage + +### Scaling an element + +Use the `scale-{percentage}`, `scale-x-{percentage}`, and `scale-y-{percentage}` utilities to scale an element. + + +
    +
    +
    +

    scale-75

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    scale-100

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    scale-125

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +### Using negative values + +To use a negative scale value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `scale` utilities. You can customize these values by editing `theme.scale` or `theme.extend.scale` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scale: { ++ '175': '1.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/screen-readers.mdx b/src/pages/ZH/docs/screen-readers.mdx new file mode 100644 index 000000000..7c744af37 --- /dev/null +++ b/src/pages/ZH/docs/screen-readers.mdx @@ -0,0 +1,54 @@ +--- +title: "Screen Readers" +description: "Utilities for improving accessibility with screen readers." +--- + +import utilities from 'utilities?plugin=accessibility' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Screen-reader-only elements + +Use `sr-only` to hide an element visually without hiding it from screen readers: + +```html + + + Settings + +``` + +### Undoing screen-reader-only elements + +Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example: + +```html + + + Settings + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +```html + + Skip to content + +``` + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/screens.mdx b/src/pages/ZH/docs/screens.mdx new file mode 100644 index 000000000..cc8aca2f7 --- /dev/null +++ b/src/pages/ZH/docs/screens.mdx @@ -0,0 +1,267 @@ +--- +title: Customizing Screens +shortTitle: Screens +description: Customizing the default breakpoints for your project. +--- + +import { Heading } from '@/components/Heading' + +## + +You define your project's breakpoints in the `theme.screens` section of your `tailwind.config.js` file. The keys become your [responsive modifiers](/docs/responsive-design) (like `md:text-center`), and the values are the `min-width` where that breakpoint should start. + +The default breakpoints are inspired by common device resolutions: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '640px', + // => @media (min-width: 640px) { ... } + + 'md': '768px', + // => @media (min-width: 768px) { ... } + + 'lg': '1024px', + // => @media (min-width: 1024px) { ... } + + 'xl': '1280px', + // => @media (min-width: 1280px) { ... } + + '2xl': '1536px', + // => @media (min-width: 1536px) { ... } + } + } +} +``` + +Feel free to have as few or as many screens as you want, naming them in whatever way you'd prefer for your project. + +### Overriding the defaults + +To completely replace the default breakpoints, add your custom `screens` configuration directly under the `theme` key: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '576px', + // => @media (min-width: 576px) { ... } + + 'md': '960px', + // => @media (min-width: 960px) { ... } + + 'lg': '1440px', + // => @media (min-width: 1440px) { ... } + }, + } +} +``` + +Any default screens you haven't overridden (such as `xl` using the above example) will be removed and will not be available as screen modifiers. + +### Overriding a single screen + +To override a single screen size (like `lg`), add your custom `screens` value under the `theme.extend` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + 'lg': '992px', + // => @media (min-width: 1168px) { ... } + }, + }, + }, +} +``` + +This will replace the default `screens` value with the same name, without changing the order of your breakpoints. + +### Adding larger breakpoints + +The easiest way to add an additional larger breakpoint is using the `extend` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + '3xl': '1600px', + }, + }, + }, + variants: {}, + plugins: [], +} +``` + +This will add your custom screen to the end of the default breakpoint list. + +### Adding smaller breakpoints + +If you want to add an additional small breakpoint, you can't use `extend` because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. + +Instead, override the entire `screens` key, re-specifying the default breakpoints: + +```js tailwind.config.js +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + theme: { + screens: { + 'xs': '475px', + ...defaultTheme.screens, + }, + }, + variants: {}, + plugins: [], +} +``` + +We expose the default theme at `tailwindcss/defaultTheme` so you don't have to maintain the list of default breakpoints yourself. + +### Using custom screen names + +You can name your custom screens whatever you like, and are not limited to following the `sm`/`md`/`lg`/`xl`/`2xl` convention that Tailwind uses by default. + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'tablet': '640px', + // => @media (min-width: 640px) { ... } + + 'laptop': '1024px', + // => @media (min-width: 1024px) { ... } + + 'desktop': '1280px', + // => @media (min-width: 1280px) { ... } + }, + } +} +``` + +Your responsive modifiers will reflect these custom screen names, so using them in your HTML would now look like this: + +```html +
    + +
    +``` + +--- + +## Advanced configuration + +By default, breakpoints are min-width to encourage a [mobile-first](/docs/responsive-design#mobile-first) workflow. If you need more control over your media queries, you can also define them using an object syntax that lets you specify explicit min-width and max-width values. + +### Max-width breakpoints + +If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a `max` key: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + '2xl': {'max': '1535px'}, + // => @media (max-width: 1535px) { ... } + + 'xl': {'max': '1279px'}, + // => @media (max-width: 1279px) { ... } + + 'lg': {'max': '1023px'}, + // => @media (max-width: 1023px) { ... } + + 'md': {'max': '767px'}, + // => @media (max-width: 767px) { ... } + + 'sm': {'max': '639px'}, + // => @media (max-width: 639px) { ... } + } + } +} +``` + +Make sure to list max-width breakpoints in descending order so that they override each other as expected. + +### Fixed-range breakpoints + +If you want your breakpoints to specify both a `min-width` and a `max-width`, use the `min` and `max` keys together: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': {'min': '640px', 'max': '767px'}, + // => @media (min-width: 640px and max-width: 767px) { ... } + + 'md': {'min': '768px', 'max': '1023px'}, + // => @media (min-width: 768px and max-width: 1023px) { ... } + + 'lg': {'min': '1024px', 'max': '1279px'}, + // => @media (min-width: 1024px and max-width: 1279px) { ... } + + 'xl': {'min': '1280px', 'max': '1535px'}, + // => @media (min-width: 1280px and max-width: 1535px) { ... } + + '2xl': {'min': '1536px'}, + // => @media (min-width: 1536px) { ... } + }, + } +} +``` + +Unlike regular min-width or max-width breakpoints, breakpoints defined this way will only take effect when the viewport size is explicitly within the defined range. + +```html +
    + This text will be centered on medium screens, but revert back + to the default (left-aligned) at all other screen sizes. +
    +``` + +### Multi-range breakpoints + +Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges. + +For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area: + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '500px', + 'md': [ + // Sidebar appears at 768px, so revert to `sm:` styles between 768px + // and 868px, after which the main content area is wide enough again to + // apply the `md:` styles. + {'min': '668px', 'max': '767px'}, + {'min': '868px'} + ], + 'lg': '1100px', + 'xl': '1400px', + } + } +} +``` + +### Custom media queries + +If you want full control over the generated media query, use the `raw` key: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + screens: { + 'tall': { 'raw': '(min-height: 800px)' }, + // => @media (min-height: 800px) { ... } + } + } + } +} +``` + +Media queries defined using the `raw` key will be output as-is, and the `min` and `max` keys will be ignored. diff --git a/src/pages/ZH/docs/scroll-behavior.mdx b/src/pages/ZH/docs/scroll-behavior.mdx new file mode 100644 index 000000000..9d8b25d1e --- /dev/null +++ b/src/pages/ZH/docs/scroll-behavior.mdx @@ -0,0 +1,36 @@ +--- +title: "Scroll Behavior" +description: "Utilities for controlling the scroll behavior of an element." +--- + +import utilities from 'utilities?plugin=scrollBehavior' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Adding smooth scrolling + +Use the `scroll-smooth` utilities to enable smooth scrolling within an element. + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-margin.mdx b/src/pages/ZH/docs/scroll-margin.mdx new file mode 100644 index 000000000..15b8014a3 --- /dev/null +++ b/src/pages/ZH/docs/scroll-margin.mdx @@ -0,0 +1,128 @@ +--- +title: "Scroll Margin" +description: "Utilities for controlling the scroll offset around items in a snap container." +--- + +import utilities from 'utilities?plugin=scrollMargin' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Setting the scroll margin + +Use the `scroll-m{side}-{size}` utilities to set the scroll offset around items within a snap container. + + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Using negative values + +To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's scroll margin scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '96': '24rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the scroll margin scale by editing `theme.scrollMargin` or `theme.extend.scrollMargin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scrollMargin: { ++ '96': '24rem', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scroll-padding.mdx b/src/pages/ZH/docs/scroll-padding.mdx new file mode 100644 index 000000000..88f08778b --- /dev/null +++ b/src/pages/ZH/docs/scroll-padding.mdx @@ -0,0 +1,114 @@ +--- +title: "Scroll Padding" +description: "Utilities for controlling an element's scroll offset within a snap container." +--- + +import utilities from 'utilities?plugin=scrollPadding' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Setting the scroll padding + +Use the `scroll-p{side}-{size}` utilities to set the scroll offset of an element within a snap container. + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's scroll padding scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '96': '24rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the scroll padding scale by editing `theme.scrollPadding` or `theme.extend.scrollPadding` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ scrollPadding: { ++ '96': '24rem', ++ }, + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/scroll-snap-align.mdx b/src/pages/ZH/docs/scroll-snap-align.mdx new file mode 100644 index 000000000..0d31904d4 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-align.mdx @@ -0,0 +1,207 @@ +--- +title: "Scroll Snap Align" +description: "Utilities for controlling the scroll snap alignment of an element." +--- + +import utilities from 'utilities?plugin=scrollSnapAlign' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Snapping to the center + +Use the `snap-center` utility to snap an element to its center when being scrolled inside a snap container. + + +
    + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Snapping to the start + +Use the `snap-start` utility to snap an element to its start when being scrolled inside a snap container. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Snapping to the end + +Use the `snap-end` utility to snap an element to its end when being scrolled inside a snap container. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-snap-stop.mdx b/src/pages/ZH/docs/scroll-snap-stop.mdx new file mode 100644 index 000000000..b00f4b504 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-stop.mdx @@ -0,0 +1,149 @@ +--- +title: "Scroll Snap Stop" +description: "Utilities for controlling whether you can skip past possible snap positions." +--- + +import utilities from 'utilities?plugin=scrollSnapStop' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Forcing snap position stops + +Use the `snap-always` utility together with the `snap-mandatory` utility to force a snap container to always stop on an element before the user can continue scrolling to the next item. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Skipping snap position stops + +Use the `snap-normal` utility to allow a snap container to skip past possible scroll snap positions. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/scroll-snap-type.mdx b/src/pages/ZH/docs/scroll-snap-type.mdx new file mode 100644 index 000000000..a11d13af2 --- /dev/null +++ b/src/pages/ZH/docs/scroll-snap-type.mdx @@ -0,0 +1,207 @@ +--- +title: "Scroll Snap Type" +description: "Utilities for controlling how strictly snap points are enforced in a snap container." +--- + +import utilities from 'utilities?plugin=scrollSnapType' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Horizontal scroll snapping + +Use the `snap-x` utility to enable horizontal scroll snapping within an element. + +For scroll snapping to work, you need to also set the [scroll snap alignment](/docs/scroll-snap-align) on the children within the element. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Mandatory scroll snapping + +Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +### Proximity scroll snapping + +Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity. This is the browser default. + + + +
    +
    snap point
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +     + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/sepia.mdx b/src/pages/ZH/docs/sepia.mdx new file mode 100644 index 000000000..3e110f13d --- /dev/null +++ b/src/pages/ZH/docs/sepia.mdx @@ -0,0 +1,98 @@ +--- +title: "Sepia" +description: "Utilities for applying sepia filters to an element." +--- + +import utilities from 'utilities?plugin=sepia' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingFilters } from '@/components/RemovingFilters' + +export const classes = { + utilities, + transformProperties: ({ properties }) => { + return { + filter: properties['--tw-sepia'], + } + }, +} + +## Basic usage + +### Adding sepia filters + +Use the `sepia` and `sepia-0` utilities to control whether an element should be rendered as sepia or in full color. + + +
    +
    +
    +

    sepia-0

    +
    + +
    +
    +
    +
    +

    sepia

    +
    + +
    +
    +
    +
    +
    +     + +```html +
    + +
    +
    + +
    +``` + +### Removing filters + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `sepia` utilities. You can customize these values by editing `theme.sepia` or `theme.extend.sepia` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ sepia: { ++ 25: '.25', ++ 75: '.75', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/skew.mdx b/src/pages/ZH/docs/skew.mdx new file mode 100644 index 000000000..9b3cc1696 --- /dev/null +++ b/src/pages/ZH/docs/skew.mdx @@ -0,0 +1,146 @@ +--- +title: "Skew" +description: "Utilities for skewing elements with transform." +--- + +import utilities from 'utilities?plugin=skew' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformProperties: ({ properties }) => { + let x = properties['--tw-skew-x'] + let y = properties['--tw-skew-y'] + return { + transform: `skew${x ? 'X' : 'Y'}(${x || y})` + } + }, +} + +## Basic usage + +### Skewing an element + +Use the `skew-x-{amount}` and `skew-y-{amount}` utilities to skew an element. + + +
    +
    +
    +

    skew-y-0

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-3

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    skew-y-12

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + + +``` + +### Using negative values + +To use a negative skew value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes a handful of general purpose `skew` utilities. You can customize these values by editing `theme.skew` or `theme.extend.skew` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ skew: { ++ '17': '17deg', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/space.mdx b/src/pages/ZH/docs/space.mdx new file mode 100644 index 000000000..881408082 --- /dev/null +++ b/src/pages/ZH/docs/space.mdx @@ -0,0 +1,186 @@ +--- +title: "Space Between" +description: "Utilities for controlling the space between child elements." +--- + +import utilities from 'utilities?plugin=space' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformSelector: (selector) => ( + <> + {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} > * + * + + ), + transformProperties: ({ properties }) => { + for (let prop in properties) { + if (prop.startsWith('--')) { + if (Object.keys(properties).length > 1) { + delete properties[prop] + } + } else { + properties[prop] = properties[prop].match(/([\d.]+[a-z]+) /)?.[1] || properties[prop] + } + } + // `right` and `bottom` margins are only used when + // "reverse" is enabled + delete properties['margin-right'] + delete properties['margin-bottom'] + return properties + }, +} + +## Basic usage + +### Add horizontal space between children + +Control the horizontal space between elements using the `space-x-{amount}` utilities. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Add vertical space between children + +Control the vertical space between elements using the `space-y-{amount}` utilities. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Reversing children order + +If your elements are in reverse order (using say `flex-row-reverse` or `flex-col-reverse`), use the `space-x-reverse` or `space-y-reverse` utilities to ensure the space is added to the correct side of each element. + + +
    +
    +
    01
    +
    02
    +
    03
    +
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Using negative values + +To use a negative space value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +## Limitations + +These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren't designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order. + +For those situations, it's better to use the [gap utilities](https://tailwindcss.com/docs/gap) when possible, or add margin to every element with a matching negative margin on the parent: + +```html +
    +
    +
    +
    +
    +
    +
    +``` + +### Cannot be paired with divide utilities + +The `space-*` utilities are not designed to work together with the [divide utilities](https://tailwindcss.com/docs/divide-width). For those situations, consider adding margin/padding utilities to the children instead. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's space scale uses the [default spacing scale](/docs/customizing-spacing). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '5px': '5px', ++ } + } + } + } +``` + +Alternatively, you can customize just the space scale by editing `theme.space` or `theme.extend.space` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ space: { ++ '5px': '5px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/stroke-width.mdx b/src/pages/ZH/docs/stroke-width.mdx new file mode 100644 index 000000000..ffbc33eef --- /dev/null +++ b/src/pages/ZH/docs/stroke-width.mdx @@ -0,0 +1,71 @@ +--- +title: "Stroke Width" +description: "Utilities for styling the stroke width of SVG elements." +--- + +import utilities from 'utilities?plugin=strokeWidth' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stroke width + +Use the `stroke-{width}` utilities to set the stroke width of an SVG. + + +
    + + +
    +     + +```html + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind includes `stroke-width` utilities for creating basic grids with up to 6 equal width rows. You can customize these values by editing `theme.strokeWidth` or `theme.extend.strokeWidth` in your `tailwind.config.js` file. + +You have direct access to the `stroke-width` CSS property here so you can make your custom rows values as generic or as complicated and site-specific as you like. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ strokeWidth: { ++ '2': '2px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/stroke.mdx b/src/pages/ZH/docs/stroke.mdx new file mode 100644 index 000000000..9a84ef101 --- /dev/null +++ b/src/pages/ZH/docs/stroke.mdx @@ -0,0 +1,58 @@ +--- +title: "Stroke" +description: "Utilities for styling the stroke of SVG elements." +--- + +import utilities from 'utilities?plugin=stroke' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the stroke color + +Use the `stroke-{color}` utilities to change the stroke color of an SVG. + + +
    + + + +
    +     + +```html + + + +``` + +This can be useful for styling icon sets like [Heroicons](https://heroicons.com). + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/table-layout.mdx b/src/pages/ZH/docs/table-layout.mdx new file mode 100644 index 000000000..967ab5e93 --- /dev/null +++ b/src/pages/ZH/docs/table-layout.mdx @@ -0,0 +1,154 @@ +--- +title: "Table Layout" +description: "Utilities for controlling the table layout algorithm." +--- + +import utilities from 'utilities?plugin=tableLayout' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Auto + +Use `table-auto` to allow the table to automatically size columns to fit the contents of the cell. + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +``` + +### Fixed + +Use `table-fixed` to allow the table to ignore the content and use fixed widths for columns. The width of the first row will set the column widths for the whole table. + +You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst the columns without explicit width. + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +
    +     + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +
    SongArtistYear
    The Sliding Mr. Bones (Next Stop, Pottersville)Malcolm Lockyer1961
    Witchy WomanThe Eagles1972
    Shining StarEarth, Wind, and Fire1975
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/tailwind-cli.mdx b/src/pages/ZH/docs/tailwind-cli.mdx new file mode 100644 index 000000000..49e8ef787 --- /dev/null +++ b/src/pages/ZH/docs/tailwind-cli.mdx @@ -0,0 +1,8 @@ +--- +title: Tailwind CLI +description: Understanding which browsers Tailwind supports and how to manage vendor prefixes. +--- + +Notes: + +- Using `npm-run-all` or `concurrently` to run alongside other build processes \ No newline at end of file diff --git a/src/pages/ZH/docs/text-align.mdx b/src/pages/ZH/docs/text-align.mdx new file mode 100644 index 000000000..5664ab308 --- /dev/null +++ b/src/pages/ZH/docs/text-align.mdx @@ -0,0 +1,85 @@ +--- +title: "Text Alignment" +shortTitle: Text Align +description: "Utilities for controlling the alignment of text." +--- + +import utilities from 'utilities?plugin=textAlign' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text alignment + +Control the text alignment of an element using the `.text-left`, `.text-center`, `.text-right`, and `.text-justify` utilities. + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + + +
    +
    +

    + So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist. +

    +
    +
    +     + +```html +

    So I started to walk into the water...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-color.mdx b/src/pages/ZH/docs/text-color.mdx new file mode 100644 index 000000000..35e1210b5 --- /dev/null +++ b/src/pages/ZH/docs/text-color.mdx @@ -0,0 +1,111 @@ +--- +title: "Text Color" +description: "Utilities for controlling the text color of an element." +--- + +import utilities from 'utilities?plugin=textColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + transformProperties: ({ selector, properties }) => { + delete properties['--tw-text-opacity'] + Object.keys(properties).forEach(key => { + properties[key] = properties[key].replace(' / var(--tw-text-opacity)', '') + }) + return properties + }, + preview: (css, { className }) => ( + +
    Aa
    + + ), +} + +## Basic usage + +### Setting the text color + +Control the text color of an element using the `text-{color}` utilities. + + +
    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +``` + +### Changing the opacity + +Control the opacity of an element's text color using the color opacity modifier. + + +
    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    +

    The quick brown fox jumps over the lazy dog.

    +
    +     + +```html +

    The quick brown fox...

    +``` + +     + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration-color.mdx b/src/pages/ZH/docs/text-decoration-color.mdx new file mode 100644 index 000000000..b4e3a3b3f --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-color.mdx @@ -0,0 +1,86 @@ +--- +title: "Text Decoration Color" +description: "Utilities for controlling the color of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationColor' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { CustomizePluginColors } from '@/components/CustomizePluginColors' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration color + +Use the `decoration-{color}` utilities to change the color of an element's [text decoration](/docs/text-decoration). + + +
    +

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    +
    +     + +```html +
    +

    + I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at + My Company, Inc. + Outside of work, I like to watch + pod-racing and have light-saber fights. +

    +
    +``` + +### Changing the opacity + +Control the opacity of an element's text decoration color using the color opacity modifier. + + +
    +

    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

    +
    +     + +```html +
    +

    + I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at + My Company, Inc. + Outside of work, I like to watch + pod-racing and have light-saber fights. +

    +
    +``` + +You can use any value defined in your [opacity scale](/docs/opacity), or use arbitrary values if you need to deviate from your design tokens. + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + + + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration-style.mdx b/src/pages/ZH/docs/text-decoration-style.mdx new file mode 100644 index 000000000..b7b6ccb22 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-style.mdx @@ -0,0 +1,62 @@ +--- +title: "Text Decoration Style" +description: "Utilities for controlling the style of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationStyle' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration style + +Use the `decoration-{style}` utilities to change the style of an element's [text decoration](/docs/text-decoration). + + +
    +
    +
    decoration-solid
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-double
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-dotted
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-dashed
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-wavy
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-decoration-thickness.mdx b/src/pages/ZH/docs/text-decoration-thickness.mdx new file mode 100644 index 000000000..d65892280 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration-thickness.mdx @@ -0,0 +1,82 @@ +--- +title: "Text Decoration Thickness" +description: "Utilities for controlling the thickness of text decorations." +--- + +import utilities from 'utilities?plugin=textDecorationThickness' +import { numbersLast } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersLast(classes), +} + +## Basic usage + +### Setting the text decoration thickness + +Use the `decoration-{width}` utilities to change the thickness of an element's [text decoration](/docs/text-decoration). + + +
    +
    +
    decoration-1
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-2
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    decoration-4
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `decoration-{width}` utilities by editing `theme.textDecorationThickness` or `theme.extend.textDecorationThickness` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textDecorationThickness: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-decoration.mdx b/src/pages/ZH/docs/text-decoration.mdx new file mode 100644 index 000000000..87d0529b2 --- /dev/null +++ b/src/pages/ZH/docs/text-decoration.mdx @@ -0,0 +1,76 @@ +--- +title: "Text Decoration" +description: "Utilities for controlling the decoration of text." +--- + +import utilities from 'utilities?plugin=textDecoration' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the text decoration + +Control how text is decorated with the `underline`, `no-underline`, and `line-through` utilities. + + +
    +
    + underline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + overline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + line-through +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + no-underline +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + + +
    + Link with no underline +
    +     + +```html +Link +``` + +     + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-indent.mdx b/src/pages/ZH/docs/text-indent.mdx new file mode 100644 index 000000000..28c394c19 --- /dev/null +++ b/src/pages/ZH/docs/text-indent.mdx @@ -0,0 +1,105 @@ +--- +title: "Text Indent" +description: "Utilities for controlling the amount of empty space shown before text in a block." +--- + +import utilities from 'utilities?plugin=textIndent' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Adding a text indent + +Use the `indent-{width}` utilities to set the amount of empty space (indentation) that's shown before text in a block. + + +
    +

    + So I started to walk into the water. I won't lie to you boys, I was + terrified. But I pressed on, and as I made my way past the breakers + a strange calm came over me. I don't know if it was divine intervention + or the kinship of all living things but I tell you Jerry at that moment, + I was a marine biologist. +

    +
    +     + +```html +

    + So I started to walk into the water. I won't lie to you boys, I was + terrified. But I pressed on, and as I made my way past the breakers + a strange calm came over me. I don't know if it was divine intervention + or the kinship of all living things but I tell you Jerry at that moment, + I was a marine biologist. +

    +``` + +### Using negative values + +To use a negative text indent value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + So I started to walk into the water. I won't lie to... +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +The default text indent scale is based on the [default spacing scale](/docs/customizing-spacing#default-spacing-scale). You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the text indent scale by editing `theme.textIndent` or `theme.extend.textIndent` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textIndent: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/text-overflow.mdx b/src/pages/ZH/docs/text-overflow.mdx new file mode 100644 index 000000000..5019be712 --- /dev/null +++ b/src/pages/ZH/docs/text-overflow.mdx @@ -0,0 +1,87 @@ +--- +title: "Text Overflow" +description: "Utilities for controlling text overflow in an element." +--- + +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + 'truncate': { + 'overflow': 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + }, + 'text-ellipsis': { 'text-overflow': 'ellipsis' }, + 'text-clip': { 'text-overflow': 'clip' }, + }, +} + +## Basic usage + +### Truncate + +Use `truncate` to truncate overflowing text with an ellipsis (…) if needed. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +### Ellipsis + +Use `text-ellipsis` to truncate overflowing text with an ellipsis (…) if needed. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +### Clip + +Use `text-clip` to truncate the text at the limit of the content area. + + +
    +
    +

    + The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis. +

    +
    +
    +     + +```html +

    ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-transform.mdx b/src/pages/ZH/docs/text-transform.mdx new file mode 100644 index 000000000..292088019 --- /dev/null +++ b/src/pages/ZH/docs/text-transform.mdx @@ -0,0 +1,64 @@ +--- +title: "Text Transform" +description: "Utilities for controlling the transformation of text." +--- + +import utilities from 'utilities?plugin=textTransform' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Transforming text + +The `uppercase` and `lowercase` will uppercase and lowercase text respectively, whereas `capitalize` utility will convert text to title-case. The `normal-case` utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints. + + +
    +
    + normal-case +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + uppercase +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + lowercase +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    + capitalize +

    + The quick brown fox jumps over the lazy dog. +

    +
    +
    +     + +```html +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +

    The quick brown fox ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/text-underline-offset.mdx b/src/pages/ZH/docs/text-underline-offset.mdx new file mode 100644 index 000000000..f53918897 --- /dev/null +++ b/src/pages/ZH/docs/text-underline-offset.mdx @@ -0,0 +1,88 @@ +--- +title: "Text Underline Offset" +description: "Utilities for controlling the offset of a text underline." +--- + +import utilities from 'utilities?plugin=textUnderlineOffset' +import { numbersLast } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersLast(classes), +} + + +## Basic usage + +### Setting the underline offset + +Use the `underline-offset-{width}` utilities to change the offset of a text underline. + + +
    +
    +
    underline-offset-1
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-2
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-4
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +
    underline-offset-8
    +

    The quick brown fox jumps over the lazy dog.

    +
    +
    +     + +```html +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +

    The quick brown fox...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +You can customize the `underline-offset-{width}` utilities by editing `theme.textUnderlineOffset` or `theme.extend.textUnderlineOffset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ textUnderlineOffset: { ++ 3: '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/theme.mdx b/src/pages/ZH/docs/theme.mdx new file mode 100644 index 000000000..04043f197 --- /dev/null +++ b/src/pages/ZH/docs/theme.mdx @@ -0,0 +1,374 @@ +--- +title: Theme Configuration +shortTitle: Theme +description: Customizing the default theme for your project. +--- + +import { TipGood, TipBad } from '@/components/Tip' +import { ThemeReference } from '@/components/ThemeReference' + +The `theme` section of your `tailwind.config.js` file is where you define your project's color palette, type scale, fonts, breakpoints, border radius values, and more. + +```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', + } + } + } +} +``` + +We provide a sensible [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js) with a very generous set of values to get you started, but don't be afraid to change it or extend it; you're encouraged to customize it as much as you need to fit the goals of your design. + +--- + +## Theme structure + +The `theme` object contains keys for `screens`, `colors`, and `spacing`, as well as a key for each customizable [core plugin](/docs/configuration#core-plugins). + +See the [theme configuration reference](#configuration-reference) or the [default theme](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L7) for a complete list of theme options. + +### Screens + +The `screens` key allows you to customize the responsive breakpoints in your project. + +```js tailwind.config.js +module.exports = { + theme: { + screens: { + 'sm': '640px', + 'md': '768px', + 'lg': '1024px', + 'xl': '1280px', + '2xl': '1536px', + } + } +} +``` + +To learn more, see the [breakpoint customization documentation](/docs/breakpoints). + +### Colors + +The `colors` key allows you to customize the global color palette for your project. + +```js tailwind.config.js +module.exports = { + theme: { + colors: { + transparent: 'transparent', + black: '#000', + white: '#fff', + gray: { + 100: '#f7fafc', + // ... + 900: '#1a202c', + }, + + // ... + } + } +} +``` + +By default, these colors are inherited by all color-related core plugins, like `backgroundColor`, `borderColor`, `textColor`, and others. + +To learn more, see the [color customization documentation](/docs/colors). + +### Spacing + +The `spacing` key allows you to customize the global spacing and sizing scale for your project. + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + px: '1px', + 0: '0', + 0.5: '0.125rem', + 1: '0.25rem', + 1.5: '0.375rem', + 2: '0.5rem', + 2.5: '0.625rem', + 3: '0.75rem', + 3.5: '0.875rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem', + 9: '2.25rem', + 10: '2.5rem', + 11: '2.75rem', + 12: '3rem', + 14: '3.5rem', + 16: '4rem', + 20: '5rem', + 24: '6rem', + 28: '7rem', + 32: '8rem', + 36: '9rem', + 40: '10rem', + 44: '11rem', + 48: '12rem', + 52: '13rem', + 56: '14rem', + 60: '15rem', + 64: '16rem', + 72: '18rem', + 80: '20rem', + 96: '24rem', + }, + } +} +``` + +By default, these values are inherited by the `padding`, `margin`, `width`, `height`, `maxHeight`, `flex-basis`, `gap`, `inset`, `space`, `translate`, `scrollMargin`, `scrollPadding`, and `textIndent` core plugins. + +To learn more, see the [spacing customization documentation](/docs/customizing-spacing). + +### Core plugins + +The rest of the `theme` section is used to configure which values are available for each individual core plugin. + +For example, the `borderRadius` key lets you customize which border radius utilities will be generated: + +```js +module.exports = { + theme: { + borderRadius: { + 'none': '0', + 'sm': '.125rem', + DEFAULT: '.25rem', + 'lg': '.5rem', + 'full': '9999px', + }, + } +} +``` + +The keys determine the suffix for the generated classes, and the values determine the value of the actual CSS declaration. + +The example `borderRadius` configuration above would generate the following CSS classes: + +```css +.rounded-none { border-radius: 0 } +.rounded-sm { border-radius: .125rem } +.rounded { border-radius: .25rem } +.rounded-lg { border-radius: .5rem } +.rounded-full { border-radius: 9999px } +``` + +You'll notice that using a key of `DEFAULT` in the theme configuration created the class `rounded` with no suffix. This is a common convention in Tailwind and is supported by all core plugins. + +To learn more about customizing a specific core plugin, visit the documentation for that plugin. + +For a complete reference of available theme properties and their default values, [see the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/v1/stubs/defaultConfig.stub.js#L5). + +--- + +## Customizing the default theme + +Out of the box, your project will automatically inherit the values from [the default theme configuration](https://github.com/tailwindlabs/tailwindcss/blob/v1/stubs/defaultConfig.stub.js#L5). If you would like to customize the default theme, you have a few different options depending on your goals. + +### Extending the default theme + +If you'd like to preserve the default values for a theme option but also add new values, add your extensions under the `extend` key in the `theme` section of your configuration file. + +For example, if you wanted to add an extra breakpoint but preserve the existing ones, you could extend the `screens` property: + +```js tailwind.config.js +module.exports = { + theme: { + extend: { + // Adds a new breakpoint in addition to the default breakpoints + screens: { + '3xl': '1600px', + } + } + } +} +``` + +### Overriding the default theme + +To override an option in the default theme, add your overrides directly under the `theme` section of your `tailwind.config.js`: + +```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', + } + } +} +``` + +This will completely replace Tailwind's default configuration for that key, so in the example above none of the default opacity utilities would be generated. + +Any keys you **do not** provide will be inherited from the default theme, so in the above example, the default theme configuration for things like colors, spacing, border-radius, background-position, etc. would be preserved. + +You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration: + +```js tailwind.config.js +module.exports = { + theme: { + opacity: { + '0': '0', + '20': '0.2', + '40': '0.4', + '60': '0.6', + '80': '0.8', + '100': '1', + }, + extend: { + screens: { + '3xl': '1600px', + } + } + } +} +``` + +### Referencing other values + +If you need to reference another value in your theme, you can do so by providing a closure instead of a static value. The closure will receive an object that includes a `theme()` function that you can use to look up other values in your theme using dot notation. + +For example, you could generate `background-size` utilities for every value in your spacing scale by referencing `theme('spacing')` in your `backgroundSize` configuration: + +```js tailwind.config.js +module.exports = { + theme: { + spacing: { + // ... + }, + backgroundSize: ({ theme }) => { + auto: 'auto', + cover: 'cover', + contain: 'contain', + ...theme('spacing') + } + } +} +``` + +The `theme()` function attempts to find the value you are looking for from the fully merged theme object, so it can reference your own customizations as well as the default theme values. It also works recursively, so as long as there is a static value at the end of the chain it will be able to resolve the value you are looking for. + +Note that you can only use this kind of closure with top-level theme keys, not the keys inside of each section. + +You can't use functions for individual values + +```js tailwind.config.js +module.exports = { + theme: { + fill: { + gray: ({ theme }) => theme('colors.gray') + } + } +} +``` + +Use functions for top-level theme keys + +```js tailwind.config.js +module.exports = { + theme: { + fill: ({ theme }) => ({ + gray: theme('colors.gray') + }) + } +} +``` + +### Referencing the default theme + +If you'd like to reference a value in the default theme for any reason, you can import it from `tailwindcss/defaultTheme`. + +One example of where this is useful is if you'd like to add a font family to one of Tailwind's default font stacks: + +```js tailwind.config.js +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + theme: { + extend: { + fontFamily: { + sans: [ + 'Lato', + ...defaultTheme.fontFamily.sans, + ] + } + } + } +} +``` + +### Disabling an entire core plugin + +If you don't want to generate any classes for a certain core plugin, it's better to set that plugin to false in your `corePlugins` configuration than to provide an empty object for that key in your `theme` configuration. + +Don't assign an empty object in your theme configuration + +```js tailwind.config.js +module.exports = { + theme: { + opacity: {}, + } +} +``` + +Do disable the plugin in your corePlugins configuration + +```js tailwind.config.js +module.exports = { + corePlugins: { + opacity: false, + } +} +``` + +The end result is the same, but since many core plugins expose no configuration they can only be disabled using `corePlugins` anyways, so it's better to be consistent. + +--- + +## Configuration reference + +Except for `screens`, `colors`, and `spacing`, all of the keys in the `theme` object map to one of Tailwind's [core plugins](/docs/configuration#core-plugins). Since many plugins are responsible for CSS properties that only accept a static set of values (like `float` for example), note that not every plugin has a corresponding key in the `theme` object. + +All of these keys are also available under the `theme.extend` key to enable [extending the default theme](#extending-the-default-theme). + + diff --git a/src/pages/ZH/docs/top-right-bottom-left.mdx b/src/pages/ZH/docs/top-right-bottom-left.mdx new file mode 100644 index 000000000..c40664127 --- /dev/null +++ b/src/pages/ZH/docs/top-right-bottom-left.mdx @@ -0,0 +1,174 @@ +--- +title: "Top / Right / Bottom / Left" +description: "Utilities for controlling the placement of positioned elements." +--- + +import utilities from 'utilities?plugin=inset' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), +} + +## Basic usage + +### Placing a positioned element + +Use the `{top|right|bottom|left|inset}-0` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. + +Combined with Tailwind's padding and margin utilities, you'll probably find that these are all you need to precisely control absolutely positioned elements. + + +
    +
    +
    01
    +
    +
    +
    02
    +
    +
    +
    03
    +
    +
    +
    04
    +
    +
    +
    05
    +
    +
    +
    06
    +
    +
    +
    07
    +
    +
    +
    08
    +
    +
    +
    09
    +
    +
    +     + +```html + +
    +
    01
    +
    + + +
    +
    02
    +
    + + +
    +
    03
    +
    + + +
    +
    04
    +
    + + +
    +
    05
    +
    + + +
    +
    06
    +
    + + +
    +
    07
    +
    + + +
    +
    08
    +
    + + +
    +
    09
    +
    +``` + +### Using negative values + +To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value. + + +
    +
    +
    +
    +
    +     + +```html +
    +
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides top/right/bottom/left/inset utilities for a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale), `auto`, `full` as well as some additional fraction values. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '3px': '3px', ++ } + } + } + } +``` + +Alternatively, you can customize just the top/right/bottom/left/inset scale by editing `theme.inset` or `theme.extend.inset` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ inset: { ++ '3px': '3px', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/touch-action.mdx b/src/pages/ZH/docs/touch-action.mdx new file mode 100644 index 000000000..092c147c0 --- /dev/null +++ b/src/pages/ZH/docs/touch-action.mdx @@ -0,0 +1,87 @@ +--- +title: "Touch Action" +description: "Utilities for controlling how an element can be scrolled and zoomed on touchscreens." +--- + +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities: { + '.touch-auto': { 'touch-action': 'auto' }, + '.touch-none': { 'touch-action': 'none' }, + '.touch-pan-x': { 'touch-action': 'pan-x' }, + '.touch-pan-left': { 'touch-action': 'pan-left' }, + '.touch-pan-right': { 'touch-action': 'pan-right' }, + '.touch-pan-y': { 'touch-action': 'pan-y' }, + '.touch-pan-up': { 'touch-action': 'pan-up' }, + '.touch-pan-down': { 'touch-action': 'pan-down' }, + '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' }, + '.touch-manipulation': { 'touch-action': 'manipulation' }, + }, +} + + +## Basic usage + +### Setting the touch action + +Use the `touch-{action}` utilities to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens. + + +
    +
    +

    touch-auto

    +
    + +
    +
    +
    +

    touch-none

    +
    + +
    +
    +
    +

    touch-pan-x

    +
    + +
    +
    +
    +

    touch-pan-y

    +
    + +
    +
    +
    +     + + +```html +
    + +
    +
    + +
    +
    + +
    +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/transform-origin.mdx b/src/pages/ZH/docs/transform-origin.mdx new file mode 100644 index 000000000..dfde42b48 --- /dev/null +++ b/src/pages/ZH/docs/transform-origin.mdx @@ -0,0 +1,104 @@ +--- +title: "Transform Origin" +description: "Utilities for specifying the origin for an element's transformations." +--- + +import utilities from 'utilities?plugin=transformOrigin' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing the transform origin + +Specify an element's transform origin using the `origin-{keyword}` utilities. + + +
    +
    +
    +

    origin-center

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    origin-top-left

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    origin-bottom

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides `transform-origin` utilities for all of the built-in browser keyword options. You can customize these values by editing `theme.transformOrigin` or `theme.extend.transformOrigin` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transformOrigin: { ++ 'top-left-1/3-3/4': '33% 75%', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-delay.mdx b/src/pages/ZH/docs/transition-delay.mdx new file mode 100644 index 000000000..83d02ecd2 --- /dev/null +++ b/src/pages/ZH/docs/transition-delay.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Delay" +description: "Utilities for controlling the delay of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionDelay' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Delaying transitions + +Use the `delay-{amount}` utilities to control an element's transition-delay. + + +
    +
    +

    delay-150

    + +
    +
    +

    delay-300

    + +
    +
    +

    delay-700

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides eight general purpose transition-delay utilities. You can customize these values by editing `theme.transitionDelay` or `theme.extend.transitionDelay` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionDelay: { ++ '0': '0ms', ++ '2000': '2000ms', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-duration.mdx b/src/pages/ZH/docs/transition-duration.mdx new file mode 100644 index 000000000..2ba9c5879 --- /dev/null +++ b/src/pages/ZH/docs/transition-duration.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Duration" +description: "Utilities for controlling the duration of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionDuration' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Changing transition duration + +Use the `duration-{amount}` utilities to control an element's transition-duration. + + +
    +
    +

    duration-150

    + +
    +
    +

    duration-300

    + +
    +
    +

    duration-700

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides eight general purpose transition-duration utilities. You can customize these values by editing `theme.transitionDuration` or `theme.extend.transitionDuration` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionDuration: { ++ '0': '0ms', ++ '2000': '2000ms', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-property.mdx b/src/pages/ZH/docs/transition-property.mdx new file mode 100644 index 000000000..325393b13 --- /dev/null +++ b/src/pages/ZH/docs/transition-property.mdx @@ -0,0 +1,80 @@ +--- +title: "Transition Property" +description: "Utilities for controlling which CSS properties transition." +--- + +import utilities from 'utilities?plugin=transitionProperty' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling transitioned properties + +Use the `transition-{properties}` utilities to specify which properties should transition when they change. + + +
    + +
    +     + +```html + +``` + +### Prefers-reduced-motion + +For situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants: + +```html + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides transition-property utilities for seven common property combinations. You can customize these values by editing `theme.transitionProperty` or `theme.extend.transitionProperty` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionProperty: { ++ 'height': 'height', ++ 'spacing': 'margin, padding', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/transition-timing-function.mdx b/src/pages/ZH/docs/transition-timing-function.mdx new file mode 100644 index 000000000..7e71802d4 --- /dev/null +++ b/src/pages/ZH/docs/transition-timing-function.mdx @@ -0,0 +1,79 @@ +--- +title: "Transition Timing Function" +description: "Utilities for controlling the easing of CSS transitions." +--- + +import utilities from 'utilities?plugin=transitionTimingFunction' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Controlling the easing curve + +Use the `ease-{timing}` utilities to control an element's easing curve. + + +
    +
    +

    ease-in

    + +
    +
    +

    ease-out

    + +
    +
    +

    ease-in-out

    + +
    +
    +     + +```html + + + +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four general purpose transition-timing-function utilities. You can customize these values by editing `theme.transitionTimingFunction` or `theme.extend.transitionTimingFunction` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ transitionTimingFunction: { ++ 'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', ++ 'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/translate.mdx b/src/pages/ZH/docs/translate.mdx new file mode 100644 index 000000000..ca0549880 --- /dev/null +++ b/src/pages/ZH/docs/translate.mdx @@ -0,0 +1,147 @@ +--- +title: "Translate" +description: "Utilities for translating elements with transform." +--- + +import utilities from 'utilities?plugin=translate' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HardwareAcceleration } from '@/components/HardwareAcceleration' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' +import { RemovingTransforms } from '@/components/RemovingTransforms' + +export const classes = { + utilities, + sort: (classes) => numbersFirst(classes), + transformProperties: ({ properties }) => { + let x = properties['--tw-translate-x'] + let y = properties['--tw-translate-y'] + return { + transform: `translate${x ? 'X' : 'Y'}(${x || y})` + } + }, +} + +## Basic usage + +### Translating an element + +Use the `translate-x-{amount}` and `translate-y-{amount}` utilities to translate an element. + + +
    +
    +
    +

    translate-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    -translate-y-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +

    translate-x-6

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +     + +```html + + + +``` + +### Using negative values + +To use a negative translate value, prefix the class name with a dash to convert it to a negative value. + +```html + +``` + +### Removing transforms + + + +### Hardware acceleration + + + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides fixed value `translate` utilities that match the [default spacing scale](/docs/customizing-spacing), as well as 50% and 100% variations for translating relative to the element's size. You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '4.25': '17rem', ++ } + } + } + } +``` + +Alternatively, you can customize just the translate scale by editing `theme.translate` or `theme.extend.translate` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ translate: { ++ '4.25': '17rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/upgrade-guide.mdx b/src/pages/ZH/docs/upgrade-guide.mdx new file mode 100644 index 000000000..a6f1678a9 --- /dev/null +++ b/src/pages/ZH/docs/upgrade-guide.mdx @@ -0,0 +1,409 @@ +--- +title: "Upgrade Guide" +description: "Upgrading your Tailwind CSS projects from v2 to v3." +--- + +Tailwind CSS v3.0 is a major update to the framework with a brand new internal engine and as such includes a small number of breaking changes. + +We take stability very seriously and have worked hard to make any breaking changes as painless as possible. For most projects, upgrading to Tailwind CSS v3.0 should take less than 30 minutes. + +To learn more about what's new in Tailwind CSS v3.0, read the [Tailwind CSS v3.0 announcement](/blog/tailwindcss-v3) on our blog. + +--- + +## Upgrade packages + +Update Tailwind, as well as PostCSS and autoprefixer, using npm: + +```shell +npm install -D tailwindcss@latest postcss@latest autoprefixer@latest +``` + +Note that Tailwind CSS v3.0 requires PostCSS 8, and no longer supports PostCSS 7. If you can't upgrade to PostCSS 8, we recommend using [Tailwind CLI](/docs/installation) instead of installing Tailwind as a PostCSS plugin. + +### Official plugins + +All of our first-party plugins have been updated for compatibility with v3.0. + +If you're using any of our plugins, make sure to update them all to the latest version at the same time to avoid version constraint errors. + +```html +npm install -D tailwindcss@latest \ + **@tailwindcss/typography@latest** \ + **@tailwindcss/forms@latest** \ + **@tailwindcss/aspect-ratio@latest** \ + **@tailwindcss/line-clamp@latest** \ + postcss@latest \ + autoprefixer@latest +``` + +### Play CDN + +For Tailwind CSS v3.0, the CSS-based CDN build we've offered in the past has been replaced by the new [Play CDN](/docs/installation/play-cdn), which gives you the full power of the new engine right in the browser with no build step. + +To try it out, throw this ` + + + + + +``` + +The Play CDN is designed for development purposes only — compiling your own static CSS build is a much better choice in production. + +--- + +## Migrating to the JIT engine + +The new [Just-in-Time engine](/blog/just-in-time-the-next-generation-of-tailwind-css) we announced in March has replaced the classic engine in Tailwind CSS v3.0. + +The new engine generates the styles you need for your project on-demand, and might necessitate some small changes to your project depending on how you have Tailwind configured. + +If you were already opting in to `mode: 'jit'` in Tailwind CSS v2.x, you can safely remove that from your configuration in v3.0: + +```diff-js tailwind.config.js + module.exports = { +- mode: 'jit', + // ... + } +``` + +### Configure content sources + +Since Tailwind no longer uses PurgeCSS under the hood, we've renamed the `purge` option to `content` to better reflect what it's for: + +```diff-js tailwind.config.js + module.exports = { +- purge: [ ++ content: [ + // Example content paths... + './public/**/*.html', + './src/**/*.{js,jsx,ts,tsx,vue}', + ], + theme: { + // ... + } + // ... + } +``` + +If you weren't already using the `purge` option in your project, it's crucial that you configure your template paths now or your compiled CSS will be empty. + +Since we're not using PurgeCSS under the hood anymore, some of the advanced purge options have changed. See the new [content configuration](/docs/content-configuration) documentation for more information on advanced options. + +### Remove dark mode configuration + +The dark mode feature is now enabled using the `media` strategy by default, so you can remove this key entirely from your `tailwind.config.js` file, *unless* you're using the `class` strategy. + +```diff-js tailwind.config.js + module.exports = { +- darkMode: 'media', + // ... + } +``` + +You can also safely remove this key if it's currently set to `false`: + +```diff-js tailwind.config.js + module.exports = { +- darkMode: false, + // ... + } +``` + +### Remove variant configuration + +In Tailwind CSS v3.0, every variant is automatically available for every utility by default, so you can remove the `variants` section from your `tailwind.config.js` file: + +```diff-js tailwind.config.js + module.exports = { + // ... +- variants: { +- extend: { +- padding: ['hover'], +- } +- }, + } +``` + +### Replace @variants with @layer + +Since all variants are now enabled by default, you no longer need to explicity enable these for custom CSS using the `@variants` or `@responsive` directives. + +Instead, add any custom CSS to appropriate "layer" using the `@layer` directive: + +```diff-css +- @variants hover, focus { ++ @layer utilities { + .content-auto { + content-visibility: auto; + } + } +``` + +Any custom CSS added to one of Tailwind's layers will automatically support variants. + +See the documentation on [adding custom styles using CSS and @layer](/docs/adding-custom-styles#using-css-and-layer) for more information. + +### Automatic transforms and filters + +In Tailwind CSS v3.0, transform and filter utilities like `scale-50` and `brightness-75` will automatically take effect without needing to add the `transform`, `filter`, or `backdrop-filter` classes: + +```diff-html +-
    ++
    +``` + +While there's no harm in leaving them in your HTML, they can safely be removed. + +--- + +## Color palette changes + +Tailwind CSS v3.0 now includes every color from the extended color palette by default, including previously disabled colors like cyan, rose, fuchsia, and lime, and all five variations of gray. + +### Removed color aliases + +In v2.0, several of the default colors were actually aliases for the extended colors: + +| v2 Default | v2 Extended | +| --- | --- | +| `green` | `emerald` | +| `yellow` | `amber` | +| `purple` | `violet` | + +In v3.0, these colors use their extended names by default, so what was previously `bg-green-500` is now `bg-emerald-500`, and `bg-green-500` now refers to the green from the extended palette. + +If you're using these colors in your project, the simplest way to upgrade is to alias them back to their previous names in your `tailwind.config.js` file: + +```diff-js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + extend: { ++ colors: { ++ green: colors.emerald, ++ yellow: colors.amber, ++ purple: colors.violet, ++ } + }, + }, + // ... + } +``` + +If you are already using a custom color palette, this change doesn't impact you at all. + +### Renamed gray scales + +As part of enabling all of the extended colors by default, we've given the different gray shades shorter single-word names to make them more practical to use and make it less awkward for them to co-exist at the same time. + +| v2 Default | v2 Extended | v3 Unified | +| --- | --- | --- | +| N/A | `blueGray` | `slate` | +| `gray` | `coolGray` | `gray` | +| N/A | `gray` | `zinc` | +| N/A | `trueGray` | `neutral` | +| N/A | `warmGray` | `stone` | + +If you were referencing any of the extended grays, you should update your references to the new names, for example: + +```diff-js tailwind.config.js + const colors = require('tailwindcss/colors') + + module.exports = { + theme: { + extend: { + colors: { +- gray: colors.trueGray, ++ gray: colors.neutral, + } + }, + }, + // ... + } +``` + +If you weren't referencing any of the grays from the extended color palette, this change doesn't impact you at all. + + +--- + +## Class name changes + +Some class names in Tailwind CSS v3.0 have changed to avoid naming collisions, improve the developer experience, or make it possible to support new features. + +Wherever possible we have preserved the old name as well so many of these changes are non-breaking, but you're encouraged to update to the new class names. + +### overflow-clip/ellipsis + +Those damn browser developers added a real `overflow: clip` property, so using `overflow-clip` for `text-overflow: clip` is a really bad idea now. + +We've renamed `overflow-clip` to `text-clip`, and renamed `overflow-ellipsis` to `text-ellipsis` to avoid the naming collision: + +```diff-html +-
    ++
    +``` + +This is extremely unlikely to affect anyone, as there are very few use-cases for `text-clip` and it's only really included for the sake of completion. + +### flex-grow/shrink + +We've added `grow-*` and `shrink-*` as aliases for `flex-grow-*` and `flex-shrink-*`: + +```diff-html +-
    ++
    +``` + +The old class names will always work but you're encouraged to update to the new ones. + +### outline-black/white + +Since browsers are finally starting to respect border radius when rendering outlines, we've added separate utilities for the `outline-style`, `outline-color`, `outline-width` and `outline-offset` properties. + +This means that `outline-white` and `outline-black` now only set the outline _color_, whereas in v2 they set the color, width, style, and offset. + +If you are using `outline-white` or `outline-black` in your project, you can bring back the old styles by adding the following custom CSS to your project: + +```css +@layer utilities { + .outline-black { + outline: 2px dotted black; + outline-offset: 2px; + } + + .outline-white { + outline: 2px dotted white; + outline-offset: 2px; + } +} +``` + +Alternatively, you can update any usage of them in your CSS with the following classes: + +```diff-html +-
    ++
    + +-
    ++
    +``` + + +### decoration-clone/slice + +We've added `box-decoration-clone` and `box-decoration-slice` as aliases for `decoration-clone` and `decoration-slice` to avoid confusion with all of the new `text-decoration` utilities that use the `decoration-` namespace: + +```diff-html +-
    ++
    + +-
    ++
    +``` + +The old class names will always work but you're encouraged to update to the new ones. + +--- + +## Other minor changes + +Tailwind CSS v3.0 necessitates a couple of other small breaking changes that are unlikely to affect many people, but have been captured here. + +### Separator cannot be a dash + +The dash (`-`) character cannot be used as a custom separator in v3.0 because of a parsing ambiguity it introduces in the engine. + +You'll have to switch to another character like `_` instead: + +```diff-js tailwind.config.js + module.exports = { + // ... +- separator: '-', ++ separator: '_', + } +``` + + +### Prefix cannot be a function + +Prior to Tailwind CSS v3.0, it was possible to define your class prefix as a function: + +```js tailwind.config.js +module.exports = { + // ... + prefix(selector) { + // ... + }, +} +``` + +This isn't possible in the new engine and we've had to remove support for this feature. + +Instead, use a static prefix that is the same for every class Tailwind generates: + +```js tailwind.config.js +module.exports = { + // ... + prefix: 'tw-', +} +``` + + +### File modifier order reversed + +Super minor change since v3.0.0-alpha.2 where the `file` modifier was introduced — if you were combining it with other modifiers like `hover` or `focus`, you'll need to flip the modifier order: + +```diff-html +- ++ +``` + +Learn more in the [ordering stacked modifiers](/docs/hover-focus-and-other-states#ordering-stacked-modifiers) documentation. + +### Base layer must be present + +In Tailwind CSS v3.0, the `@tailwind base` directive must be present for utilities like transforms, filters, and shadows to work as expected. + +If you were previously disabling Tailwind's base styles by not including this directive, you should add it back and disable `preflight` in your `corePlugins` configuration instead: + +```diff-css main.css ++ @tailwind base; + @tailwind components; + @tailwind utilities; +``` + +```diff-js tailwind.config.js + module.exports = { + // ... ++ corePlugins: { ++ preflight: false, ++ }, + } +``` + +This will disable Tailwind's global base styles without affecting utilities that rely on adding their own base styles to function correctly. + +### Screens layer has been renamed + +The `@tailwind screens` layer has been renamed to `@tailwind variants`: + +```diff-css main.css + /* ... */ +- @tailwind screens; ++ @tailwind variants; +``` + +I think you are more likely to be attacked by a shark while working at your desk than you are to be affected by this change. diff --git a/src/pages/ZH/docs/user-select.mdx b/src/pages/ZH/docs/user-select.mdx new file mode 100644 index 000000000..dea5ded14 --- /dev/null +++ b/src/pages/ZH/docs/user-select.mdx @@ -0,0 +1,97 @@ +--- +title: "User Select" +description: "Utilities for controlling whether the user can select text in an element." +--- + +import utilities from 'utilities?plugin=userSelect' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic uage + +### Disabling text selection + +Use `select-none` to prevent selecting text in an element and its children. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Allowing text selection + +Use `select-text` to allow selecting text in an element and its children. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Selecting all text in one click + +Use `select-all` to automatically select all the text in an element when a user clicks. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +### Using auto select behaviour + +Use `select-auto` to use the default browser behavior for selecting text. Useful for undoing other classes like `.select-none` at different breakpoints. + + +
    +
    + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +
    + The quick brown fox jumps over the lazy dog. +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/using-with-preprocessors.mdx b/src/pages/ZH/docs/using-with-preprocessors.mdx new file mode 100644 index 000000000..ef2240a90 --- /dev/null +++ b/src/pages/ZH/docs/using-with-preprocessors.mdx @@ -0,0 +1,393 @@ +--- +title: Using with Preprocessors +description: A guide to using Tailwind with common CSS preprocessors like Sass, Less, and Stylus. +--- + +import { TipGood, TipBad } from '@/components/Tip' + +Since Tailwind is a PostCSS plugin, there's nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like [Autoprefixer](https://github.com/postcss/autoprefixer). + +It's important to note that **you don't need to use a preprocessor with Tailwind** — you typically write very little CSS on a Tailwind project anyways so using a preprocessor just isn't as beneficial as it would be in a project where you write a lot of custom CSS. + +This guide only exists as a reference for people who need to integrate Tailwind with a preprocessor for reasons outside of their control, not because it is a recommended practice. + +--- + +## Using PostCSS as your preprocessor + +If you're using Tailwind for a brand new project and don't need to integrate it with any existing Sass/Less/Stylus stylesheets, you should highly consider relying on other PostCSS plugins to add the preprocessor features you use instead of using a separate preprocessor. + +This has a few benefits: + +- **Your builds will be faster**. Since your CSS doesn't have to be parsed and processed by multiple tools, your CSS will compile much quicker using only PostCSS. +- **No quirks or workarounds.** Because Tailwind adds some new non-standard keywords to CSS (like `@tailwind`, `@apply`, `theme()`, etc.), you often have to write your CSS in annoying, unintuitive ways to get a preprocessor to give you the expected output. Working exclusively with PostCSS avoids this. + +For a fairly comprehensive list of available PostCSS plugins see the [PostCSS GitHub repository](https://github.com/postcss/postcss/blob/master/docs/plugins.md), but here are a few important ones we use on our own projects and can recommend. + +### Build-time imports + +One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing `@import` statements in advance, instead of in the browser. + +The canonical plugin for handling this with PostCSS is [postcss-import](https://github.com/postcss/postcss-import). + +To use it, install the plugin via npm: + +```shell +npm install postcss-import +``` + +Then add it as the very first plugin in your PostCSS configuration: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +One important thing to note about `postcss-import` is that it strictly adheres to the CSS spec and disallows `@import` statements anywhere except at the very top of a file. + +Won't work, `@import` statements must come first + +```css +/* components.css */ + +.btn { + @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; +} + +/* Will not work */ +@import "./components/card"; +``` + +The easiest solution to this problem is to never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files. + +Use separate files for imports and actual CSS + +```css +/* components.css */ +@import "./components/buttons.css"; +@import "./components/card.css"; +``` + +```css +/* components/buttons.css */ +.btn { + @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black; +} +``` + +```css +/* components/card.css */ +.card { + @apply p-4 bg-white shadow rounded; +} +``` + +The place you are most likely to run into this situation is in your main CSS file that includes your `@tailwind` declarations. + +Won't work, `@import` statements must come first + +```css +@tailwind base; +@import "./custom-base-styles.css"; + +@tailwind components; +@import "./custom-components.css"; + +@tailwind utilities; +@import "./custom-utilities.css"; +``` + +You can solve this by creating separate files for each `@tailwind` declaration, and then importing those files in your main stylesheet. To make this easy, we provide separate files for each `@tailwind` declaration out of the box that you can import directly from `node_modules`. + +The `postcss-import` plugin is smart enough to look for files in the `node_modules` folder automatically, so you don't need to provide the entire path — `"tailwindcss/base"` for example is enough. + +Import our provided CSS files + +```css +@import "tailwindcss/base"; +@import "./custom-base-styles.css"; + +@import "tailwindcss/components"; +@import "./custom-components.css"; + +@import "tailwindcss/utilities"; +@import "./custom-utilities.css"; +``` + +### Nesting + +To add support for nested declarations, we recommend our bundled `tailwindcss/nesting` plugin, which is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`. + +It's included directly in the `tailwindcss` package itself, so to use it all you need to do is add it to your PostCSS configuration, somewhere before Tailwind: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting'), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](/docs/plugins#css-in-js-syntax). + +If you'd rather use [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin: + +```shell +npm install postcss-nesting +``` + +Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting')(require('postcss-nesting')), + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself. + +Note that if you are using [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env) in your project, you should make sure to disable nesting and let `tailwindcss/nesting` handle it for you instead: + +```js +// postcss.config.js +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss/nesting')(require('postcss-nesting')), + require('tailwindcss'), + require('postcss-preset-env')({ + features: { 'nesting-rules': false } + }), + ] +} +``` + +### Variables + +These days CSS variables (officially known as custom properties) have really good [browser support](https://caniuse.com/#search=css%20custom%20properties), so you don't need a preprocessor to use variables at all. + +```css +:root { + --theme-color: #52b3d0; +} + +/* ... */ + +.btn { + background-color: var(--theme-color); + /* ... */ +} +``` + +We use CSS variables extensively within Tailwind itself, so if you can use Tailwind, you can use native CSS variables. + +You may also find that most of the things you've used variables for in the past can be replaced with Tailwind's `theme()` function, which gives you access to all of your design tokens from your `tailwind.config.js` file directly in your CSS: + +```css +.btn { + background-color: theme('colors.blue.500'); + padding: theme('spacing.2') theme('spacing.4'); + /* ... */ +} +``` + +Learn more about the `theme()` function in our [functions and directives documentation](/docs/functions-and-directives#theme); + +### Vendor prefixes + +For automatically managing vendor prefixes in your CSS, you should use [Autoprefixer](https://github.com/postcss/autoprefixer). + +To use it, install it via npm: + +```shell +npm install autoprefixer +``` + +Then add it to the very end of your plugin list in your PostCSS configuration: + +```js +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ] +} +``` + +--- + +## Using Sass, Less, or Stylus + +For the best development experience, we highly recommended that you [use PostCSS exclusively](#using-post-css-as-your-preprocessor), and that you don't use preprocessors like Sass or Less in your Tailwind projects. + +To use Tailwind with a preprocessing tool like Sass, Less, or Stylus, you'll need to add an additional build step to your project that lets you run your preprocessed CSS through PostCSS. If you're using Autoprefixer in your project, you already have something like this set up. + +See our documentation on [installing Tailwind as a PostCSS plugin](/docs/installation/using-postcss) to learn more about integrating Tailwind into your existing build process. + +The most important thing to understand about using Tailwind with a preprocessor is that **preprocessors like Sass, Less, and Stylus run separately, before Tailwind**. This means that you can't feed output from Tailwind's `theme()` function into a Sass color function for example, because the `theme()` function isn't actually evaluated until your Sass has been compiled to CSS and fed into PostCSS. + +Won't work, Sass is processed first + +```css +.alert { + background-color: darken(theme('colors.red.500'), 10%); +} +``` + +Aside from that, each preprocessor has its own quirk or two when used with Tailwind, which are outlined with workarounds below. + +### Sass + +When using Tailwind with Sass, using `!important` with `@apply` requires you to use interpolation to compile properly. + +Won't work, Sass complains about !important + +```css +.alert { + @apply bg-red-500 !important; +} +``` + +Use interpolation as a workaround + +```css +.alert { + @apply bg-red-500 #{!important}; +} +``` + +### Less + +When using Tailwind with Less, you cannot nest Tailwind's `@screen` directive. + +Won't work, Less doesn't realise it's a media query + +```css +.card { + @apply rounded-none; + + @screen sm { + @apply rounded-lg; + } +} +``` + +Instead, use a regular media query along with the `theme()` function to reference your screen sizes, or simply don't nest your `@screen` directives. + +Use a regular media query and theme() + +```css +.card { + @apply rounded-none; + + @media (min-width: theme('screens.sm')) { + @apply rounded-lg; + } +} +``` + +Use the @screen directive at the top-level + +```css +.card { + @apply rounded-none; +} +@screen sm { + .card { + @apply rounded-lg; + } +} +``` + +### Stylus + +When using Tailwind with Stylus, you can't use Tailwind's `@apply` feature without wrapping the entire CSS rule in `@css` so that Stylus treats it as literal CSS: + +Won't work, Stylus complains about @apply + +```css +.card { + @apply rounded-lg bg-white p-4 +} +``` + +Use @css to avoid processing as Stylus + +```css +@css { + .card { + @apply rounded-lg bg-white p-4 + } +} +``` + +This comes with a significant cost however, which is that **you cannot use any Stylus features inside a `@css` block**. + +Another option is to use the `theme()` function instead of `@apply`, and write out the actual CSS properties in long form: + +Use theme() instead of @apply + +```css +.card { + border-radius: theme('borderRadius.lg'); + background-color: theme('colors.white'); + padding: theme('spacing.4'); +} +``` + +In addition to this, Stylus doesn't support nesting the `@screen` directive (just like Less). + +Won't work, Stylus doesn't realise it's a media query + +```css +.card { + border-radius: 0; + + @screen sm { + border-radius: theme('borderRadius.lg'); + } +} +``` + +Instead, use a regular media query along with the `theme()` function to reference your screen sizes, or simply don't nest your `@screen` directives. + +Use a regular media query and theme() + +```css +.card { + border-radius: 0; + + @media (min-width: theme('screens.sm')) { + border-radius: theme('borderRadius.lg'); + } +} +``` + +Use the @screen directive at the top-level + +```css +.card { + border-radius: 0; +} +@screen sm { + .card { + border-radius: theme('borderRadius.lg'); + } +} +``` diff --git a/src/pages/ZH/docs/utility-first.mdx b/src/pages/ZH/docs/utility-first.mdx new file mode 100644 index 000000000..45a93b1b4 --- /dev/null +++ b/src/pages/ZH/docs/utility-first.mdx @@ -0,0 +1,229 @@ +--- +title: Utility-First Fundamentals +description: Building complex components from a constrained set of primitive utilities. +--- + +import { Heading } from '@/components/Heading' +import { TipGood, TipBad } from '@/components/Tip' +import { CodeSample } from '@/components/CodeSample' + +--- + +## + +Traditionally, whenever you need to style something on the web, you write CSS. + +Using a traditional approach where custom designs require custom CSS + + +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +     + +```html +
    +
    + +
    +
    +

    ChitChat

    +

    You have a new message!

    +
    +
    + + +``` + +With Tailwind, you style elements by applying pre-existing classes directly in your HTML. + +Using utility classes to build custom designs without writing CSS + + +
    +
    + +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +     + +```html +
    +
    + ChitChat Logo +
    +
    +
    ChitChat
    +

    You have a new message!

    +
    +
    +``` + +In the example above, we've used: + +- Tailwind's [flexbox](/docs/display#flex) and [padding](/docs/padding) utilities (`flex`, `shrink-0`, and `p-6`) to control the overall card layout +- The [max-width](/docs/max-width) and [margin](/docs/margin) utilities (`max-w-sm` and `mx-auto`) to constrain the card width and center it horizontally +- The [background color](/docs/background-color), [border radius](/docs/border-radius), and [box-shadow](/docs/box-shadow) utilities (`bg-white`, `rounded-xl`, and `shadow-lg`) to style the card's appearance +- The [width](/docs/width) and [height](/docs/height) utilities (`w-12` and `h-12`) to size the logo image +- The [space-between](/docs/space) utilities (`space-x-4`) to handle the spacing between the logo and the text +- The [font size](/docs/font-size), [text color](/docs/text-color), and [font-weight](/docs/font-weight) utilities (`text-xl`, `text-black`, `font-medium`, etc.) to style the card text + +This approach allows us to implement a completely custom component design without writing a single line of custom CSS. + +Now I know what you're thinking, _"this is an atrocity, what a horrible mess!"_ and you're right, it's kind of ugly. In fact it's just about impossible to think this is a good idea the first time you see it — **you have to actually try it**. + +But once you've actually built something this way, you'll quickly notice some really important benefits: + +- **You aren't wasting energy inventing class names**. No more adding silly class names like `sidebar-inner-wrapper` just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container. +- **Your CSS stops growing**. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS. +- **Making changes feels safer**. CSS is global and you never know what you're breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking. + +When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture. + +--- + +## Why not just use inline styles? + +A common reaction to this approach is wondering, "isn't this just inline styles?" and in some ways it is — you're applying styles directly to elements instead of assigning them a class name and then styling that class. + +But using utility classes has a few important advantages over inline styles: + +- **Designing with constraints**. Using inline styles, every value is a magic number. With utilities, you're choosing styles from a predefined [design system](/docs/theme), which makes it much easier to build visually consistent UIs. +- **Responsive design**. You can't use media queries in inline styles, but you can use Tailwind's [responsive utilities](/docs/responsive-design) to build fully responsive interfaces easily. +- **Hover, focus, and other states**. Inline styles can't target states like hover or focus, but Tailwind's [state variants](/docs/hover-focus-and-other-states) make it easy to style those states with utility classes. + +This component is fully responsive and includes a button with hover and focus styles, and is built entirely with utility classes: + + +
    + Woman's Face +
    +
    +

    + Erin Lindford +

    +

    + Product Engineer +

    +
    + +
    +
    +     + +```html +
    + Woman's Face +
    +
    +

    + Erin Lindford +

    +

    + Product Engineer +

    +
    + +
    +
    +``` + +--- + +## Maintainability concerns + +The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. + +This is easily solved by [extracting components](/docs/reusing-styles), usually as template partials or components. + +```html + + +``` + +You can also use Tailwind's `@apply` feature to create CSS abstractions around common utility patterns. + + +
    + +
    +     + +```html + + + + + + + +``` + +Aside from that, maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS. Large companies like GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment, and more are using this approach with great success. + +If you'd like to hear about others' experiences with this approach, check out the following resources: + +- [By The Numbers: A Year and a Half with Atomic CSS](https://medium.com/@johnpolacek/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4) by John Polacek +- [Building a Scalable CSS Architecture](https://blog.algolia.com/redesigning-our-docs-part-4-building-a-scalable-css-architecture/) by Sarah Dayan of Algolia +- [No, Utility Classes Aren't the Same As Inline Styles](https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles) by Sarah Dayan of Algolia +- [Diana Mounter on using utility classes at GitHub](http://www.fullstackradio.com/75), a podcast interview + +For even more, check out [The Case for Atomic/Utility-First CSS](https://johnpolacek.github.io/the-case-for-atomic-css/), curated by [John Polacek](https://twitter.com/johnpolacek). diff --git a/src/pages/ZH/docs/vertical-align.mdx b/src/pages/ZH/docs/vertical-align.mdx new file mode 100644 index 000000000..a5d65ab2a --- /dev/null +++ b/src/pages/ZH/docs/vertical-align.mdx @@ -0,0 +1,146 @@ +--- +title: "Vertical Alignment" +shortTitle: Vertical Align +description: "Utilities for controlling the vertical alignment of an inline or table-cell box." +--- + +import utilities from 'utilities?plugin=verticalAlign' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Baseline + +Use `align-baseline` to align the baseline of an element with the baseline of its parent. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Top + +Use `align-top` to align the top of an element and its descendants with the top of the entire line. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + + +```html +... +``` + +### Middle + +Use `align-middle` to align the middle of an element with the baseline plus half the x-height of the parent. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Bottom + +Use `align-bottom` to align the bottom of an element and its descendants with the bottom of the entire line. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Text Top + +Use `align-text-top` to align the top of an element with the top of the parent element's font. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +### Text Bottom + +Use `align-text-bottom` to align the bottom of an element with the bottom of the parent element's font. + + +
    +
    + + + + + The quick brown fox jumps over the lazy dog. +
    +
    +     + +```html +... +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/visibility.mdx b/src/pages/ZH/docs/visibility.mdx new file mode 100644 index 000000000..319022357 --- /dev/null +++ b/src/pages/ZH/docs/visibility.mdx @@ -0,0 +1,64 @@ +--- +title: "Visibility" +description: "Utilities for controlling the visibility of an element." +--- + +import utilities from 'utilities?plugin=visibility' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Making elements invisible + +Use `invisible` to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with `.hidden` from the [display](/docs/display#hidden) documentation). + + +
    +
    01
    + +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +### Making elements visible + +Use `visible` to make an element visible. This is mostly useful for undoing the `invisible` utility at different screen sizes. + + +
    +
    01
    +
    02
    +
    03
    +
    +     + +```html +
    +
    01
    +
    02
    +
    03
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/whitespace.mdx b/src/pages/ZH/docs/whitespace.mdx new file mode 100644 index 000000000..0efcdbd21 --- /dev/null +++ b/src/pages/ZH/docs/whitespace.mdx @@ -0,0 +1,134 @@ +--- +title: "Whitespace" +description: "Utilities for controlling an element's white-space property." +--- + +import utilities from 'utilities?plugin=whitespace' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Normal + +Use `whitespace-normal` to cause text to wrap normally within an element. Newlines and spaces will be collapsed. + + +
    +
    Hey everyone! +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### No Wrap + +Use `whitespace-nowrap` to prevent text from wrapping within an element. Newlines and spaces will be collapsed. + + +
    +
    Hey everyone! +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre + +Use `whitespace-pre` to preserve newlines and spaces within an element. Text will not be wrapped. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre Line + +Use `whitespace-pre-line` to preserve newlines but not spaces within an element. Text will be wrapped normally. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +### Pre Wrap + +Use `whitespace-pre-wrap` to preserve newlines and spaces within an element. Text will be wrapped normally. + + +
    +
    Hey everyone!
    +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.
    +You will never know.
    +
    +     + +```html +
    +
    Hey everyone! + +It's almost 2022 and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien. + +You will never know.
    +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/width.mdx b/src/pages/ZH/docs/width.mdx new file mode 100644 index 000000000..cd5f1e0bb --- /dev/null +++ b/src/pages/ZH/docs/width.mdx @@ -0,0 +1,171 @@ +--- +title: "Width" +description: "Utilities for setting the width of an element." +--- + +import utilities from 'utilities?plugin=width' +import { numbersFirst } from '@/utils/sortClasses' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { + utilities, + sort: numbersFirst, +} + +## Basic usage + +### Fixed widths + +Use `w-{number}` or `w-px` to set an element to a fixed width. + + +
    +
    + + + +
    w-48
    +
    w-40
    +
    w-32
    +
    w-24
    +
    +
    +     + +```html +
    +
    +
    +
    +
    +
    +
    +``` + +### Percentage widths + +Use `w-{fraction}` or `w-full` to set an element to a percentage based width. + + +
    +
    +
    w-1/2
    +
    w-1/2
    +
    +
    +
    w-2/5
    +
    w-3/5
    +
    +
    +
    w-1/3
    +
    w-2/3
    +
    + + + +
    w-full
    +
    +     + +```html +
    +
    w-1/2
    +
    w-1/2
    +
    +
    +
    w-2/5
    +
    w-3/5
    +
    +
    +
    w-1/3
    +
    w-2/3
    +
    +
    +
    w-1/4
    +
    w-3/4
    +
    +
    +
    w-1/5
    +
    w-4/5
    +
    +
    +
    w-1/6
    +
    w-5/6
    +
    +
    w-full
    +``` + +### Viewport width + +Use `w-screen` to make an element span the entire width of the viewport. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind's width scale is a combination of the [default spacing scale](/docs/customizing-spacing#default-spacing-scale) as well as some additional values specific to widths. + +You can customize your spacing scale by editing `theme.spacing` or `theme.extend.spacing` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ spacing: { ++ '128': '32rem', ++ } + } + } + } +``` + +To customize width separately, use the `theme.width` section of your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ width: { ++ '128': '32rem', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/will-change.mdx b/src/pages/ZH/docs/will-change.mdx new file mode 100644 index 000000000..37fb8b9ec --- /dev/null +++ b/src/pages/ZH/docs/will-change.mdx @@ -0,0 +1,65 @@ +--- +title: "Will Change" +description: "Utilities for optimizing upcoming animations of elements that are expected to change." +--- + +import utilities from 'utilities?plugin=willChange' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Optimizing with will change + +Use `will-change-scroll`, `will-change-contents` and `will-change-transform` to optimize an element that's expected to change in the near future by instructing the browser to prepare the necessary animation before it actually begins. + +```html +
    + +
    +``` + +It's recommended that you apply these utilities just before an element changes, and then remove it shortly after it finishes using `will-change-auto`. + +The will-change property is intended to be used as a last resort when dealing with **known performance problems**. Avoid using these utilities too much, or simply in anticipation of performance issues, as it could actually cause the page to be less performant. + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides four `will-change` utilities. You can customize these values by editing `theme.willChange` or `theme.extend.willChange` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ willChange: { ++ left-top: 'left, top', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/ZH/docs/word-break.mdx b/src/pages/ZH/docs/word-break.mdx new file mode 100644 index 000000000..394274c5e --- /dev/null +++ b/src/pages/ZH/docs/word-break.mdx @@ -0,0 +1,78 @@ +--- +title: "Word Break" +description: "Utilities for controlling word breaks in an element." +--- + +import utilities from 'utilities?plugin=wordBreak' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Normal + +Use `break-normal` to only add line breaks at normal word break points. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +### Break Words + +Use `break-words` to add line breaks mid-word if needed. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +### Break All + +Use `break-all` to add line breaks whenever necessary, without trying to preserve whole words. + + +
    +
    +

    The longest word in any of the major English language dictionaries is + pneumonoultramicroscopicsilicovolcanoconiosis, + a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

    +
    +
    +     + +```html +

    ...

    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + diff --git a/src/pages/ZH/docs/z-index.mdx b/src/pages/ZH/docs/z-index.mdx new file mode 100644 index 000000000..09d0bfbdc --- /dev/null +++ b/src/pages/ZH/docs/z-index.mdx @@ -0,0 +1,83 @@ +--- +title: "Z-Index" +description: "Utilities for controlling the stack order of an element." +--- + +import utilities from 'utilities?plugin=zIndex' +import { ArbitraryValues } from '@/components/ArbitraryValues' +import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' +import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates' + +export const classes = { utilities } + +## Basic usage + +### Setting the z-index + +Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `z-{index}` utilities. + + +
    +
    05
    +
    04
    +
    03
    +
    02
    +
    01
    +
    +     + +```html +
    05
    +
    04
    +
    03
    +
    02
    +
    01
    +``` + +### Using negative values + +To use a negative z-index value, prefix the class name with a dash to convert it to a negative value. + +```html +
    + +
    +``` + +--- + +## Applying conditionally + +### Hover, focus, and other states + + + +### Breakpoints and media queries + + + +--- + +## Using custom values + +### Customizing your theme + +By default, Tailwind provides six numeric `z-index` utilities and an `auto` utility. You can customize these values by editing `theme.zIndex` or `theme.extend.zIndex` in your `tailwind.config.js` file. + +```diff-js tailwind.config.js + module.exports = { + theme: { + extend: { ++ zIndex: { ++ '100': '100', ++ } + } + } + } +``` + +Learn more about customizing the default theme in the [theme customization](/docs/theme#customizing-the-default-theme) documentation. + +### Arbitrary values + + diff --git a/src/pages/index.js b/src/pages/index.js index 2f058772d..da7ea5d28 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,20 +1,19 @@ -import { Testimonials } from '@/components/Testimonials' -import { DarkMode } from '@/components/home/DarkMode' -import { ConstraintBased } from '@/components/home/ConstraintBased' -import { BuildAnything } from '@/components/home/BuildAnything' -import { Performance } from '@/components/home/Performance' -import { MobileFirst } from '@/components/home/MobileFirst' -import { StateVariants } from '@/components/home/StateVariants' -import { ComponentDriven } from '@/components/home/ComponentDriven' -import { Customization } from '@/components/home/Customization' -import { ModernFeatures } from '@/components/home/ModernFeatures' -import { EditorTools } from '@/components/home/EditorTools' -import { ReadyMadeComponents } from '@/components/home/ReadyMadeComponents' -// import { SearchButton } from '@/components/Search' +import { Testimonials } from '@/components/.ZH/Testimonials' +import { DarkMode } from '@/components/.ZH/home/DarkMode' +import { ConstraintBased } from '@/components/.ZH/home/ConstraintBased' +import { BuildAnything } from '@/components/.ZH/home/BuildAnything' +import { Performance } from '@/components/.ZH/home/Performance' +import { MobileFirst } from '@/components/.ZH/home/MobileFirst' +import { StateVariants } from '@/components/.ZH/home/StateVariants' +import { ComponentDriven } from '@/components/.ZH/home/ComponentDriven' +import { Customization } from '@/components/.ZH/home/Customization' +import { ModernFeatures } from '@/components/.ZH/home/ModernFeatures' +import { EditorTools } from '@/components/.ZH/home/EditorTools' +import { ReadyMadeComponents } from '@/components/.ZH/home/ReadyMadeComponents' import { SearchButton } from '@/components/.ZH/Search' -import { Hero } from '@/components/home/Hero' +import { Hero } from '@/components/.ZH/home/Hero' import { Logo } from '@/components/Logo' -import { Footer } from '@/components/home/Footer' +import { Footer } from '@/components/.ZH/home/Footer' import NextLink from 'next/link' import Head from 'next/head' import { NavItems, NavPopover } from '@/components/.ZH/Header' @@ -95,7 +94,7 @@ function Header() { */}
    心動。不如... - + 馬上行動 From d90e02ae8a8e591346958c67d50d039ace091ce5 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:13:16 +0800 Subject: [PATCH 35/48] fix file match to /ZH/ --- next.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index 0c4ca3f32..ffd78428b 100644 --- a/next.config.js +++ b/next.config.js @@ -26,12 +26,13 @@ const Prism = require('prismjs') const fallbackLayouts = { // 'src/pages/docs/**/*': ['@/layouts/DocumentationLayout', 'DocumentationLayout'], - 'src/pages/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], + 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], } const fallbackDefaultExports = { // 'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'], - 'src/pages/{docs,components}/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/components/.ZH/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], 'src/pages/blog/**/*': ['@/layouts/BlogPostLayout', 'BlogPostLayout'], } From 26c263d0500778c711b6cc16c542c25cf23e94d7 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:26:50 +0800 Subject: [PATCH 36/48] change link ZH to zh --- next.config.js | 4 ++-- src/components/.ZH/Header.js | 4 ++-- src/components/.ZH/home/BuildAnything.js | 2 +- src/components/.ZH/home/ComponentDriven.js | 4 ++-- src/components/.ZH/home/ConstraintBased.js | 2 +- src/components/.ZH/home/Customization.js | 2 +- src/components/.ZH/home/DarkMode.js | 2 +- src/components/.ZH/home/EditorTools.js | 2 +- src/components/.ZH/home/MobileFirst.js | 2 +- src/components/.ZH/home/ModernFeatures.js | 2 +- src/components/.ZH/home/Performance.js | 2 +- src/components/.ZH/home/StateVariants.js | 2 +- src/layouts/.ZH/InstallationLayout.js | 20 +++++++++---------- src/layouts/.ZH/SidebarLayout.js | 2 +- src/navs/.ZH/documentation.js | 8 ++++---- .../ZH/docs/installation/framework-guides.js | 2 +- src/pages/index.js | 5 +++-- src/pages/resources.js | 2 +- 18 files changed, 35 insertions(+), 34 deletions(-) diff --git a/next.config.js b/next.config.js index ffd78428b..7b44c6282 100644 --- a/next.config.js +++ b/next.config.js @@ -26,13 +26,13 @@ const Prism = require('prismjs') const fallbackLayouts = { // 'src/pages/docs/**/*': ['@/layouts/DocumentationLayout', 'DocumentationLayout'], - 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], + 'src/pages/zh/docs/**/*': ['@/layouts/.ZH/DocumentationLayout', 'DocumentationLayout'], } const fallbackDefaultExports = { // 'src/pages/{docs,components}/**/*': ['@/layouts/ContentsLayout', 'ContentsLayout'], 'src/pages/components/.ZH/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], - 'src/pages/ZH/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], + 'src/pages/zh/docs/**/*': ['@/layouts/.ZH/ContentsLayout', 'ContentsLayout'], 'src/pages/blog/**/*': ['@/layouts/BlogPostLayout', 'BlogPostLayout'], } diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js index bb3a030fd..464617a4d 100644 --- a/src/components/.ZH/Header.js +++ b/src/components/.ZH/Header.js @@ -102,7 +102,7 @@ export function NavItems() { return ( <>
  • - + {/* Docs */} 技術文件 @@ -187,7 +187,7 @@ export function Header({ hasNav = false, navIsOpen, onNavToggle, title, section className="mr-3 flex-none w-[2.0625rem] overflow-hidden md:w-auto" onContextMenu={(e) => { e.preventDefault() - Router.push('/ZH/brand') + Router.push('/zh/brand') }} > {/* Tailwind CSS home page */} diff --git a/src/components/.ZH/home/BuildAnything.js b/src/components/.ZH/home/BuildAnything.js index 57f7181bc..ae5590a06 100644 --- a/src/components/.ZH/home/BuildAnything.js +++ b/src/components/.ZH/home/BuildAnything.js @@ -278,7 +278,7 @@ export function BuildAnything() { 因為 Tailwind 就是這麼的好上手，所以它絕不鼓勵你設計出兩次同樣的網站。 即使用了同個色板和尺寸，還是可以很輕易的讓你在下個專案中用同樣的元件，做出完全不同的設計。 - + {/* Get started, installation */} 快點開始，安裝吧 diff --git a/src/components/.ZH/home/ComponentDriven.js b/src/components/.ZH/home/ComponentDriven.js index b3499c10a..485e48ac4 100644 --- a/src/components/.ZH/home/ComponentDriven.js +++ b/src/components/.ZH/home/ComponentDriven.js @@ -343,7 +343,7 @@ function AtApplySection() { to extract repeated utility patterns into custom CSS classes just by copying and pasting */} 想要保持老派格調，不想加入元件框架的世界中嗎？那用 Tailwind 的 @apply 指令把你重複的功能樣式集中到自訂的 CSS class 裡吧。 - + 閱讀更多關於樣式重新使用的內容
    • @@ -564,7 +564,7 @@ export function ComponentDriven() { 如果你想要一直、一直、一直地重複使用你的功能或設計， 那你需要的是把它們做成元件或樣板，這樣你只要改變一次，就能應用在所有地方。 - + 閱讀更多關於樣式重新使用的內容
    diff --git a/src/components/.ZH/home/ConstraintBased.js b/src/components/.ZH/home/ConstraintBased.js index 3a39a0167..56c339820 100644 --- a/src/components/.ZH/home/ConstraintBased.js +++ b/src/components/.ZH/home/ConstraintBased.js @@ -291,7 +291,7 @@ export function ConstraintBased() { 它們讓顏色、間距、文字版式、陰影，以及其他的一切都能井然有序的保持一致性， 締造精良的設計系統。 - + {/* Learn more, utility-first fundamentals */} 了解詳情，功能優先的基本原則 diff --git a/src/components/.ZH/home/Customization.js b/src/components/.ZH/home/Customization.js index 90833f555..c599c5476 100644 --- a/src/components/.ZH/home/Customization.js +++ b/src/components/.ZH/home/Customization.js @@ -121,7 +121,7 @@ export function Customization() { 讓 Tailwind 來把它轉換成屬於你客製化的 CSS 框架。

    - + {/* Learn more, configuration */} 了解詳情，關於配置的部分 diff --git a/src/components/.ZH/home/DarkMode.js b/src/components/.ZH/home/DarkMode.js index 50c1d07b6..c0e603c11 100644 --- a/src/components/.ZH/home/DarkMode.js +++ b/src/components/.ZH/home/DarkMode.js @@ -130,7 +130,7 @@ export function DarkMode() { dark: ，這麼一來，當深色模式開啟時， 背景顏色、文字顏色、邊框顏色甚至是漸層色都能發生變化。 - + {/* Learn more, dark mode */} 了解更多關於深色模式的內容 diff --git a/src/components/.ZH/home/EditorTools.js b/src/components/.ZH/home/EditorTools.js index 35390700e..b4eab4b85 100644 --- a/src/components/.ZH/home/EditorTools.js +++ b/src/components/.ZH/home/EditorTools.js @@ -331,7 +331,7 @@ export function EditorTools() { 智慧的語法建議、整理以及 class 定義等，全部在你的編輯器裡，而且還不用設定。

    - + {/* Learn more, editor setup */} 閱讀更多關於編輯器的設定 diff --git a/src/components/.ZH/home/MobileFirst.js b/src/components/.ZH/home/MobileFirst.js index b622aefe0..7cda5eb72 100644 --- a/src/components/.ZH/home/MobileFirst.js +++ b/src/components/.ZH/home/MobileFirst.js @@ -272,7 +272,7 @@ export function MobileFirst() { 將 {'"螢幕尺寸"'} 擺在任何功能性 class 前面，看看它在特定斷點時如何神奇的變化。

    - + {/* Learn more, responsive design */} 快去看看，關於響應式設計的一切 diff --git a/src/components/.ZH/home/ModernFeatures.js b/src/components/.ZH/home/ModernFeatures.js index 37b0d105f..2eaa772f5 100644 --- a/src/components/.ZH/home/ModernFeatures.js +++ b/src/components/.ZH/home/ModernFeatures.js @@ -135,7 +135,7 @@ export function ModernFeatures() { :focus-visible 這種的現代狀態選擇器，以及更多其他功能。

    - + {/* Learn more, grid template columns */} 去了解網格排版的相關內容 diff --git a/src/components/.ZH/home/Performance.js b/src/components/.ZH/home/Performance.js index 928977078..b4a999631 100644 --- a/src/components/.ZH/home/Performance.js +++ b/src/components/.ZH/home/Performance.js @@ -144,7 +144,7 @@ export function Performance() { Tailwind 會在生產環境建置時自動移除未使用的 CSS，這代表著你最後的 CSS 內容量會盡其所能的最小化。 事實上，大部分的 Tailwind 專案只會對客戶端傳送小於 10kB 的 CSS。 - + {/* Learn more, optimizing for production */} 繼續閱讀關於生產環境優化的部分 diff --git a/src/components/.ZH/home/StateVariants.js b/src/components/.ZH/home/StateVariants.js index b11ce417a..a2b4eb676 100644 --- a/src/components/.ZH/home/StateVariants.js +++ b/src/components/.ZH/home/StateVariants.js @@ -114,7 +114,7 @@ export function StateVariants() { disabled、focus-within、 focus-visible ，甚至是我們自己發明的超酷炫狀態 group-hover。 - + {/* Learn more, handling hover, focus, and other states */} 了解關於 hover、focus 以及其他狀態的詳細說明 diff --git a/src/layouts/.ZH/InstallationLayout.js b/src/layouts/.ZH/InstallationLayout.js index e03171aa3..47c9564b4 100644 --- a/src/layouts/.ZH/InstallationLayout.js +++ b/src/layouts/.ZH/InstallationLayout.js @@ -5,16 +5,16 @@ import Link from 'next/link' import { IconContainer } from '@/components/home/common' let tabs = { - 'Tailwind CLI': '/ZH/docs/installation', - 'Using PostCSS': '/ZH/docs/installation/using-postcss', - 'Framework Guides': '/ZH/docs/installation/framework-guides', - 'Play CDN': '/ZH/docs/installation/play-cdn', + 'Tailwind CLI': '/zh/docs/installation', + 'Using PostCSS': '/zh/docs/installation/using-postcss', + 'Framework Guides': '/zh/docs/installation/framework-guides', + 'Play CDN': '/zh/docs/installation/play-cdn', } let readNext = [ { title: 'Utility-First Fundamentals', - href: '/ZH/docs/utility-first', + href: '/zh/docs/utility-first', body: () => (

    Using a utility-first workflow to build complex components from a constrained set of @@ -25,7 +25,7 @@ let readNext = [ }, { title: 'Responsive Design', - href: '/ZH/docs/responsive-design', + href: '/zh/docs/responsive-design', body: () => (

    Build fully responsive user interfaces that adapt to any screen size using responsive @@ -36,7 +36,7 @@ let readNext = [ }, { title: 'Hover, Focus & Other States', - href: '/ZH/docs/hover-focus-and-other-states', + href: '/zh/docs/hover-focus-and-other-states', body: () => (

    Style elements in interactive states like hover, focus, and more using conditional @@ -47,7 +47,7 @@ let readNext = [ }, { title: 'Dark Mode', - href: '/ZH/docs/dark-mode', + href: '/zh/docs/dark-mode', body: () => (

    Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    ), @@ -55,7 +55,7 @@ let readNext = [ }, { title: 'Reusing Styles', - href: '/ZH/docs/reusing-styles', + href: '/zh/docs/reusing-styles', body: () => (

    Manage duplication and keep your projects maintainable by creating reusable abstractions. @@ -65,7 +65,7 @@ let readNext = [ }, { title: 'Customizing the Framework', - href: '/ZH/docs/adding-custom-styles', + href: '/zh/docs/adding-custom-styles', body: () => (

    Customize the framework to match your brand and extend it with your own custom styles.

    ), diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js index b99225c81..957c0b8f8 100644 --- a/src/layouts/.ZH/SidebarLayout.js +++ b/src/layouts/.ZH/SidebarLayout.js @@ -225,7 +225,7 @@ function TopLevelNav() { <>

    {/* */} - + {name}

    diff --git a/src/pages/index.js b/src/pages/index.js index da7ea5d28..2003994f8 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -41,7 +41,8 @@ function Header() {
    - Search + {/* Search */} + 搜尋 */}
    心動。不如... - + 馬上行動 diff --git a/src/pages/resources.js b/src/pages/resources.js index 30e502f01..d765e4449 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,4 +1,4 @@ -import { DocumentationLayout } from '@/layouts/ZH/DocumentationLayout' +import { DocumentationLayout } from '@/layouts/zh/DocumentationLayout' import { Button } from '@/components/Button' import clsx from 'clsx' import { BasicLayout } from '@/layouts/BasicLayout' From a849c2cae474662358f3836c5d5db3c82b7a0e2b Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:33:45 +0800 Subject: [PATCH 37/48] change to temp dir name --- src/pages/{ZH => zhs}/brand.mdx | 0 src/pages/{ZH => zhs}/docs/accent-color.mdx | 0 src/pages/{ZH => zhs}/docs/adding-base-styles.mdx | 0 src/pages/{ZH => zhs}/docs/adding-custom-styles.mdx | 0 src/pages/{ZH => zhs}/docs/adding-new-utilities.mdx | 0 src/pages/{ZH => zhs}/docs/align-content.mdx | 0 src/pages/{ZH => zhs}/docs/align-items.mdx | 0 src/pages/{ZH => zhs}/docs/align-self.mdx | 0 src/pages/{ZH => zhs}/docs/animation.mdx | 0 src/pages/{ZH => zhs}/docs/appearance.mdx | 0 src/pages/{ZH => zhs}/docs/aspect-ratio.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-blur.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-brightness.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-contrast.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-grayscale.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-hue-rotate.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-invert.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-opacity.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-saturate.mdx | 0 src/pages/{ZH => zhs}/docs/backdrop-sepia.mdx | 0 src/pages/{ZH => zhs}/docs/background-attachment.mdx | 0 src/pages/{ZH => zhs}/docs/background-blend-mode.mdx | 0 src/pages/{ZH => zhs}/docs/background-clip.mdx | 0 src/pages/{ZH => zhs}/docs/background-color.mdx | 0 src/pages/{ZH => zhs}/docs/background-image.mdx | 0 src/pages/{ZH => zhs}/docs/background-origin.mdx | 0 src/pages/{ZH => zhs}/docs/background-position.mdx | 0 src/pages/{ZH => zhs}/docs/background-repeat.mdx | 0 src/pages/{ZH => zhs}/docs/background-size.mdx | 0 src/pages/{ZH => zhs}/docs/blur.mdx | 0 src/pages/{ZH => zhs}/docs/border-collapse.mdx | 0 src/pages/{ZH => zhs}/docs/border-color.mdx | 0 src/pages/{ZH => zhs}/docs/border-radius.mdx | 0 src/pages/{ZH => zhs}/docs/border-style.mdx | 0 src/pages/{ZH => zhs}/docs/border-width.mdx | 0 src/pages/{ZH => zhs}/docs/box-decoration-break.mdx | 0 src/pages/{ZH => zhs}/docs/box-shadow-color.mdx | 0 src/pages/{ZH => zhs}/docs/box-shadow.mdx | 0 src/pages/{ZH => zhs}/docs/box-sizing.mdx | 0 src/pages/{ZH => zhs}/docs/break-after.mdx | 0 src/pages/{ZH => zhs}/docs/break-before.mdx | 0 src/pages/{ZH => zhs}/docs/break-inside.mdx | 0 src/pages/{ZH => zhs}/docs/brightness.mdx | 0 src/pages/{ZH => zhs}/docs/browser-support.mdx | 0 src/pages/{ZH => zhs}/docs/caret-color.mdx | 0 src/pages/{ZH => zhs}/docs/clear.mdx | 0 src/pages/{ZH => zhs}/docs/columns.mdx | 0 src/pages/{ZH => zhs}/docs/configuration.mdx | 0 src/pages/{ZH => zhs}/docs/container.mdx | 0 src/pages/{ZH => zhs}/docs/content-configuration.mdx | 0 src/pages/{ZH => zhs}/docs/content.mdx | 0 src/pages/{ZH => zhs}/docs/contrast.mdx | 0 src/pages/{ZH => zhs}/docs/cursor.mdx | 0 src/pages/{ZH => zhs}/docs/customizing-colors.mdx | 0 src/pages/{ZH => zhs}/docs/customizing-spacing.mdx | 0 src/pages/{ZH => zhs}/docs/dark-mode.mdx | 0 src/pages/{ZH => zhs}/docs/display.mdx | 0 src/pages/{ZH => zhs}/docs/divide-color.mdx | 0 src/pages/{ZH => zhs}/docs/divide-style.mdx | 0 src/pages/{ZH => zhs}/docs/divide-width.mdx | 0 src/pages/{ZH => zhs}/docs/drop-shadow.mdx | 0 src/pages/{ZH => zhs}/docs/editor-setup.mdx | 0 src/pages/{ZH => zhs}/docs/fill.mdx | 0 src/pages/{ZH => zhs}/docs/flex-basis.mdx | 0 src/pages/{ZH => zhs}/docs/flex-direction.mdx | 0 src/pages/{ZH => zhs}/docs/flex-grow.mdx | 0 src/pages/{ZH => zhs}/docs/flex-shrink.mdx | 0 src/pages/{ZH => zhs}/docs/flex-wrap.mdx | 0 src/pages/{ZH => zhs}/docs/flex.mdx | 0 src/pages/{ZH => zhs}/docs/float.mdx | 0 src/pages/{ZH => zhs}/docs/font-family.mdx | 0 src/pages/{ZH => zhs}/docs/font-size.mdx | 0 src/pages/{ZH => zhs}/docs/font-smoothing.mdx | 0 src/pages/{ZH => zhs}/docs/font-style.mdx | 0 src/pages/{ZH => zhs}/docs/font-variant-numeric.mdx | 0 src/pages/{ZH => zhs}/docs/font-weight.mdx | 0 src/pages/{ZH => zhs}/docs/functions-and-directives.mdx | 0 src/pages/{ZH => zhs}/docs/gap.mdx | 0 src/pages/{ZH => zhs}/docs/gradient-color-stops.mdx | 0 src/pages/{ZH => zhs}/docs/grayscale.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-columns.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-flow.mdx | 0 src/pages/{ZH => zhs}/docs/grid-auto-rows.mdx | 0 src/pages/{ZH => zhs}/docs/grid-column.mdx | 0 src/pages/{ZH => zhs}/docs/grid-row.mdx | 0 src/pages/{ZH => zhs}/docs/grid-template-columns.mdx | 0 src/pages/{ZH => zhs}/docs/grid-template-rows.mdx | 0 src/pages/{ZH => zhs}/docs/guides/create-react-app.js | 0 src/pages/{ZH => zhs}/docs/guides/gatsby.js | 0 src/pages/{ZH => zhs}/docs/guides/laravel.js | 0 src/pages/{ZH => zhs}/docs/guides/nextjs.js | 0 src/pages/{ZH => zhs}/docs/guides/nuxtjs.js | 0 src/pages/{ZH => zhs}/docs/guides/vite.js | 0 src/pages/{ZH => zhs}/docs/height.mdx | 0 src/pages/{ZH => zhs}/docs/hover-focus-and-other-states.mdx | 0 src/pages/{ZH => zhs}/docs/hue-rotate.mdx | 0 src/pages/{ZH => zhs}/docs/installation/framework-guides.js | 0 src/pages/{ZH => zhs}/docs/installation/index.js | 0 src/pages/{ZH => zhs}/docs/installation/play-cdn.js | 0 src/pages/{ZH => zhs}/docs/installation/using-postcss.js | 0 src/pages/{ZH => zhs}/docs/invert.mdx | 0 src/pages/{ZH => zhs}/docs/isolation.mdx | 0 src/pages/{ZH => zhs}/docs/justify-content.mdx | 0 src/pages/{ZH => zhs}/docs/justify-items.mdx | 0 src/pages/{ZH => zhs}/docs/justify-self.mdx | 0 src/pages/{ZH => zhs}/docs/letter-spacing.mdx | 0 src/pages/{ZH => zhs}/docs/line-height.mdx | 0 src/pages/{ZH => zhs}/docs/list-style-position.mdx | 0 src/pages/{ZH => zhs}/docs/list-style-type.mdx | 0 src/pages/{ZH => zhs}/docs/margin.mdx | 0 src/pages/{ZH => zhs}/docs/max-height.mdx | 0 src/pages/{ZH => zhs}/docs/max-width.mdx | 0 src/pages/{ZH => zhs}/docs/min-height.mdx | 0 src/pages/{ZH => zhs}/docs/min-width.mdx | 0 src/pages/{ZH => zhs}/docs/mix-blend-mode.mdx | 0 src/pages/{ZH => zhs}/docs/object-fit.mdx | 0 src/pages/{ZH => zhs}/docs/object-position.mdx | 0 src/pages/{ZH => zhs}/docs/opacity.mdx | 0 src/pages/{ZH => zhs}/docs/optimizing-for-production.mdx | 0 src/pages/{ZH => zhs}/docs/order.mdx | 0 src/pages/{ZH => zhs}/docs/outline-color.mdx | 0 src/pages/{ZH => zhs}/docs/outline-offset.mdx | 0 src/pages/{ZH => zhs}/docs/outline-style.mdx | 0 src/pages/{ZH => zhs}/docs/outline-width.mdx | 0 src/pages/{ZH => zhs}/docs/overflow.mdx | 0 src/pages/{ZH => zhs}/docs/overscroll-behavior.mdx | 0 src/pages/{ZH => zhs}/docs/padding.mdx | 0 src/pages/{ZH => zhs}/docs/place-content.mdx | 0 src/pages/{ZH => zhs}/docs/place-items.mdx | 0 src/pages/{ZH => zhs}/docs/place-self.mdx | 0 src/pages/{ZH => zhs}/docs/play-cdn.mdx | 0 src/pages/{ZH => zhs}/docs/plugins.mdx | 0 src/pages/{ZH => zhs}/docs/pointer-events.mdx | 0 src/pages/{ZH => zhs}/docs/position.mdx | 0 src/pages/{ZH => zhs}/docs/preflight.mdx | 0 src/pages/{ZH => zhs}/docs/presets.mdx | 0 src/pages/{ZH => zhs}/docs/resize.mdx | 0 src/pages/{ZH => zhs}/docs/responsive-design.mdx | 0 src/pages/{ZH => zhs}/docs/reusing-styles.mdx | 0 src/pages/{ZH => zhs}/docs/ring-color.mdx | 0 src/pages/{ZH => zhs}/docs/ring-offset-color.mdx | 0 src/pages/{ZH => zhs}/docs/ring-offset-width.mdx | 0 src/pages/{ZH => zhs}/docs/ring-width.mdx | 0 src/pages/{ZH => zhs}/docs/rotate.mdx | 0 src/pages/{ZH => zhs}/docs/saturate.mdx | 0 src/pages/{ZH => zhs}/docs/scale.mdx | 0 src/pages/{ZH => zhs}/docs/screen-readers.mdx | 0 src/pages/{ZH => zhs}/docs/screens.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-behavior.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-margin.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-padding.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-align.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-stop.mdx | 0 src/pages/{ZH => zhs}/docs/scroll-snap-type.mdx | 0 src/pages/{ZH => zhs}/docs/sepia.mdx | 0 src/pages/{ZH => zhs}/docs/skew.mdx | 0 src/pages/{ZH => zhs}/docs/space.mdx | 0 src/pages/{ZH => zhs}/docs/stroke-width.mdx | 0 src/pages/{ZH => zhs}/docs/stroke.mdx | 0 src/pages/{ZH => zhs}/docs/table-layout.mdx | 0 src/pages/{ZH => zhs}/docs/tailwind-cli.mdx | 0 src/pages/{ZH => zhs}/docs/text-align.mdx | 0 src/pages/{ZH => zhs}/docs/text-color.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-color.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-style.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration-thickness.mdx | 0 src/pages/{ZH => zhs}/docs/text-decoration.mdx | 0 src/pages/{ZH => zhs}/docs/text-indent.mdx | 0 src/pages/{ZH => zhs}/docs/text-overflow.mdx | 0 src/pages/{ZH => zhs}/docs/text-transform.mdx | 0 src/pages/{ZH => zhs}/docs/text-underline-offset.mdx | 0 src/pages/{ZH => zhs}/docs/theme.mdx | 0 src/pages/{ZH => zhs}/docs/top-right-bottom-left.mdx | 0 src/pages/{ZH => zhs}/docs/touch-action.mdx | 0 src/pages/{ZH => zhs}/docs/transform-origin.mdx | 0 src/pages/{ZH => zhs}/docs/transition-delay.mdx | 0 src/pages/{ZH => zhs}/docs/transition-duration.mdx | 0 src/pages/{ZH => zhs}/docs/transition-property.mdx | 0 src/pages/{ZH => zhs}/docs/transition-timing-function.mdx | 0 src/pages/{ZH => zhs}/docs/translate.mdx | 0 src/pages/{ZH => zhs}/docs/upgrade-guide.mdx | 0 src/pages/{ZH => zhs}/docs/user-select.mdx | 0 src/pages/{ZH => zhs}/docs/using-with-preprocessors.mdx | 0 src/pages/{ZH => zhs}/docs/utility-first.mdx | 0 src/pages/{ZH => zhs}/docs/vertical-align.mdx | 0 src/pages/{ZH => zhs}/docs/visibility.mdx | 0 src/pages/{ZH => zhs}/docs/whitespace.mdx | 0 src/pages/{ZH => zhs}/docs/width.mdx | 0 src/pages/{ZH => zhs}/docs/will-change.mdx | 0 src/pages/{ZH => zhs}/docs/word-break.mdx | 0 src/pages/{ZH => zhs}/docs/z-index.mdx | 0 191 files changed, 0 insertions(+), 0 deletions(-) rename src/pages/{ZH => zhs}/brand.mdx (100%) rename src/pages/{ZH => zhs}/docs/accent-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-base-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-custom-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/adding-new-utilities.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/align-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/animation.mdx (100%) rename src/pages/{ZH => zhs}/docs/appearance.mdx (100%) rename src/pages/{ZH => zhs}/docs/aspect-ratio.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-blur.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-brightness.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-contrast.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-grayscale.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-hue-rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-invert.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-opacity.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-saturate.mdx (100%) rename src/pages/{ZH => zhs}/docs/backdrop-sepia.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-attachment.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-blend-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-clip.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-image.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-origin.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-repeat.mdx (100%) rename src/pages/{ZH => zhs}/docs/background-size.mdx (100%) rename src/pages/{ZH => zhs}/docs/blur.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-collapse.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-radius.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/border-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-decoration-break.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-shadow-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-shadow.mdx (100%) rename src/pages/{ZH => zhs}/docs/box-sizing.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-after.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-before.mdx (100%) rename src/pages/{ZH => zhs}/docs/break-inside.mdx (100%) rename src/pages/{ZH => zhs}/docs/brightness.mdx (100%) rename src/pages/{ZH => zhs}/docs/browser-support.mdx (100%) rename src/pages/{ZH => zhs}/docs/caret-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/clear.mdx (100%) rename src/pages/{ZH => zhs}/docs/columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/configuration.mdx (100%) rename src/pages/{ZH => zhs}/docs/container.mdx (100%) rename src/pages/{ZH => zhs}/docs/content-configuration.mdx (100%) rename src/pages/{ZH => zhs}/docs/content.mdx (100%) rename src/pages/{ZH => zhs}/docs/contrast.mdx (100%) rename src/pages/{ZH => zhs}/docs/cursor.mdx (100%) rename src/pages/{ZH => zhs}/docs/customizing-colors.mdx (100%) rename src/pages/{ZH => zhs}/docs/customizing-spacing.mdx (100%) rename src/pages/{ZH => zhs}/docs/dark-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/display.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/divide-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/drop-shadow.mdx (100%) rename src/pages/{ZH => zhs}/docs/editor-setup.mdx (100%) rename src/pages/{ZH => zhs}/docs/fill.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-basis.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-direction.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-grow.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-shrink.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex-wrap.mdx (100%) rename src/pages/{ZH => zhs}/docs/flex.mdx (100%) rename src/pages/{ZH => zhs}/docs/float.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-family.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-size.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-smoothing.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-variant-numeric.mdx (100%) rename src/pages/{ZH => zhs}/docs/font-weight.mdx (100%) rename src/pages/{ZH => zhs}/docs/functions-and-directives.mdx (100%) rename src/pages/{ZH => zhs}/docs/gap.mdx (100%) rename src/pages/{ZH => zhs}/docs/gradient-color-stops.mdx (100%) rename src/pages/{ZH => zhs}/docs/grayscale.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-flow.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-auto-rows.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-column.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-row.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-template-columns.mdx (100%) rename src/pages/{ZH => zhs}/docs/grid-template-rows.mdx (100%) rename src/pages/{ZH => zhs}/docs/guides/create-react-app.js (100%) rename src/pages/{ZH => zhs}/docs/guides/gatsby.js (100%) rename src/pages/{ZH => zhs}/docs/guides/laravel.js (100%) rename src/pages/{ZH => zhs}/docs/guides/nextjs.js (100%) rename src/pages/{ZH => zhs}/docs/guides/nuxtjs.js (100%) rename src/pages/{ZH => zhs}/docs/guides/vite.js (100%) rename src/pages/{ZH => zhs}/docs/height.mdx (100%) rename src/pages/{ZH => zhs}/docs/hover-focus-and-other-states.mdx (100%) rename src/pages/{ZH => zhs}/docs/hue-rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/installation/framework-guides.js (100%) rename src/pages/{ZH => zhs}/docs/installation/index.js (100%) rename src/pages/{ZH => zhs}/docs/installation/play-cdn.js (100%) rename src/pages/{ZH => zhs}/docs/installation/using-postcss.js (100%) rename src/pages/{ZH => zhs}/docs/invert.mdx (100%) rename src/pages/{ZH => zhs}/docs/isolation.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/justify-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/letter-spacing.mdx (100%) rename src/pages/{ZH => zhs}/docs/line-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/list-style-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/list-style-type.mdx (100%) rename src/pages/{ZH => zhs}/docs/margin.mdx (100%) rename src/pages/{ZH => zhs}/docs/max-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/max-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/min-height.mdx (100%) rename src/pages/{ZH => zhs}/docs/min-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/mix-blend-mode.mdx (100%) rename src/pages/{ZH => zhs}/docs/object-fit.mdx (100%) rename src/pages/{ZH => zhs}/docs/object-position.mdx (100%) rename src/pages/{ZH => zhs}/docs/opacity.mdx (100%) rename src/pages/{ZH => zhs}/docs/optimizing-for-production.mdx (100%) rename src/pages/{ZH => zhs}/docs/order.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-offset.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/outline-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/overflow.mdx (100%) rename src/pages/{ZH => zhs}/docs/overscroll-behavior.mdx (100%) rename src/pages/{ZH => zhs}/docs/padding.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-content.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-items.mdx (100%) rename src/pages/{ZH => zhs}/docs/place-self.mdx (100%) rename src/pages/{ZH => zhs}/docs/play-cdn.mdx (100%) rename src/pages/{ZH => zhs}/docs/plugins.mdx (100%) rename src/pages/{ZH => zhs}/docs/pointer-events.mdx (100%) rename src/pages/{ZH => zhs}/docs/position.mdx (100%) rename src/pages/{ZH => zhs}/docs/preflight.mdx (100%) rename src/pages/{ZH => zhs}/docs/presets.mdx (100%) rename src/pages/{ZH => zhs}/docs/resize.mdx (100%) rename src/pages/{ZH => zhs}/docs/responsive-design.mdx (100%) rename src/pages/{ZH => zhs}/docs/reusing-styles.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-offset-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-offset-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/ring-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/rotate.mdx (100%) rename src/pages/{ZH => zhs}/docs/saturate.mdx (100%) rename src/pages/{ZH => zhs}/docs/scale.mdx (100%) rename src/pages/{ZH => zhs}/docs/screen-readers.mdx (100%) rename src/pages/{ZH => zhs}/docs/screens.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-behavior.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-margin.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-padding.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-stop.mdx (100%) rename src/pages/{ZH => zhs}/docs/scroll-snap-type.mdx (100%) rename src/pages/{ZH => zhs}/docs/sepia.mdx (100%) rename src/pages/{ZH => zhs}/docs/skew.mdx (100%) rename src/pages/{ZH => zhs}/docs/space.mdx (100%) rename src/pages/{ZH => zhs}/docs/stroke-width.mdx (100%) rename src/pages/{ZH => zhs}/docs/stroke.mdx (100%) rename src/pages/{ZH => zhs}/docs/table-layout.mdx (100%) rename src/pages/{ZH => zhs}/docs/tailwind-cli.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-color.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-style.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration-thickness.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-decoration.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-indent.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-overflow.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-transform.mdx (100%) rename src/pages/{ZH => zhs}/docs/text-underline-offset.mdx (100%) rename src/pages/{ZH => zhs}/docs/theme.mdx (100%) rename src/pages/{ZH => zhs}/docs/top-right-bottom-left.mdx (100%) rename src/pages/{ZH => zhs}/docs/touch-action.mdx (100%) rename src/pages/{ZH => zhs}/docs/transform-origin.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-delay.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-duration.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-property.mdx (100%) rename src/pages/{ZH => zhs}/docs/transition-timing-function.mdx (100%) rename src/pages/{ZH => zhs}/docs/translate.mdx (100%) rename src/pages/{ZH => zhs}/docs/upgrade-guide.mdx (100%) rename src/pages/{ZH => zhs}/docs/user-select.mdx (100%) rename src/pages/{ZH => zhs}/docs/using-with-preprocessors.mdx (100%) rename src/pages/{ZH => zhs}/docs/utility-first.mdx (100%) rename src/pages/{ZH => zhs}/docs/vertical-align.mdx (100%) rename src/pages/{ZH => zhs}/docs/visibility.mdx (100%) rename src/pages/{ZH => zhs}/docs/whitespace.mdx (100%) rename src/pages/{ZH => zhs}/docs/width.mdx (100%) rename src/pages/{ZH => zhs}/docs/will-change.mdx (100%) rename src/pages/{ZH => zhs}/docs/word-break.mdx (100%) rename src/pages/{ZH => zhs}/docs/z-index.mdx (100%) diff --git a/src/pages/ZH/brand.mdx b/src/pages/zhs/brand.mdx similarity index 100% rename from src/pages/ZH/brand.mdx rename to src/pages/zhs/brand.mdx diff --git a/src/pages/ZH/docs/accent-color.mdx b/src/pages/zhs/docs/accent-color.mdx similarity index 100% rename from src/pages/ZH/docs/accent-color.mdx rename to src/pages/zhs/docs/accent-color.mdx diff --git a/src/pages/ZH/docs/adding-base-styles.mdx b/src/pages/zhs/docs/adding-base-styles.mdx similarity index 100% rename from src/pages/ZH/docs/adding-base-styles.mdx rename to src/pages/zhs/docs/adding-base-styles.mdx diff --git a/src/pages/ZH/docs/adding-custom-styles.mdx b/src/pages/zhs/docs/adding-custom-styles.mdx similarity index 100% rename from src/pages/ZH/docs/adding-custom-styles.mdx rename to src/pages/zhs/docs/adding-custom-styles.mdx diff --git a/src/pages/ZH/docs/adding-new-utilities.mdx b/src/pages/zhs/docs/adding-new-utilities.mdx similarity index 100% rename from src/pages/ZH/docs/adding-new-utilities.mdx rename to src/pages/zhs/docs/adding-new-utilities.mdx diff --git a/src/pages/ZH/docs/align-content.mdx b/src/pages/zhs/docs/align-content.mdx similarity index 100% rename from src/pages/ZH/docs/align-content.mdx rename to src/pages/zhs/docs/align-content.mdx diff --git a/src/pages/ZH/docs/align-items.mdx b/src/pages/zhs/docs/align-items.mdx similarity index 100% rename from src/pages/ZH/docs/align-items.mdx rename to src/pages/zhs/docs/align-items.mdx diff --git a/src/pages/ZH/docs/align-self.mdx b/src/pages/zhs/docs/align-self.mdx similarity index 100% rename from src/pages/ZH/docs/align-self.mdx rename to src/pages/zhs/docs/align-self.mdx diff --git a/src/pages/ZH/docs/animation.mdx b/src/pages/zhs/docs/animation.mdx similarity index 100% rename from src/pages/ZH/docs/animation.mdx rename to src/pages/zhs/docs/animation.mdx diff --git a/src/pages/ZH/docs/appearance.mdx b/src/pages/zhs/docs/appearance.mdx similarity index 100% rename from src/pages/ZH/docs/appearance.mdx rename to src/pages/zhs/docs/appearance.mdx diff --git a/src/pages/ZH/docs/aspect-ratio.mdx b/src/pages/zhs/docs/aspect-ratio.mdx similarity index 100% rename from src/pages/ZH/docs/aspect-ratio.mdx rename to src/pages/zhs/docs/aspect-ratio.mdx diff --git a/src/pages/ZH/docs/backdrop-blur.mdx b/src/pages/zhs/docs/backdrop-blur.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-blur.mdx rename to src/pages/zhs/docs/backdrop-blur.mdx diff --git a/src/pages/ZH/docs/backdrop-brightness.mdx b/src/pages/zhs/docs/backdrop-brightness.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-brightness.mdx rename to src/pages/zhs/docs/backdrop-brightness.mdx diff --git a/src/pages/ZH/docs/backdrop-contrast.mdx b/src/pages/zhs/docs/backdrop-contrast.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-contrast.mdx rename to src/pages/zhs/docs/backdrop-contrast.mdx diff --git a/src/pages/ZH/docs/backdrop-grayscale.mdx b/src/pages/zhs/docs/backdrop-grayscale.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-grayscale.mdx rename to src/pages/zhs/docs/backdrop-grayscale.mdx diff --git a/src/pages/ZH/docs/backdrop-hue-rotate.mdx b/src/pages/zhs/docs/backdrop-hue-rotate.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-hue-rotate.mdx rename to src/pages/zhs/docs/backdrop-hue-rotate.mdx diff --git a/src/pages/ZH/docs/backdrop-invert.mdx b/src/pages/zhs/docs/backdrop-invert.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-invert.mdx rename to src/pages/zhs/docs/backdrop-invert.mdx diff --git a/src/pages/ZH/docs/backdrop-opacity.mdx b/src/pages/zhs/docs/backdrop-opacity.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-opacity.mdx rename to src/pages/zhs/docs/backdrop-opacity.mdx diff --git a/src/pages/ZH/docs/backdrop-saturate.mdx b/src/pages/zhs/docs/backdrop-saturate.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-saturate.mdx rename to src/pages/zhs/docs/backdrop-saturate.mdx diff --git a/src/pages/ZH/docs/backdrop-sepia.mdx b/src/pages/zhs/docs/backdrop-sepia.mdx similarity index 100% rename from src/pages/ZH/docs/backdrop-sepia.mdx rename to src/pages/zhs/docs/backdrop-sepia.mdx diff --git a/src/pages/ZH/docs/background-attachment.mdx b/src/pages/zhs/docs/background-attachment.mdx similarity index 100% rename from src/pages/ZH/docs/background-attachment.mdx rename to src/pages/zhs/docs/background-attachment.mdx diff --git a/src/pages/ZH/docs/background-blend-mode.mdx b/src/pages/zhs/docs/background-blend-mode.mdx similarity index 100% rename from src/pages/ZH/docs/background-blend-mode.mdx rename to src/pages/zhs/docs/background-blend-mode.mdx diff --git a/src/pages/ZH/docs/background-clip.mdx b/src/pages/zhs/docs/background-clip.mdx similarity index 100% rename from src/pages/ZH/docs/background-clip.mdx rename to src/pages/zhs/docs/background-clip.mdx diff --git a/src/pages/ZH/docs/background-color.mdx b/src/pages/zhs/docs/background-color.mdx similarity index 100% rename from src/pages/ZH/docs/background-color.mdx rename to src/pages/zhs/docs/background-color.mdx diff --git a/src/pages/ZH/docs/background-image.mdx b/src/pages/zhs/docs/background-image.mdx similarity index 100% rename from src/pages/ZH/docs/background-image.mdx rename to src/pages/zhs/docs/background-image.mdx diff --git a/src/pages/ZH/docs/background-origin.mdx b/src/pages/zhs/docs/background-origin.mdx similarity index 100% rename from src/pages/ZH/docs/background-origin.mdx rename to src/pages/zhs/docs/background-origin.mdx diff --git a/src/pages/ZH/docs/background-position.mdx b/src/pages/zhs/docs/background-position.mdx similarity index 100% rename from src/pages/ZH/docs/background-position.mdx rename to src/pages/zhs/docs/background-position.mdx diff --git a/src/pages/ZH/docs/background-repeat.mdx b/src/pages/zhs/docs/background-repeat.mdx similarity index 100% rename from src/pages/ZH/docs/background-repeat.mdx rename to src/pages/zhs/docs/background-repeat.mdx diff --git a/src/pages/ZH/docs/background-size.mdx b/src/pages/zhs/docs/background-size.mdx similarity index 100% rename from src/pages/ZH/docs/background-size.mdx rename to src/pages/zhs/docs/background-size.mdx diff --git a/src/pages/ZH/docs/blur.mdx b/src/pages/zhs/docs/blur.mdx similarity index 100% rename from src/pages/ZH/docs/blur.mdx rename to src/pages/zhs/docs/blur.mdx diff --git a/src/pages/ZH/docs/border-collapse.mdx b/src/pages/zhs/docs/border-collapse.mdx similarity index 100% rename from src/pages/ZH/docs/border-collapse.mdx rename to src/pages/zhs/docs/border-collapse.mdx diff --git a/src/pages/ZH/docs/border-color.mdx b/src/pages/zhs/docs/border-color.mdx similarity index 100% rename from src/pages/ZH/docs/border-color.mdx rename to src/pages/zhs/docs/border-color.mdx diff --git a/src/pages/ZH/docs/border-radius.mdx b/src/pages/zhs/docs/border-radius.mdx similarity index 100% rename from src/pages/ZH/docs/border-radius.mdx rename to src/pages/zhs/docs/border-radius.mdx diff --git a/src/pages/ZH/docs/border-style.mdx b/src/pages/zhs/docs/border-style.mdx similarity index 100% rename from src/pages/ZH/docs/border-style.mdx rename to src/pages/zhs/docs/border-style.mdx diff --git a/src/pages/ZH/docs/border-width.mdx b/src/pages/zhs/docs/border-width.mdx similarity index 100% rename from src/pages/ZH/docs/border-width.mdx rename to src/pages/zhs/docs/border-width.mdx diff --git a/src/pages/ZH/docs/box-decoration-break.mdx b/src/pages/zhs/docs/box-decoration-break.mdx similarity index 100% rename from src/pages/ZH/docs/box-decoration-break.mdx rename to src/pages/zhs/docs/box-decoration-break.mdx diff --git a/src/pages/ZH/docs/box-shadow-color.mdx b/src/pages/zhs/docs/box-shadow-color.mdx similarity index 100% rename from src/pages/ZH/docs/box-shadow-color.mdx rename to src/pages/zhs/docs/box-shadow-color.mdx diff --git a/src/pages/ZH/docs/box-shadow.mdx b/src/pages/zhs/docs/box-shadow.mdx similarity index 100% rename from src/pages/ZH/docs/box-shadow.mdx rename to src/pages/zhs/docs/box-shadow.mdx diff --git a/src/pages/ZH/docs/box-sizing.mdx b/src/pages/zhs/docs/box-sizing.mdx similarity index 100% rename from src/pages/ZH/docs/box-sizing.mdx rename to src/pages/zhs/docs/box-sizing.mdx diff --git a/src/pages/ZH/docs/break-after.mdx b/src/pages/zhs/docs/break-after.mdx similarity index 100% rename from src/pages/ZH/docs/break-after.mdx rename to src/pages/zhs/docs/break-after.mdx diff --git a/src/pages/ZH/docs/break-before.mdx b/src/pages/zhs/docs/break-before.mdx similarity index 100% rename from src/pages/ZH/docs/break-before.mdx rename to src/pages/zhs/docs/break-before.mdx diff --git a/src/pages/ZH/docs/break-inside.mdx b/src/pages/zhs/docs/break-inside.mdx similarity index 100% rename from src/pages/ZH/docs/break-inside.mdx rename to src/pages/zhs/docs/break-inside.mdx diff --git a/src/pages/ZH/docs/brightness.mdx b/src/pages/zhs/docs/brightness.mdx similarity index 100% rename from src/pages/ZH/docs/brightness.mdx rename to src/pages/zhs/docs/brightness.mdx diff --git a/src/pages/ZH/docs/browser-support.mdx b/src/pages/zhs/docs/browser-support.mdx similarity index 100% rename from src/pages/ZH/docs/browser-support.mdx rename to src/pages/zhs/docs/browser-support.mdx diff --git a/src/pages/ZH/docs/caret-color.mdx b/src/pages/zhs/docs/caret-color.mdx similarity index 100% rename from src/pages/ZH/docs/caret-color.mdx rename to src/pages/zhs/docs/caret-color.mdx diff --git a/src/pages/ZH/docs/clear.mdx b/src/pages/zhs/docs/clear.mdx similarity index 100% rename from src/pages/ZH/docs/clear.mdx rename to src/pages/zhs/docs/clear.mdx diff --git a/src/pages/ZH/docs/columns.mdx b/src/pages/zhs/docs/columns.mdx similarity index 100% rename from src/pages/ZH/docs/columns.mdx rename to src/pages/zhs/docs/columns.mdx diff --git a/src/pages/ZH/docs/configuration.mdx b/src/pages/zhs/docs/configuration.mdx similarity index 100% rename from src/pages/ZH/docs/configuration.mdx rename to src/pages/zhs/docs/configuration.mdx diff --git a/src/pages/ZH/docs/container.mdx b/src/pages/zhs/docs/container.mdx similarity index 100% rename from src/pages/ZH/docs/container.mdx rename to src/pages/zhs/docs/container.mdx diff --git a/src/pages/ZH/docs/content-configuration.mdx b/src/pages/zhs/docs/content-configuration.mdx similarity index 100% rename from src/pages/ZH/docs/content-configuration.mdx rename to src/pages/zhs/docs/content-configuration.mdx diff --git a/src/pages/ZH/docs/content.mdx b/src/pages/zhs/docs/content.mdx similarity index 100% rename from src/pages/ZH/docs/content.mdx rename to src/pages/zhs/docs/content.mdx diff --git a/src/pages/ZH/docs/contrast.mdx b/src/pages/zhs/docs/contrast.mdx similarity index 100% rename from src/pages/ZH/docs/contrast.mdx rename to src/pages/zhs/docs/contrast.mdx diff --git a/src/pages/ZH/docs/cursor.mdx b/src/pages/zhs/docs/cursor.mdx similarity index 100% rename from src/pages/ZH/docs/cursor.mdx rename to src/pages/zhs/docs/cursor.mdx diff --git a/src/pages/ZH/docs/customizing-colors.mdx b/src/pages/zhs/docs/customizing-colors.mdx similarity index 100% rename from src/pages/ZH/docs/customizing-colors.mdx rename to src/pages/zhs/docs/customizing-colors.mdx diff --git a/src/pages/ZH/docs/customizing-spacing.mdx b/src/pages/zhs/docs/customizing-spacing.mdx similarity index 100% rename from src/pages/ZH/docs/customizing-spacing.mdx rename to src/pages/zhs/docs/customizing-spacing.mdx diff --git a/src/pages/ZH/docs/dark-mode.mdx b/src/pages/zhs/docs/dark-mode.mdx similarity index 100% rename from src/pages/ZH/docs/dark-mode.mdx rename to src/pages/zhs/docs/dark-mode.mdx diff --git a/src/pages/ZH/docs/display.mdx b/src/pages/zhs/docs/display.mdx similarity index 100% rename from src/pages/ZH/docs/display.mdx rename to src/pages/zhs/docs/display.mdx diff --git a/src/pages/ZH/docs/divide-color.mdx b/src/pages/zhs/docs/divide-color.mdx similarity index 100% rename from src/pages/ZH/docs/divide-color.mdx rename to src/pages/zhs/docs/divide-color.mdx diff --git a/src/pages/ZH/docs/divide-style.mdx b/src/pages/zhs/docs/divide-style.mdx similarity index 100% rename from src/pages/ZH/docs/divide-style.mdx rename to src/pages/zhs/docs/divide-style.mdx diff --git a/src/pages/ZH/docs/divide-width.mdx b/src/pages/zhs/docs/divide-width.mdx similarity index 100% rename from src/pages/ZH/docs/divide-width.mdx rename to src/pages/zhs/docs/divide-width.mdx diff --git a/src/pages/ZH/docs/drop-shadow.mdx b/src/pages/zhs/docs/drop-shadow.mdx similarity index 100% rename from src/pages/ZH/docs/drop-shadow.mdx rename to src/pages/zhs/docs/drop-shadow.mdx diff --git a/src/pages/ZH/docs/editor-setup.mdx b/src/pages/zhs/docs/editor-setup.mdx similarity index 100% rename from src/pages/ZH/docs/editor-setup.mdx rename to src/pages/zhs/docs/editor-setup.mdx diff --git a/src/pages/ZH/docs/fill.mdx b/src/pages/zhs/docs/fill.mdx similarity index 100% rename from src/pages/ZH/docs/fill.mdx rename to src/pages/zhs/docs/fill.mdx diff --git a/src/pages/ZH/docs/flex-basis.mdx b/src/pages/zhs/docs/flex-basis.mdx similarity index 100% rename from src/pages/ZH/docs/flex-basis.mdx rename to src/pages/zhs/docs/flex-basis.mdx diff --git a/src/pages/ZH/docs/flex-direction.mdx b/src/pages/zhs/docs/flex-direction.mdx similarity index 100% rename from src/pages/ZH/docs/flex-direction.mdx rename to src/pages/zhs/docs/flex-direction.mdx diff --git a/src/pages/ZH/docs/flex-grow.mdx b/src/pages/zhs/docs/flex-grow.mdx similarity index 100% rename from src/pages/ZH/docs/flex-grow.mdx rename to src/pages/zhs/docs/flex-grow.mdx diff --git a/src/pages/ZH/docs/flex-shrink.mdx b/src/pages/zhs/docs/flex-shrink.mdx similarity index 100% rename from src/pages/ZH/docs/flex-shrink.mdx rename to src/pages/zhs/docs/flex-shrink.mdx diff --git a/src/pages/ZH/docs/flex-wrap.mdx b/src/pages/zhs/docs/flex-wrap.mdx similarity index 100% rename from src/pages/ZH/docs/flex-wrap.mdx rename to src/pages/zhs/docs/flex-wrap.mdx diff --git a/src/pages/ZH/docs/flex.mdx b/src/pages/zhs/docs/flex.mdx similarity index 100% rename from src/pages/ZH/docs/flex.mdx rename to src/pages/zhs/docs/flex.mdx diff --git a/src/pages/ZH/docs/float.mdx b/src/pages/zhs/docs/float.mdx similarity index 100% rename from src/pages/ZH/docs/float.mdx rename to src/pages/zhs/docs/float.mdx diff --git a/src/pages/ZH/docs/font-family.mdx b/src/pages/zhs/docs/font-family.mdx similarity index 100% rename from src/pages/ZH/docs/font-family.mdx rename to src/pages/zhs/docs/font-family.mdx diff --git a/src/pages/ZH/docs/font-size.mdx b/src/pages/zhs/docs/font-size.mdx similarity index 100% rename from src/pages/ZH/docs/font-size.mdx rename to src/pages/zhs/docs/font-size.mdx diff --git a/src/pages/ZH/docs/font-smoothing.mdx b/src/pages/zhs/docs/font-smoothing.mdx similarity index 100% rename from src/pages/ZH/docs/font-smoothing.mdx rename to src/pages/zhs/docs/font-smoothing.mdx diff --git a/src/pages/ZH/docs/font-style.mdx b/src/pages/zhs/docs/font-style.mdx similarity index 100% rename from src/pages/ZH/docs/font-style.mdx rename to src/pages/zhs/docs/font-style.mdx diff --git a/src/pages/ZH/docs/font-variant-numeric.mdx b/src/pages/zhs/docs/font-variant-numeric.mdx similarity index 100% rename from src/pages/ZH/docs/font-variant-numeric.mdx rename to src/pages/zhs/docs/font-variant-numeric.mdx diff --git a/src/pages/ZH/docs/font-weight.mdx b/src/pages/zhs/docs/font-weight.mdx similarity index 100% rename from src/pages/ZH/docs/font-weight.mdx rename to src/pages/zhs/docs/font-weight.mdx diff --git a/src/pages/ZH/docs/functions-and-directives.mdx b/src/pages/zhs/docs/functions-and-directives.mdx similarity index 100% rename from src/pages/ZH/docs/functions-and-directives.mdx rename to src/pages/zhs/docs/functions-and-directives.mdx diff --git a/src/pages/ZH/docs/gap.mdx b/src/pages/zhs/docs/gap.mdx similarity index 100% rename from src/pages/ZH/docs/gap.mdx rename to src/pages/zhs/docs/gap.mdx diff --git a/src/pages/ZH/docs/gradient-color-stops.mdx b/src/pages/zhs/docs/gradient-color-stops.mdx similarity index 100% rename from src/pages/ZH/docs/gradient-color-stops.mdx rename to src/pages/zhs/docs/gradient-color-stops.mdx diff --git a/src/pages/ZH/docs/grayscale.mdx b/src/pages/zhs/docs/grayscale.mdx similarity index 100% rename from src/pages/ZH/docs/grayscale.mdx rename to src/pages/zhs/docs/grayscale.mdx diff --git a/src/pages/ZH/docs/grid-auto-columns.mdx b/src/pages/zhs/docs/grid-auto-columns.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-columns.mdx rename to src/pages/zhs/docs/grid-auto-columns.mdx diff --git a/src/pages/ZH/docs/grid-auto-flow.mdx b/src/pages/zhs/docs/grid-auto-flow.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-flow.mdx rename to src/pages/zhs/docs/grid-auto-flow.mdx diff --git a/src/pages/ZH/docs/grid-auto-rows.mdx b/src/pages/zhs/docs/grid-auto-rows.mdx similarity index 100% rename from src/pages/ZH/docs/grid-auto-rows.mdx rename to src/pages/zhs/docs/grid-auto-rows.mdx diff --git a/src/pages/ZH/docs/grid-column.mdx b/src/pages/zhs/docs/grid-column.mdx similarity index 100% rename from src/pages/ZH/docs/grid-column.mdx rename to src/pages/zhs/docs/grid-column.mdx diff --git a/src/pages/ZH/docs/grid-row.mdx b/src/pages/zhs/docs/grid-row.mdx similarity index 100% rename from src/pages/ZH/docs/grid-row.mdx rename to src/pages/zhs/docs/grid-row.mdx diff --git a/src/pages/ZH/docs/grid-template-columns.mdx b/src/pages/zhs/docs/grid-template-columns.mdx similarity index 100% rename from src/pages/ZH/docs/grid-template-columns.mdx rename to src/pages/zhs/docs/grid-template-columns.mdx diff --git a/src/pages/ZH/docs/grid-template-rows.mdx b/src/pages/zhs/docs/grid-template-rows.mdx similarity index 100% rename from src/pages/ZH/docs/grid-template-rows.mdx rename to src/pages/zhs/docs/grid-template-rows.mdx diff --git a/src/pages/ZH/docs/guides/create-react-app.js b/src/pages/zhs/docs/guides/create-react-app.js similarity index 100% rename from src/pages/ZH/docs/guides/create-react-app.js rename to src/pages/zhs/docs/guides/create-react-app.js diff --git a/src/pages/ZH/docs/guides/gatsby.js b/src/pages/zhs/docs/guides/gatsby.js similarity index 100% rename from src/pages/ZH/docs/guides/gatsby.js rename to src/pages/zhs/docs/guides/gatsby.js diff --git a/src/pages/ZH/docs/guides/laravel.js b/src/pages/zhs/docs/guides/laravel.js similarity index 100% rename from src/pages/ZH/docs/guides/laravel.js rename to src/pages/zhs/docs/guides/laravel.js diff --git a/src/pages/ZH/docs/guides/nextjs.js b/src/pages/zhs/docs/guides/nextjs.js similarity index 100% rename from src/pages/ZH/docs/guides/nextjs.js rename to src/pages/zhs/docs/guides/nextjs.js diff --git a/src/pages/ZH/docs/guides/nuxtjs.js b/src/pages/zhs/docs/guides/nuxtjs.js similarity index 100% rename from src/pages/ZH/docs/guides/nuxtjs.js rename to src/pages/zhs/docs/guides/nuxtjs.js diff --git a/src/pages/ZH/docs/guides/vite.js b/src/pages/zhs/docs/guides/vite.js similarity index 100% rename from src/pages/ZH/docs/guides/vite.js rename to src/pages/zhs/docs/guides/vite.js diff --git a/src/pages/ZH/docs/height.mdx b/src/pages/zhs/docs/height.mdx similarity index 100% rename from src/pages/ZH/docs/height.mdx rename to src/pages/zhs/docs/height.mdx diff --git a/src/pages/ZH/docs/hover-focus-and-other-states.mdx b/src/pages/zhs/docs/hover-focus-and-other-states.mdx similarity index 100% rename from src/pages/ZH/docs/hover-focus-and-other-states.mdx rename to src/pages/zhs/docs/hover-focus-and-other-states.mdx diff --git a/src/pages/ZH/docs/hue-rotate.mdx b/src/pages/zhs/docs/hue-rotate.mdx similarity index 100% rename from src/pages/ZH/docs/hue-rotate.mdx rename to src/pages/zhs/docs/hue-rotate.mdx diff --git a/src/pages/ZH/docs/installation/framework-guides.js b/src/pages/zhs/docs/installation/framework-guides.js similarity index 100% rename from src/pages/ZH/docs/installation/framework-guides.js rename to src/pages/zhs/docs/installation/framework-guides.js diff --git a/src/pages/ZH/docs/installation/index.js b/src/pages/zhs/docs/installation/index.js similarity index 100% rename from src/pages/ZH/docs/installation/index.js rename to src/pages/zhs/docs/installation/index.js diff --git a/src/pages/ZH/docs/installation/play-cdn.js b/src/pages/zhs/docs/installation/play-cdn.js similarity index 100% rename from src/pages/ZH/docs/installation/play-cdn.js rename to src/pages/zhs/docs/installation/play-cdn.js diff --git a/src/pages/ZH/docs/installation/using-postcss.js b/src/pages/zhs/docs/installation/using-postcss.js similarity index 100% rename from src/pages/ZH/docs/installation/using-postcss.js rename to src/pages/zhs/docs/installation/using-postcss.js diff --git a/src/pages/ZH/docs/invert.mdx b/src/pages/zhs/docs/invert.mdx similarity index 100% rename from src/pages/ZH/docs/invert.mdx rename to src/pages/zhs/docs/invert.mdx diff --git a/src/pages/ZH/docs/isolation.mdx b/src/pages/zhs/docs/isolation.mdx similarity index 100% rename from src/pages/ZH/docs/isolation.mdx rename to src/pages/zhs/docs/isolation.mdx diff --git a/src/pages/ZH/docs/justify-content.mdx b/src/pages/zhs/docs/justify-content.mdx similarity index 100% rename from src/pages/ZH/docs/justify-content.mdx rename to src/pages/zhs/docs/justify-content.mdx diff --git a/src/pages/ZH/docs/justify-items.mdx b/src/pages/zhs/docs/justify-items.mdx similarity index 100% rename from src/pages/ZH/docs/justify-items.mdx rename to src/pages/zhs/docs/justify-items.mdx diff --git a/src/pages/ZH/docs/justify-self.mdx b/src/pages/zhs/docs/justify-self.mdx similarity index 100% rename from src/pages/ZH/docs/justify-self.mdx rename to src/pages/zhs/docs/justify-self.mdx diff --git a/src/pages/ZH/docs/letter-spacing.mdx b/src/pages/zhs/docs/letter-spacing.mdx similarity index 100% rename from src/pages/ZH/docs/letter-spacing.mdx rename to src/pages/zhs/docs/letter-spacing.mdx diff --git a/src/pages/ZH/docs/line-height.mdx b/src/pages/zhs/docs/line-height.mdx similarity index 100% rename from src/pages/ZH/docs/line-height.mdx rename to src/pages/zhs/docs/line-height.mdx diff --git a/src/pages/ZH/docs/list-style-position.mdx b/src/pages/zhs/docs/list-style-position.mdx similarity index 100% rename from src/pages/ZH/docs/list-style-position.mdx rename to src/pages/zhs/docs/list-style-position.mdx diff --git a/src/pages/ZH/docs/list-style-type.mdx b/src/pages/zhs/docs/list-style-type.mdx similarity index 100% rename from src/pages/ZH/docs/list-style-type.mdx rename to src/pages/zhs/docs/list-style-type.mdx diff --git a/src/pages/ZH/docs/margin.mdx b/src/pages/zhs/docs/margin.mdx similarity index 100% rename from src/pages/ZH/docs/margin.mdx rename to src/pages/zhs/docs/margin.mdx diff --git a/src/pages/ZH/docs/max-height.mdx b/src/pages/zhs/docs/max-height.mdx similarity index 100% rename from src/pages/ZH/docs/max-height.mdx rename to src/pages/zhs/docs/max-height.mdx diff --git a/src/pages/ZH/docs/max-width.mdx b/src/pages/zhs/docs/max-width.mdx similarity index 100% rename from src/pages/ZH/docs/max-width.mdx rename to src/pages/zhs/docs/max-width.mdx diff --git a/src/pages/ZH/docs/min-height.mdx b/src/pages/zhs/docs/min-height.mdx similarity index 100% rename from src/pages/ZH/docs/min-height.mdx rename to src/pages/zhs/docs/min-height.mdx diff --git a/src/pages/ZH/docs/min-width.mdx b/src/pages/zhs/docs/min-width.mdx similarity index 100% rename from src/pages/ZH/docs/min-width.mdx rename to src/pages/zhs/docs/min-width.mdx diff --git a/src/pages/ZH/docs/mix-blend-mode.mdx b/src/pages/zhs/docs/mix-blend-mode.mdx similarity index 100% rename from src/pages/ZH/docs/mix-blend-mode.mdx rename to src/pages/zhs/docs/mix-blend-mode.mdx diff --git a/src/pages/ZH/docs/object-fit.mdx b/src/pages/zhs/docs/object-fit.mdx similarity index 100% rename from src/pages/ZH/docs/object-fit.mdx rename to src/pages/zhs/docs/object-fit.mdx diff --git a/src/pages/ZH/docs/object-position.mdx b/src/pages/zhs/docs/object-position.mdx similarity index 100% rename from src/pages/ZH/docs/object-position.mdx rename to src/pages/zhs/docs/object-position.mdx diff --git a/src/pages/ZH/docs/opacity.mdx b/src/pages/zhs/docs/opacity.mdx similarity index 100% rename from src/pages/ZH/docs/opacity.mdx rename to src/pages/zhs/docs/opacity.mdx diff --git a/src/pages/ZH/docs/optimizing-for-production.mdx b/src/pages/zhs/docs/optimizing-for-production.mdx similarity index 100% rename from src/pages/ZH/docs/optimizing-for-production.mdx rename to src/pages/zhs/docs/optimizing-for-production.mdx diff --git a/src/pages/ZH/docs/order.mdx b/src/pages/zhs/docs/order.mdx similarity index 100% rename from src/pages/ZH/docs/order.mdx rename to src/pages/zhs/docs/order.mdx diff --git a/src/pages/ZH/docs/outline-color.mdx b/src/pages/zhs/docs/outline-color.mdx similarity index 100% rename from src/pages/ZH/docs/outline-color.mdx rename to src/pages/zhs/docs/outline-color.mdx diff --git a/src/pages/ZH/docs/outline-offset.mdx b/src/pages/zhs/docs/outline-offset.mdx similarity index 100% rename from src/pages/ZH/docs/outline-offset.mdx rename to src/pages/zhs/docs/outline-offset.mdx diff --git a/src/pages/ZH/docs/outline-style.mdx b/src/pages/zhs/docs/outline-style.mdx similarity index 100% rename from src/pages/ZH/docs/outline-style.mdx rename to src/pages/zhs/docs/outline-style.mdx diff --git a/src/pages/ZH/docs/outline-width.mdx b/src/pages/zhs/docs/outline-width.mdx similarity index 100% rename from src/pages/ZH/docs/outline-width.mdx rename to src/pages/zhs/docs/outline-width.mdx diff --git a/src/pages/ZH/docs/overflow.mdx b/src/pages/zhs/docs/overflow.mdx similarity index 100% rename from src/pages/ZH/docs/overflow.mdx rename to src/pages/zhs/docs/overflow.mdx diff --git a/src/pages/ZH/docs/overscroll-behavior.mdx b/src/pages/zhs/docs/overscroll-behavior.mdx similarity index 100% rename from src/pages/ZH/docs/overscroll-behavior.mdx rename to src/pages/zhs/docs/overscroll-behavior.mdx diff --git a/src/pages/ZH/docs/padding.mdx b/src/pages/zhs/docs/padding.mdx similarity index 100% rename from src/pages/ZH/docs/padding.mdx rename to src/pages/zhs/docs/padding.mdx diff --git a/src/pages/ZH/docs/place-content.mdx b/src/pages/zhs/docs/place-content.mdx similarity index 100% rename from src/pages/ZH/docs/place-content.mdx rename to src/pages/zhs/docs/place-content.mdx diff --git a/src/pages/ZH/docs/place-items.mdx b/src/pages/zhs/docs/place-items.mdx similarity index 100% rename from src/pages/ZH/docs/place-items.mdx rename to src/pages/zhs/docs/place-items.mdx diff --git a/src/pages/ZH/docs/place-self.mdx b/src/pages/zhs/docs/place-self.mdx similarity index 100% rename from src/pages/ZH/docs/place-self.mdx rename to src/pages/zhs/docs/place-self.mdx diff --git a/src/pages/ZH/docs/play-cdn.mdx b/src/pages/zhs/docs/play-cdn.mdx similarity index 100% rename from src/pages/ZH/docs/play-cdn.mdx rename to src/pages/zhs/docs/play-cdn.mdx diff --git a/src/pages/ZH/docs/plugins.mdx b/src/pages/zhs/docs/plugins.mdx similarity index 100% rename from src/pages/ZH/docs/plugins.mdx rename to src/pages/zhs/docs/plugins.mdx diff --git a/src/pages/ZH/docs/pointer-events.mdx b/src/pages/zhs/docs/pointer-events.mdx similarity index 100% rename from src/pages/ZH/docs/pointer-events.mdx rename to src/pages/zhs/docs/pointer-events.mdx diff --git a/src/pages/ZH/docs/position.mdx b/src/pages/zhs/docs/position.mdx similarity index 100% rename from src/pages/ZH/docs/position.mdx rename to src/pages/zhs/docs/position.mdx diff --git a/src/pages/ZH/docs/preflight.mdx b/src/pages/zhs/docs/preflight.mdx similarity index 100% rename from src/pages/ZH/docs/preflight.mdx rename to src/pages/zhs/docs/preflight.mdx diff --git a/src/pages/ZH/docs/presets.mdx b/src/pages/zhs/docs/presets.mdx similarity index 100% rename from src/pages/ZH/docs/presets.mdx rename to src/pages/zhs/docs/presets.mdx diff --git a/src/pages/ZH/docs/resize.mdx b/src/pages/zhs/docs/resize.mdx similarity index 100% rename from src/pages/ZH/docs/resize.mdx rename to src/pages/zhs/docs/resize.mdx diff --git a/src/pages/ZH/docs/responsive-design.mdx b/src/pages/zhs/docs/responsive-design.mdx similarity index 100% rename from src/pages/ZH/docs/responsive-design.mdx rename to src/pages/zhs/docs/responsive-design.mdx diff --git a/src/pages/ZH/docs/reusing-styles.mdx b/src/pages/zhs/docs/reusing-styles.mdx similarity index 100% rename from src/pages/ZH/docs/reusing-styles.mdx rename to src/pages/zhs/docs/reusing-styles.mdx diff --git a/src/pages/ZH/docs/ring-color.mdx b/src/pages/zhs/docs/ring-color.mdx similarity index 100% rename from src/pages/ZH/docs/ring-color.mdx rename to src/pages/zhs/docs/ring-color.mdx diff --git a/src/pages/ZH/docs/ring-offset-color.mdx b/src/pages/zhs/docs/ring-offset-color.mdx similarity index 100% rename from src/pages/ZH/docs/ring-offset-color.mdx rename to src/pages/zhs/docs/ring-offset-color.mdx diff --git a/src/pages/ZH/docs/ring-offset-width.mdx b/src/pages/zhs/docs/ring-offset-width.mdx similarity index 100% rename from src/pages/ZH/docs/ring-offset-width.mdx rename to src/pages/zhs/docs/ring-offset-width.mdx diff --git a/src/pages/ZH/docs/ring-width.mdx b/src/pages/zhs/docs/ring-width.mdx similarity index 100% rename from src/pages/ZH/docs/ring-width.mdx rename to src/pages/zhs/docs/ring-width.mdx diff --git a/src/pages/ZH/docs/rotate.mdx b/src/pages/zhs/docs/rotate.mdx similarity index 100% rename from src/pages/ZH/docs/rotate.mdx rename to src/pages/zhs/docs/rotate.mdx diff --git a/src/pages/ZH/docs/saturate.mdx b/src/pages/zhs/docs/saturate.mdx similarity index 100% rename from src/pages/ZH/docs/saturate.mdx rename to src/pages/zhs/docs/saturate.mdx diff --git a/src/pages/ZH/docs/scale.mdx b/src/pages/zhs/docs/scale.mdx similarity index 100% rename from src/pages/ZH/docs/scale.mdx rename to src/pages/zhs/docs/scale.mdx diff --git a/src/pages/ZH/docs/screen-readers.mdx b/src/pages/zhs/docs/screen-readers.mdx similarity index 100% rename from src/pages/ZH/docs/screen-readers.mdx rename to src/pages/zhs/docs/screen-readers.mdx diff --git a/src/pages/ZH/docs/screens.mdx b/src/pages/zhs/docs/screens.mdx similarity index 100% rename from src/pages/ZH/docs/screens.mdx rename to src/pages/zhs/docs/screens.mdx diff --git a/src/pages/ZH/docs/scroll-behavior.mdx b/src/pages/zhs/docs/scroll-behavior.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-behavior.mdx rename to src/pages/zhs/docs/scroll-behavior.mdx diff --git a/src/pages/ZH/docs/scroll-margin.mdx b/src/pages/zhs/docs/scroll-margin.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-margin.mdx rename to src/pages/zhs/docs/scroll-margin.mdx diff --git a/src/pages/ZH/docs/scroll-padding.mdx b/src/pages/zhs/docs/scroll-padding.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-padding.mdx rename to src/pages/zhs/docs/scroll-padding.mdx diff --git a/src/pages/ZH/docs/scroll-snap-align.mdx b/src/pages/zhs/docs/scroll-snap-align.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-align.mdx rename to src/pages/zhs/docs/scroll-snap-align.mdx diff --git a/src/pages/ZH/docs/scroll-snap-stop.mdx b/src/pages/zhs/docs/scroll-snap-stop.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-stop.mdx rename to src/pages/zhs/docs/scroll-snap-stop.mdx diff --git a/src/pages/ZH/docs/scroll-snap-type.mdx b/src/pages/zhs/docs/scroll-snap-type.mdx similarity index 100% rename from src/pages/ZH/docs/scroll-snap-type.mdx rename to src/pages/zhs/docs/scroll-snap-type.mdx diff --git a/src/pages/ZH/docs/sepia.mdx b/src/pages/zhs/docs/sepia.mdx similarity index 100% rename from src/pages/ZH/docs/sepia.mdx rename to src/pages/zhs/docs/sepia.mdx diff --git a/src/pages/ZH/docs/skew.mdx b/src/pages/zhs/docs/skew.mdx similarity index 100% rename from src/pages/ZH/docs/skew.mdx rename to src/pages/zhs/docs/skew.mdx diff --git a/src/pages/ZH/docs/space.mdx b/src/pages/zhs/docs/space.mdx similarity index 100% rename from src/pages/ZH/docs/space.mdx rename to src/pages/zhs/docs/space.mdx diff --git a/src/pages/ZH/docs/stroke-width.mdx b/src/pages/zhs/docs/stroke-width.mdx similarity index 100% rename from src/pages/ZH/docs/stroke-width.mdx rename to src/pages/zhs/docs/stroke-width.mdx diff --git a/src/pages/ZH/docs/stroke.mdx b/src/pages/zhs/docs/stroke.mdx similarity index 100% rename from src/pages/ZH/docs/stroke.mdx rename to src/pages/zhs/docs/stroke.mdx diff --git a/src/pages/ZH/docs/table-layout.mdx b/src/pages/zhs/docs/table-layout.mdx similarity index 100% rename from src/pages/ZH/docs/table-layout.mdx rename to src/pages/zhs/docs/table-layout.mdx diff --git a/src/pages/ZH/docs/tailwind-cli.mdx b/src/pages/zhs/docs/tailwind-cli.mdx similarity index 100% rename from src/pages/ZH/docs/tailwind-cli.mdx rename to src/pages/zhs/docs/tailwind-cli.mdx diff --git a/src/pages/ZH/docs/text-align.mdx b/src/pages/zhs/docs/text-align.mdx similarity index 100% rename from src/pages/ZH/docs/text-align.mdx rename to src/pages/zhs/docs/text-align.mdx diff --git a/src/pages/ZH/docs/text-color.mdx b/src/pages/zhs/docs/text-color.mdx similarity index 100% rename from src/pages/ZH/docs/text-color.mdx rename to src/pages/zhs/docs/text-color.mdx diff --git a/src/pages/ZH/docs/text-decoration-color.mdx b/src/pages/zhs/docs/text-decoration-color.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-color.mdx rename to src/pages/zhs/docs/text-decoration-color.mdx diff --git a/src/pages/ZH/docs/text-decoration-style.mdx b/src/pages/zhs/docs/text-decoration-style.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-style.mdx rename to src/pages/zhs/docs/text-decoration-style.mdx diff --git a/src/pages/ZH/docs/text-decoration-thickness.mdx b/src/pages/zhs/docs/text-decoration-thickness.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration-thickness.mdx rename to src/pages/zhs/docs/text-decoration-thickness.mdx diff --git a/src/pages/ZH/docs/text-decoration.mdx b/src/pages/zhs/docs/text-decoration.mdx similarity index 100% rename from src/pages/ZH/docs/text-decoration.mdx rename to src/pages/zhs/docs/text-decoration.mdx diff --git a/src/pages/ZH/docs/text-indent.mdx b/src/pages/zhs/docs/text-indent.mdx similarity index 100% rename from src/pages/ZH/docs/text-indent.mdx rename to src/pages/zhs/docs/text-indent.mdx diff --git a/src/pages/ZH/docs/text-overflow.mdx b/src/pages/zhs/docs/text-overflow.mdx similarity index 100% rename from src/pages/ZH/docs/text-overflow.mdx rename to src/pages/zhs/docs/text-overflow.mdx diff --git a/src/pages/ZH/docs/text-transform.mdx b/src/pages/zhs/docs/text-transform.mdx similarity index 100% rename from src/pages/ZH/docs/text-transform.mdx rename to src/pages/zhs/docs/text-transform.mdx diff --git a/src/pages/ZH/docs/text-underline-offset.mdx b/src/pages/zhs/docs/text-underline-offset.mdx similarity index 100% rename from src/pages/ZH/docs/text-underline-offset.mdx rename to src/pages/zhs/docs/text-underline-offset.mdx diff --git a/src/pages/ZH/docs/theme.mdx b/src/pages/zhs/docs/theme.mdx similarity index 100% rename from src/pages/ZH/docs/theme.mdx rename to src/pages/zhs/docs/theme.mdx diff --git a/src/pages/ZH/docs/top-right-bottom-left.mdx b/src/pages/zhs/docs/top-right-bottom-left.mdx similarity index 100% rename from src/pages/ZH/docs/top-right-bottom-left.mdx rename to src/pages/zhs/docs/top-right-bottom-left.mdx diff --git a/src/pages/ZH/docs/touch-action.mdx b/src/pages/zhs/docs/touch-action.mdx similarity index 100% rename from src/pages/ZH/docs/touch-action.mdx rename to src/pages/zhs/docs/touch-action.mdx diff --git a/src/pages/ZH/docs/transform-origin.mdx b/src/pages/zhs/docs/transform-origin.mdx similarity index 100% rename from src/pages/ZH/docs/transform-origin.mdx rename to src/pages/zhs/docs/transform-origin.mdx diff --git a/src/pages/ZH/docs/transition-delay.mdx b/src/pages/zhs/docs/transition-delay.mdx similarity index 100% rename from src/pages/ZH/docs/transition-delay.mdx rename to src/pages/zhs/docs/transition-delay.mdx diff --git a/src/pages/ZH/docs/transition-duration.mdx b/src/pages/zhs/docs/transition-duration.mdx similarity index 100% rename from src/pages/ZH/docs/transition-duration.mdx rename to src/pages/zhs/docs/transition-duration.mdx diff --git a/src/pages/ZH/docs/transition-property.mdx b/src/pages/zhs/docs/transition-property.mdx similarity index 100% rename from src/pages/ZH/docs/transition-property.mdx rename to src/pages/zhs/docs/transition-property.mdx diff --git a/src/pages/ZH/docs/transition-timing-function.mdx b/src/pages/zhs/docs/transition-timing-function.mdx similarity index 100% rename from src/pages/ZH/docs/transition-timing-function.mdx rename to src/pages/zhs/docs/transition-timing-function.mdx diff --git a/src/pages/ZH/docs/translate.mdx b/src/pages/zhs/docs/translate.mdx similarity index 100% rename from src/pages/ZH/docs/translate.mdx rename to src/pages/zhs/docs/translate.mdx diff --git a/src/pages/ZH/docs/upgrade-guide.mdx b/src/pages/zhs/docs/upgrade-guide.mdx similarity index 100% rename from src/pages/ZH/docs/upgrade-guide.mdx rename to src/pages/zhs/docs/upgrade-guide.mdx diff --git a/src/pages/ZH/docs/user-select.mdx b/src/pages/zhs/docs/user-select.mdx similarity index 100% rename from src/pages/ZH/docs/user-select.mdx rename to src/pages/zhs/docs/user-select.mdx diff --git a/src/pages/ZH/docs/using-with-preprocessors.mdx b/src/pages/zhs/docs/using-with-preprocessors.mdx similarity index 100% rename from src/pages/ZH/docs/using-with-preprocessors.mdx rename to src/pages/zhs/docs/using-with-preprocessors.mdx diff --git a/src/pages/ZH/docs/utility-first.mdx b/src/pages/zhs/docs/utility-first.mdx similarity index 100% rename from src/pages/ZH/docs/utility-first.mdx rename to src/pages/zhs/docs/utility-first.mdx diff --git a/src/pages/ZH/docs/vertical-align.mdx b/src/pages/zhs/docs/vertical-align.mdx similarity index 100% rename from src/pages/ZH/docs/vertical-align.mdx rename to src/pages/zhs/docs/vertical-align.mdx diff --git a/src/pages/ZH/docs/visibility.mdx b/src/pages/zhs/docs/visibility.mdx similarity index 100% rename from src/pages/ZH/docs/visibility.mdx rename to src/pages/zhs/docs/visibility.mdx diff --git a/src/pages/ZH/docs/whitespace.mdx b/src/pages/zhs/docs/whitespace.mdx similarity index 100% rename from src/pages/ZH/docs/whitespace.mdx rename to src/pages/zhs/docs/whitespace.mdx diff --git a/src/pages/ZH/docs/width.mdx b/src/pages/zhs/docs/width.mdx similarity index 100% rename from src/pages/ZH/docs/width.mdx rename to src/pages/zhs/docs/width.mdx diff --git a/src/pages/ZH/docs/will-change.mdx b/src/pages/zhs/docs/will-change.mdx similarity index 100% rename from src/pages/ZH/docs/will-change.mdx rename to src/pages/zhs/docs/will-change.mdx diff --git a/src/pages/ZH/docs/word-break.mdx b/src/pages/zhs/docs/word-break.mdx similarity index 100% rename from src/pages/ZH/docs/word-break.mdx rename to src/pages/zhs/docs/word-break.mdx diff --git a/src/pages/ZH/docs/z-index.mdx b/src/pages/zhs/docs/z-index.mdx similarity index 100% rename from src/pages/ZH/docs/z-index.mdx rename to src/pages/zhs/docs/z-index.mdx From 523977b454340f4d5d6b5947597458326e373fdb Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:34:43 +0800 Subject: [PATCH 38/48] dir name change back --- src/pages/{zhs => zh}/brand.mdx | 0 src/pages/{zhs => zh}/docs/accent-color.mdx | 0 src/pages/{zhs => zh}/docs/adding-base-styles.mdx | 0 src/pages/{zhs => zh}/docs/adding-custom-styles.mdx | 0 src/pages/{zhs => zh}/docs/adding-new-utilities.mdx | 0 src/pages/{zhs => zh}/docs/align-content.mdx | 0 src/pages/{zhs => zh}/docs/align-items.mdx | 0 src/pages/{zhs => zh}/docs/align-self.mdx | 0 src/pages/{zhs => zh}/docs/animation.mdx | 0 src/pages/{zhs => zh}/docs/appearance.mdx | 0 src/pages/{zhs => zh}/docs/aspect-ratio.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-blur.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-brightness.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-contrast.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-grayscale.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-hue-rotate.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-invert.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-opacity.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-saturate.mdx | 0 src/pages/{zhs => zh}/docs/backdrop-sepia.mdx | 0 src/pages/{zhs => zh}/docs/background-attachment.mdx | 0 src/pages/{zhs => zh}/docs/background-blend-mode.mdx | 0 src/pages/{zhs => zh}/docs/background-clip.mdx | 0 src/pages/{zhs => zh}/docs/background-color.mdx | 0 src/pages/{zhs => zh}/docs/background-image.mdx | 0 src/pages/{zhs => zh}/docs/background-origin.mdx | 0 src/pages/{zhs => zh}/docs/background-position.mdx | 0 src/pages/{zhs => zh}/docs/background-repeat.mdx | 0 src/pages/{zhs => zh}/docs/background-size.mdx | 0 src/pages/{zhs => zh}/docs/blur.mdx | 0 src/pages/{zhs => zh}/docs/border-collapse.mdx | 0 src/pages/{zhs => zh}/docs/border-color.mdx | 0 src/pages/{zhs => zh}/docs/border-radius.mdx | 0 src/pages/{zhs => zh}/docs/border-style.mdx | 0 src/pages/{zhs => zh}/docs/border-width.mdx | 0 src/pages/{zhs => zh}/docs/box-decoration-break.mdx | 0 src/pages/{zhs => zh}/docs/box-shadow-color.mdx | 0 src/pages/{zhs => zh}/docs/box-shadow.mdx | 0 src/pages/{zhs => zh}/docs/box-sizing.mdx | 0 src/pages/{zhs => zh}/docs/break-after.mdx | 0 src/pages/{zhs => zh}/docs/break-before.mdx | 0 src/pages/{zhs => zh}/docs/break-inside.mdx | 0 src/pages/{zhs => zh}/docs/brightness.mdx | 0 src/pages/{zhs => zh}/docs/browser-support.mdx | 0 src/pages/{zhs => zh}/docs/caret-color.mdx | 0 src/pages/{zhs => zh}/docs/clear.mdx | 0 src/pages/{zhs => zh}/docs/columns.mdx | 0 src/pages/{zhs => zh}/docs/configuration.mdx | 0 src/pages/{zhs => zh}/docs/container.mdx | 0 src/pages/{zhs => zh}/docs/content-configuration.mdx | 0 src/pages/{zhs => zh}/docs/content.mdx | 0 src/pages/{zhs => zh}/docs/contrast.mdx | 0 src/pages/{zhs => zh}/docs/cursor.mdx | 0 src/pages/{zhs => zh}/docs/customizing-colors.mdx | 0 src/pages/{zhs => zh}/docs/customizing-spacing.mdx | 0 src/pages/{zhs => zh}/docs/dark-mode.mdx | 0 src/pages/{zhs => zh}/docs/display.mdx | 0 src/pages/{zhs => zh}/docs/divide-color.mdx | 0 src/pages/{zhs => zh}/docs/divide-style.mdx | 0 src/pages/{zhs => zh}/docs/divide-width.mdx | 0 src/pages/{zhs => zh}/docs/drop-shadow.mdx | 0 src/pages/{zhs => zh}/docs/editor-setup.mdx | 0 src/pages/{zhs => zh}/docs/fill.mdx | 0 src/pages/{zhs => zh}/docs/flex-basis.mdx | 0 src/pages/{zhs => zh}/docs/flex-direction.mdx | 0 src/pages/{zhs => zh}/docs/flex-grow.mdx | 0 src/pages/{zhs => zh}/docs/flex-shrink.mdx | 0 src/pages/{zhs => zh}/docs/flex-wrap.mdx | 0 src/pages/{zhs => zh}/docs/flex.mdx | 0 src/pages/{zhs => zh}/docs/float.mdx | 0 src/pages/{zhs => zh}/docs/font-family.mdx | 0 src/pages/{zhs => zh}/docs/font-size.mdx | 0 src/pages/{zhs => zh}/docs/font-smoothing.mdx | 0 src/pages/{zhs => zh}/docs/font-style.mdx | 0 src/pages/{zhs => zh}/docs/font-variant-numeric.mdx | 0 src/pages/{zhs => zh}/docs/font-weight.mdx | 0 src/pages/{zhs => zh}/docs/functions-and-directives.mdx | 0 src/pages/{zhs => zh}/docs/gap.mdx | 0 src/pages/{zhs => zh}/docs/gradient-color-stops.mdx | 0 src/pages/{zhs => zh}/docs/grayscale.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-columns.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-flow.mdx | 0 src/pages/{zhs => zh}/docs/grid-auto-rows.mdx | 0 src/pages/{zhs => zh}/docs/grid-column.mdx | 0 src/pages/{zhs => zh}/docs/grid-row.mdx | 0 src/pages/{zhs => zh}/docs/grid-template-columns.mdx | 0 src/pages/{zhs => zh}/docs/grid-template-rows.mdx | 0 src/pages/{zhs => zh}/docs/guides/create-react-app.js | 0 src/pages/{zhs => zh}/docs/guides/gatsby.js | 0 src/pages/{zhs => zh}/docs/guides/laravel.js | 0 src/pages/{zhs => zh}/docs/guides/nextjs.js | 0 src/pages/{zhs => zh}/docs/guides/nuxtjs.js | 0 src/pages/{zhs => zh}/docs/guides/vite.js | 0 src/pages/{zhs => zh}/docs/height.mdx | 0 src/pages/{zhs => zh}/docs/hover-focus-and-other-states.mdx | 0 src/pages/{zhs => zh}/docs/hue-rotate.mdx | 0 src/pages/{zhs => zh}/docs/installation/framework-guides.js | 0 src/pages/{zhs => zh}/docs/installation/index.js | 0 src/pages/{zhs => zh}/docs/installation/play-cdn.js | 0 src/pages/{zhs => zh}/docs/installation/using-postcss.js | 0 src/pages/{zhs => zh}/docs/invert.mdx | 0 src/pages/{zhs => zh}/docs/isolation.mdx | 0 src/pages/{zhs => zh}/docs/justify-content.mdx | 0 src/pages/{zhs => zh}/docs/justify-items.mdx | 0 src/pages/{zhs => zh}/docs/justify-self.mdx | 0 src/pages/{zhs => zh}/docs/letter-spacing.mdx | 0 src/pages/{zhs => zh}/docs/line-height.mdx | 0 src/pages/{zhs => zh}/docs/list-style-position.mdx | 0 src/pages/{zhs => zh}/docs/list-style-type.mdx | 0 src/pages/{zhs => zh}/docs/margin.mdx | 0 src/pages/{zhs => zh}/docs/max-height.mdx | 0 src/pages/{zhs => zh}/docs/max-width.mdx | 0 src/pages/{zhs => zh}/docs/min-height.mdx | 0 src/pages/{zhs => zh}/docs/min-width.mdx | 0 src/pages/{zhs => zh}/docs/mix-blend-mode.mdx | 0 src/pages/{zhs => zh}/docs/object-fit.mdx | 0 src/pages/{zhs => zh}/docs/object-position.mdx | 0 src/pages/{zhs => zh}/docs/opacity.mdx | 0 src/pages/{zhs => zh}/docs/optimizing-for-production.mdx | 0 src/pages/{zhs => zh}/docs/order.mdx | 0 src/pages/{zhs => zh}/docs/outline-color.mdx | 0 src/pages/{zhs => zh}/docs/outline-offset.mdx | 0 src/pages/{zhs => zh}/docs/outline-style.mdx | 0 src/pages/{zhs => zh}/docs/outline-width.mdx | 0 src/pages/{zhs => zh}/docs/overflow.mdx | 0 src/pages/{zhs => zh}/docs/overscroll-behavior.mdx | 0 src/pages/{zhs => zh}/docs/padding.mdx | 0 src/pages/{zhs => zh}/docs/place-content.mdx | 0 src/pages/{zhs => zh}/docs/place-items.mdx | 0 src/pages/{zhs => zh}/docs/place-self.mdx | 0 src/pages/{zhs => zh}/docs/play-cdn.mdx | 0 src/pages/{zhs => zh}/docs/plugins.mdx | 0 src/pages/{zhs => zh}/docs/pointer-events.mdx | 0 src/pages/{zhs => zh}/docs/position.mdx | 0 src/pages/{zhs => zh}/docs/preflight.mdx | 0 src/pages/{zhs => zh}/docs/presets.mdx | 0 src/pages/{zhs => zh}/docs/resize.mdx | 0 src/pages/{zhs => zh}/docs/responsive-design.mdx | 0 src/pages/{zhs => zh}/docs/reusing-styles.mdx | 0 src/pages/{zhs => zh}/docs/ring-color.mdx | 0 src/pages/{zhs => zh}/docs/ring-offset-color.mdx | 0 src/pages/{zhs => zh}/docs/ring-offset-width.mdx | 0 src/pages/{zhs => zh}/docs/ring-width.mdx | 0 src/pages/{zhs => zh}/docs/rotate.mdx | 0 src/pages/{zhs => zh}/docs/saturate.mdx | 0 src/pages/{zhs => zh}/docs/scale.mdx | 0 src/pages/{zhs => zh}/docs/screen-readers.mdx | 0 src/pages/{zhs => zh}/docs/screens.mdx | 0 src/pages/{zhs => zh}/docs/scroll-behavior.mdx | 0 src/pages/{zhs => zh}/docs/scroll-margin.mdx | 0 src/pages/{zhs => zh}/docs/scroll-padding.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-align.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-stop.mdx | 0 src/pages/{zhs => zh}/docs/scroll-snap-type.mdx | 0 src/pages/{zhs => zh}/docs/sepia.mdx | 0 src/pages/{zhs => zh}/docs/skew.mdx | 0 src/pages/{zhs => zh}/docs/space.mdx | 0 src/pages/{zhs => zh}/docs/stroke-width.mdx | 0 src/pages/{zhs => zh}/docs/stroke.mdx | 0 src/pages/{zhs => zh}/docs/table-layout.mdx | 0 src/pages/{zhs => zh}/docs/tailwind-cli.mdx | 0 src/pages/{zhs => zh}/docs/text-align.mdx | 0 src/pages/{zhs => zh}/docs/text-color.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-color.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-style.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration-thickness.mdx | 0 src/pages/{zhs => zh}/docs/text-decoration.mdx | 0 src/pages/{zhs => zh}/docs/text-indent.mdx | 0 src/pages/{zhs => zh}/docs/text-overflow.mdx | 0 src/pages/{zhs => zh}/docs/text-transform.mdx | 0 src/pages/{zhs => zh}/docs/text-underline-offset.mdx | 0 src/pages/{zhs => zh}/docs/theme.mdx | 0 src/pages/{zhs => zh}/docs/top-right-bottom-left.mdx | 0 src/pages/{zhs => zh}/docs/touch-action.mdx | 0 src/pages/{zhs => zh}/docs/transform-origin.mdx | 0 src/pages/{zhs => zh}/docs/transition-delay.mdx | 0 src/pages/{zhs => zh}/docs/transition-duration.mdx | 0 src/pages/{zhs => zh}/docs/transition-property.mdx | 0 src/pages/{zhs => zh}/docs/transition-timing-function.mdx | 0 src/pages/{zhs => zh}/docs/translate.mdx | 0 src/pages/{zhs => zh}/docs/upgrade-guide.mdx | 0 src/pages/{zhs => zh}/docs/user-select.mdx | 0 src/pages/{zhs => zh}/docs/using-with-preprocessors.mdx | 0 src/pages/{zhs => zh}/docs/utility-first.mdx | 0 src/pages/{zhs => zh}/docs/vertical-align.mdx | 0 src/pages/{zhs => zh}/docs/visibility.mdx | 0 src/pages/{zhs => zh}/docs/whitespace.mdx | 0 src/pages/{zhs => zh}/docs/width.mdx | 0 src/pages/{zhs => zh}/docs/will-change.mdx | 0 src/pages/{zhs => zh}/docs/word-break.mdx | 0 src/pages/{zhs => zh}/docs/z-index.mdx | 0 191 files changed, 0 insertions(+), 0 deletions(-) rename src/pages/{zhs => zh}/brand.mdx (100%) rename src/pages/{zhs => zh}/docs/accent-color.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-base-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-custom-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/adding-new-utilities.mdx (100%) rename src/pages/{zhs => zh}/docs/align-content.mdx (100%) rename src/pages/{zhs => zh}/docs/align-items.mdx (100%) rename src/pages/{zhs => zh}/docs/align-self.mdx (100%) rename src/pages/{zhs => zh}/docs/animation.mdx (100%) rename src/pages/{zhs => zh}/docs/appearance.mdx (100%) rename src/pages/{zhs => zh}/docs/aspect-ratio.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-blur.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-brightness.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-contrast.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-grayscale.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-hue-rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-invert.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-opacity.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-saturate.mdx (100%) rename src/pages/{zhs => zh}/docs/backdrop-sepia.mdx (100%) rename src/pages/{zhs => zh}/docs/background-attachment.mdx (100%) rename src/pages/{zhs => zh}/docs/background-blend-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/background-clip.mdx (100%) rename src/pages/{zhs => zh}/docs/background-color.mdx (100%) rename src/pages/{zhs => zh}/docs/background-image.mdx (100%) rename src/pages/{zhs => zh}/docs/background-origin.mdx (100%) rename src/pages/{zhs => zh}/docs/background-position.mdx (100%) rename src/pages/{zhs => zh}/docs/background-repeat.mdx (100%) rename src/pages/{zhs => zh}/docs/background-size.mdx (100%) rename src/pages/{zhs => zh}/docs/blur.mdx (100%) rename src/pages/{zhs => zh}/docs/border-collapse.mdx (100%) rename src/pages/{zhs => zh}/docs/border-color.mdx (100%) rename src/pages/{zhs => zh}/docs/border-radius.mdx (100%) rename src/pages/{zhs => zh}/docs/border-style.mdx (100%) rename src/pages/{zhs => zh}/docs/border-width.mdx (100%) rename src/pages/{zhs => zh}/docs/box-decoration-break.mdx (100%) rename src/pages/{zhs => zh}/docs/box-shadow-color.mdx (100%) rename src/pages/{zhs => zh}/docs/box-shadow.mdx (100%) rename src/pages/{zhs => zh}/docs/box-sizing.mdx (100%) rename src/pages/{zhs => zh}/docs/break-after.mdx (100%) rename src/pages/{zhs => zh}/docs/break-before.mdx (100%) rename src/pages/{zhs => zh}/docs/break-inside.mdx (100%) rename src/pages/{zhs => zh}/docs/brightness.mdx (100%) rename src/pages/{zhs => zh}/docs/browser-support.mdx (100%) rename src/pages/{zhs => zh}/docs/caret-color.mdx (100%) rename src/pages/{zhs => zh}/docs/clear.mdx (100%) rename src/pages/{zhs => zh}/docs/columns.mdx (100%) rename src/pages/{zhs => zh}/docs/configuration.mdx (100%) rename src/pages/{zhs => zh}/docs/container.mdx (100%) rename src/pages/{zhs => zh}/docs/content-configuration.mdx (100%) rename src/pages/{zhs => zh}/docs/content.mdx (100%) rename src/pages/{zhs => zh}/docs/contrast.mdx (100%) rename src/pages/{zhs => zh}/docs/cursor.mdx (100%) rename src/pages/{zhs => zh}/docs/customizing-colors.mdx (100%) rename src/pages/{zhs => zh}/docs/customizing-spacing.mdx (100%) rename src/pages/{zhs => zh}/docs/dark-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/display.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-color.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-style.mdx (100%) rename src/pages/{zhs => zh}/docs/divide-width.mdx (100%) rename src/pages/{zhs => zh}/docs/drop-shadow.mdx (100%) rename src/pages/{zhs => zh}/docs/editor-setup.mdx (100%) rename src/pages/{zhs => zh}/docs/fill.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-basis.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-direction.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-grow.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-shrink.mdx (100%) rename src/pages/{zhs => zh}/docs/flex-wrap.mdx (100%) rename src/pages/{zhs => zh}/docs/flex.mdx (100%) rename src/pages/{zhs => zh}/docs/float.mdx (100%) rename src/pages/{zhs => zh}/docs/font-family.mdx (100%) rename src/pages/{zhs => zh}/docs/font-size.mdx (100%) rename src/pages/{zhs => zh}/docs/font-smoothing.mdx (100%) rename src/pages/{zhs => zh}/docs/font-style.mdx (100%) rename src/pages/{zhs => zh}/docs/font-variant-numeric.mdx (100%) rename src/pages/{zhs => zh}/docs/font-weight.mdx (100%) rename src/pages/{zhs => zh}/docs/functions-and-directives.mdx (100%) rename src/pages/{zhs => zh}/docs/gap.mdx (100%) rename src/pages/{zhs => zh}/docs/gradient-color-stops.mdx (100%) rename src/pages/{zhs => zh}/docs/grayscale.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-columns.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-flow.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-auto-rows.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-column.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-row.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-template-columns.mdx (100%) rename src/pages/{zhs => zh}/docs/grid-template-rows.mdx (100%) rename src/pages/{zhs => zh}/docs/guides/create-react-app.js (100%) rename src/pages/{zhs => zh}/docs/guides/gatsby.js (100%) rename src/pages/{zhs => zh}/docs/guides/laravel.js (100%) rename src/pages/{zhs => zh}/docs/guides/nextjs.js (100%) rename src/pages/{zhs => zh}/docs/guides/nuxtjs.js (100%) rename src/pages/{zhs => zh}/docs/guides/vite.js (100%) rename src/pages/{zhs => zh}/docs/height.mdx (100%) rename src/pages/{zhs => zh}/docs/hover-focus-and-other-states.mdx (100%) rename src/pages/{zhs => zh}/docs/hue-rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/installation/framework-guides.js (100%) rename src/pages/{zhs => zh}/docs/installation/index.js (100%) rename src/pages/{zhs => zh}/docs/installation/play-cdn.js (100%) rename src/pages/{zhs => zh}/docs/installation/using-postcss.js (100%) rename src/pages/{zhs => zh}/docs/invert.mdx (100%) rename src/pages/{zhs => zh}/docs/isolation.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-content.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-items.mdx (100%) rename src/pages/{zhs => zh}/docs/justify-self.mdx (100%) rename src/pages/{zhs => zh}/docs/letter-spacing.mdx (100%) rename src/pages/{zhs => zh}/docs/line-height.mdx (100%) rename src/pages/{zhs => zh}/docs/list-style-position.mdx (100%) rename src/pages/{zhs => zh}/docs/list-style-type.mdx (100%) rename src/pages/{zhs => zh}/docs/margin.mdx (100%) rename src/pages/{zhs => zh}/docs/max-height.mdx (100%) rename src/pages/{zhs => zh}/docs/max-width.mdx (100%) rename src/pages/{zhs => zh}/docs/min-height.mdx (100%) rename src/pages/{zhs => zh}/docs/min-width.mdx (100%) rename src/pages/{zhs => zh}/docs/mix-blend-mode.mdx (100%) rename src/pages/{zhs => zh}/docs/object-fit.mdx (100%) rename src/pages/{zhs => zh}/docs/object-position.mdx (100%) rename src/pages/{zhs => zh}/docs/opacity.mdx (100%) rename src/pages/{zhs => zh}/docs/optimizing-for-production.mdx (100%) rename src/pages/{zhs => zh}/docs/order.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-color.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-offset.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-style.mdx (100%) rename src/pages/{zhs => zh}/docs/outline-width.mdx (100%) rename src/pages/{zhs => zh}/docs/overflow.mdx (100%) rename src/pages/{zhs => zh}/docs/overscroll-behavior.mdx (100%) rename src/pages/{zhs => zh}/docs/padding.mdx (100%) rename src/pages/{zhs => zh}/docs/place-content.mdx (100%) rename src/pages/{zhs => zh}/docs/place-items.mdx (100%) rename src/pages/{zhs => zh}/docs/place-self.mdx (100%) rename src/pages/{zhs => zh}/docs/play-cdn.mdx (100%) rename src/pages/{zhs => zh}/docs/plugins.mdx (100%) rename src/pages/{zhs => zh}/docs/pointer-events.mdx (100%) rename src/pages/{zhs => zh}/docs/position.mdx (100%) rename src/pages/{zhs => zh}/docs/preflight.mdx (100%) rename src/pages/{zhs => zh}/docs/presets.mdx (100%) rename src/pages/{zhs => zh}/docs/resize.mdx (100%) rename src/pages/{zhs => zh}/docs/responsive-design.mdx (100%) rename src/pages/{zhs => zh}/docs/reusing-styles.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-color.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-offset-color.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-offset-width.mdx (100%) rename src/pages/{zhs => zh}/docs/ring-width.mdx (100%) rename src/pages/{zhs => zh}/docs/rotate.mdx (100%) rename src/pages/{zhs => zh}/docs/saturate.mdx (100%) rename src/pages/{zhs => zh}/docs/scale.mdx (100%) rename src/pages/{zhs => zh}/docs/screen-readers.mdx (100%) rename src/pages/{zhs => zh}/docs/screens.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-behavior.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-margin.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-padding.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-align.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-stop.mdx (100%) rename src/pages/{zhs => zh}/docs/scroll-snap-type.mdx (100%) rename src/pages/{zhs => zh}/docs/sepia.mdx (100%) rename src/pages/{zhs => zh}/docs/skew.mdx (100%) rename src/pages/{zhs => zh}/docs/space.mdx (100%) rename src/pages/{zhs => zh}/docs/stroke-width.mdx (100%) rename src/pages/{zhs => zh}/docs/stroke.mdx (100%) rename src/pages/{zhs => zh}/docs/table-layout.mdx (100%) rename src/pages/{zhs => zh}/docs/tailwind-cli.mdx (100%) rename src/pages/{zhs => zh}/docs/text-align.mdx (100%) rename src/pages/{zhs => zh}/docs/text-color.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-color.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-style.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration-thickness.mdx (100%) rename src/pages/{zhs => zh}/docs/text-decoration.mdx (100%) rename src/pages/{zhs => zh}/docs/text-indent.mdx (100%) rename src/pages/{zhs => zh}/docs/text-overflow.mdx (100%) rename src/pages/{zhs => zh}/docs/text-transform.mdx (100%) rename src/pages/{zhs => zh}/docs/text-underline-offset.mdx (100%) rename src/pages/{zhs => zh}/docs/theme.mdx (100%) rename src/pages/{zhs => zh}/docs/top-right-bottom-left.mdx (100%) rename src/pages/{zhs => zh}/docs/touch-action.mdx (100%) rename src/pages/{zhs => zh}/docs/transform-origin.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-delay.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-duration.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-property.mdx (100%) rename src/pages/{zhs => zh}/docs/transition-timing-function.mdx (100%) rename src/pages/{zhs => zh}/docs/translate.mdx (100%) rename src/pages/{zhs => zh}/docs/upgrade-guide.mdx (100%) rename src/pages/{zhs => zh}/docs/user-select.mdx (100%) rename src/pages/{zhs => zh}/docs/using-with-preprocessors.mdx (100%) rename src/pages/{zhs => zh}/docs/utility-first.mdx (100%) rename src/pages/{zhs => zh}/docs/vertical-align.mdx (100%) rename src/pages/{zhs => zh}/docs/visibility.mdx (100%) rename src/pages/{zhs => zh}/docs/whitespace.mdx (100%) rename src/pages/{zhs => zh}/docs/width.mdx (100%) rename src/pages/{zhs => zh}/docs/will-change.mdx (100%) rename src/pages/{zhs => zh}/docs/word-break.mdx (100%) rename src/pages/{zhs => zh}/docs/z-index.mdx (100%) diff --git a/src/pages/zhs/brand.mdx b/src/pages/zh/brand.mdx similarity index 100% rename from src/pages/zhs/brand.mdx rename to src/pages/zh/brand.mdx diff --git a/src/pages/zhs/docs/accent-color.mdx b/src/pages/zh/docs/accent-color.mdx similarity index 100% rename from src/pages/zhs/docs/accent-color.mdx rename to src/pages/zh/docs/accent-color.mdx diff --git a/src/pages/zhs/docs/adding-base-styles.mdx b/src/pages/zh/docs/adding-base-styles.mdx similarity index 100% rename from src/pages/zhs/docs/adding-base-styles.mdx rename to src/pages/zh/docs/adding-base-styles.mdx diff --git a/src/pages/zhs/docs/adding-custom-styles.mdx b/src/pages/zh/docs/adding-custom-styles.mdx similarity index 100% rename from src/pages/zhs/docs/adding-custom-styles.mdx rename to src/pages/zh/docs/adding-custom-styles.mdx diff --git a/src/pages/zhs/docs/adding-new-utilities.mdx b/src/pages/zh/docs/adding-new-utilities.mdx similarity index 100% rename from src/pages/zhs/docs/adding-new-utilities.mdx rename to src/pages/zh/docs/adding-new-utilities.mdx diff --git a/src/pages/zhs/docs/align-content.mdx b/src/pages/zh/docs/align-content.mdx similarity index 100% rename from src/pages/zhs/docs/align-content.mdx rename to src/pages/zh/docs/align-content.mdx diff --git a/src/pages/zhs/docs/align-items.mdx b/src/pages/zh/docs/align-items.mdx similarity index 100% rename from src/pages/zhs/docs/align-items.mdx rename to src/pages/zh/docs/align-items.mdx diff --git a/src/pages/zhs/docs/align-self.mdx b/src/pages/zh/docs/align-self.mdx similarity index 100% rename from src/pages/zhs/docs/align-self.mdx rename to src/pages/zh/docs/align-self.mdx diff --git a/src/pages/zhs/docs/animation.mdx b/src/pages/zh/docs/animation.mdx similarity index 100% rename from src/pages/zhs/docs/animation.mdx rename to src/pages/zh/docs/animation.mdx diff --git a/src/pages/zhs/docs/appearance.mdx b/src/pages/zh/docs/appearance.mdx similarity index 100% rename from src/pages/zhs/docs/appearance.mdx rename to src/pages/zh/docs/appearance.mdx diff --git a/src/pages/zhs/docs/aspect-ratio.mdx b/src/pages/zh/docs/aspect-ratio.mdx similarity index 100% rename from src/pages/zhs/docs/aspect-ratio.mdx rename to src/pages/zh/docs/aspect-ratio.mdx diff --git a/src/pages/zhs/docs/backdrop-blur.mdx b/src/pages/zh/docs/backdrop-blur.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-blur.mdx rename to src/pages/zh/docs/backdrop-blur.mdx diff --git a/src/pages/zhs/docs/backdrop-brightness.mdx b/src/pages/zh/docs/backdrop-brightness.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-brightness.mdx rename to src/pages/zh/docs/backdrop-brightness.mdx diff --git a/src/pages/zhs/docs/backdrop-contrast.mdx b/src/pages/zh/docs/backdrop-contrast.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-contrast.mdx rename to src/pages/zh/docs/backdrop-contrast.mdx diff --git a/src/pages/zhs/docs/backdrop-grayscale.mdx b/src/pages/zh/docs/backdrop-grayscale.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-grayscale.mdx rename to src/pages/zh/docs/backdrop-grayscale.mdx diff --git a/src/pages/zhs/docs/backdrop-hue-rotate.mdx b/src/pages/zh/docs/backdrop-hue-rotate.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-hue-rotate.mdx rename to src/pages/zh/docs/backdrop-hue-rotate.mdx diff --git a/src/pages/zhs/docs/backdrop-invert.mdx b/src/pages/zh/docs/backdrop-invert.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-invert.mdx rename to src/pages/zh/docs/backdrop-invert.mdx diff --git a/src/pages/zhs/docs/backdrop-opacity.mdx b/src/pages/zh/docs/backdrop-opacity.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-opacity.mdx rename to src/pages/zh/docs/backdrop-opacity.mdx diff --git a/src/pages/zhs/docs/backdrop-saturate.mdx b/src/pages/zh/docs/backdrop-saturate.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-saturate.mdx rename to src/pages/zh/docs/backdrop-saturate.mdx diff --git a/src/pages/zhs/docs/backdrop-sepia.mdx b/src/pages/zh/docs/backdrop-sepia.mdx similarity index 100% rename from src/pages/zhs/docs/backdrop-sepia.mdx rename to src/pages/zh/docs/backdrop-sepia.mdx diff --git a/src/pages/zhs/docs/background-attachment.mdx b/src/pages/zh/docs/background-attachment.mdx similarity index 100% rename from src/pages/zhs/docs/background-attachment.mdx rename to src/pages/zh/docs/background-attachment.mdx diff --git a/src/pages/zhs/docs/background-blend-mode.mdx b/src/pages/zh/docs/background-blend-mode.mdx similarity index 100% rename from src/pages/zhs/docs/background-blend-mode.mdx rename to src/pages/zh/docs/background-blend-mode.mdx diff --git a/src/pages/zhs/docs/background-clip.mdx b/src/pages/zh/docs/background-clip.mdx similarity index 100% rename from src/pages/zhs/docs/background-clip.mdx rename to src/pages/zh/docs/background-clip.mdx diff --git a/src/pages/zhs/docs/background-color.mdx b/src/pages/zh/docs/background-color.mdx similarity index 100% rename from src/pages/zhs/docs/background-color.mdx rename to src/pages/zh/docs/background-color.mdx diff --git a/src/pages/zhs/docs/background-image.mdx b/src/pages/zh/docs/background-image.mdx similarity index 100% rename from src/pages/zhs/docs/background-image.mdx rename to src/pages/zh/docs/background-image.mdx diff --git a/src/pages/zhs/docs/background-origin.mdx b/src/pages/zh/docs/background-origin.mdx similarity index 100% rename from src/pages/zhs/docs/background-origin.mdx rename to src/pages/zh/docs/background-origin.mdx diff --git a/src/pages/zhs/docs/background-position.mdx b/src/pages/zh/docs/background-position.mdx similarity index 100% rename from src/pages/zhs/docs/background-position.mdx rename to src/pages/zh/docs/background-position.mdx diff --git a/src/pages/zhs/docs/background-repeat.mdx b/src/pages/zh/docs/background-repeat.mdx similarity index 100% rename from src/pages/zhs/docs/background-repeat.mdx rename to src/pages/zh/docs/background-repeat.mdx diff --git a/src/pages/zhs/docs/background-size.mdx b/src/pages/zh/docs/background-size.mdx similarity index 100% rename from src/pages/zhs/docs/background-size.mdx rename to src/pages/zh/docs/background-size.mdx diff --git a/src/pages/zhs/docs/blur.mdx b/src/pages/zh/docs/blur.mdx similarity index 100% rename from src/pages/zhs/docs/blur.mdx rename to src/pages/zh/docs/blur.mdx diff --git a/src/pages/zhs/docs/border-collapse.mdx b/src/pages/zh/docs/border-collapse.mdx similarity index 100% rename from src/pages/zhs/docs/border-collapse.mdx rename to src/pages/zh/docs/border-collapse.mdx diff --git a/src/pages/zhs/docs/border-color.mdx b/src/pages/zh/docs/border-color.mdx similarity index 100% rename from src/pages/zhs/docs/border-color.mdx rename to src/pages/zh/docs/border-color.mdx diff --git a/src/pages/zhs/docs/border-radius.mdx b/src/pages/zh/docs/border-radius.mdx similarity index 100% rename from src/pages/zhs/docs/border-radius.mdx rename to src/pages/zh/docs/border-radius.mdx diff --git a/src/pages/zhs/docs/border-style.mdx b/src/pages/zh/docs/border-style.mdx similarity index 100% rename from src/pages/zhs/docs/border-style.mdx rename to src/pages/zh/docs/border-style.mdx diff --git a/src/pages/zhs/docs/border-width.mdx b/src/pages/zh/docs/border-width.mdx similarity index 100% rename from src/pages/zhs/docs/border-width.mdx rename to src/pages/zh/docs/border-width.mdx diff --git a/src/pages/zhs/docs/box-decoration-break.mdx b/src/pages/zh/docs/box-decoration-break.mdx similarity index 100% rename from src/pages/zhs/docs/box-decoration-break.mdx rename to src/pages/zh/docs/box-decoration-break.mdx diff --git a/src/pages/zhs/docs/box-shadow-color.mdx b/src/pages/zh/docs/box-shadow-color.mdx similarity index 100% rename from src/pages/zhs/docs/box-shadow-color.mdx rename to src/pages/zh/docs/box-shadow-color.mdx diff --git a/src/pages/zhs/docs/box-shadow.mdx b/src/pages/zh/docs/box-shadow.mdx similarity index 100% rename from src/pages/zhs/docs/box-shadow.mdx rename to src/pages/zh/docs/box-shadow.mdx diff --git a/src/pages/zhs/docs/box-sizing.mdx b/src/pages/zh/docs/box-sizing.mdx similarity index 100% rename from src/pages/zhs/docs/box-sizing.mdx rename to src/pages/zh/docs/box-sizing.mdx diff --git a/src/pages/zhs/docs/break-after.mdx b/src/pages/zh/docs/break-after.mdx similarity index 100% rename from src/pages/zhs/docs/break-after.mdx rename to src/pages/zh/docs/break-after.mdx diff --git a/src/pages/zhs/docs/break-before.mdx b/src/pages/zh/docs/break-before.mdx similarity index 100% rename from src/pages/zhs/docs/break-before.mdx rename to src/pages/zh/docs/break-before.mdx diff --git a/src/pages/zhs/docs/break-inside.mdx b/src/pages/zh/docs/break-inside.mdx similarity index 100% rename from src/pages/zhs/docs/break-inside.mdx rename to src/pages/zh/docs/break-inside.mdx diff --git a/src/pages/zhs/docs/brightness.mdx b/src/pages/zh/docs/brightness.mdx similarity index 100% rename from src/pages/zhs/docs/brightness.mdx rename to src/pages/zh/docs/brightness.mdx diff --git a/src/pages/zhs/docs/browser-support.mdx b/src/pages/zh/docs/browser-support.mdx similarity index 100% rename from src/pages/zhs/docs/browser-support.mdx rename to src/pages/zh/docs/browser-support.mdx diff --git a/src/pages/zhs/docs/caret-color.mdx b/src/pages/zh/docs/caret-color.mdx similarity index 100% rename from src/pages/zhs/docs/caret-color.mdx rename to src/pages/zh/docs/caret-color.mdx diff --git a/src/pages/zhs/docs/clear.mdx b/src/pages/zh/docs/clear.mdx similarity index 100% rename from src/pages/zhs/docs/clear.mdx rename to src/pages/zh/docs/clear.mdx diff --git a/src/pages/zhs/docs/columns.mdx b/src/pages/zh/docs/columns.mdx similarity index 100% rename from src/pages/zhs/docs/columns.mdx rename to src/pages/zh/docs/columns.mdx diff --git a/src/pages/zhs/docs/configuration.mdx b/src/pages/zh/docs/configuration.mdx similarity index 100% rename from src/pages/zhs/docs/configuration.mdx rename to src/pages/zh/docs/configuration.mdx diff --git a/src/pages/zhs/docs/container.mdx b/src/pages/zh/docs/container.mdx similarity index 100% rename from src/pages/zhs/docs/container.mdx rename to src/pages/zh/docs/container.mdx diff --git a/src/pages/zhs/docs/content-configuration.mdx b/src/pages/zh/docs/content-configuration.mdx similarity index 100% rename from src/pages/zhs/docs/content-configuration.mdx rename to src/pages/zh/docs/content-configuration.mdx diff --git a/src/pages/zhs/docs/content.mdx b/src/pages/zh/docs/content.mdx similarity index 100% rename from src/pages/zhs/docs/content.mdx rename to src/pages/zh/docs/content.mdx diff --git a/src/pages/zhs/docs/contrast.mdx b/src/pages/zh/docs/contrast.mdx similarity index 100% rename from src/pages/zhs/docs/contrast.mdx rename to src/pages/zh/docs/contrast.mdx diff --git a/src/pages/zhs/docs/cursor.mdx b/src/pages/zh/docs/cursor.mdx similarity index 100% rename from src/pages/zhs/docs/cursor.mdx rename to src/pages/zh/docs/cursor.mdx diff --git a/src/pages/zhs/docs/customizing-colors.mdx b/src/pages/zh/docs/customizing-colors.mdx similarity index 100% rename from src/pages/zhs/docs/customizing-colors.mdx rename to src/pages/zh/docs/customizing-colors.mdx diff --git a/src/pages/zhs/docs/customizing-spacing.mdx b/src/pages/zh/docs/customizing-spacing.mdx similarity index 100% rename from src/pages/zhs/docs/customizing-spacing.mdx rename to src/pages/zh/docs/customizing-spacing.mdx diff --git a/src/pages/zhs/docs/dark-mode.mdx b/src/pages/zh/docs/dark-mode.mdx similarity index 100% rename from src/pages/zhs/docs/dark-mode.mdx rename to src/pages/zh/docs/dark-mode.mdx diff --git a/src/pages/zhs/docs/display.mdx b/src/pages/zh/docs/display.mdx similarity index 100% rename from src/pages/zhs/docs/display.mdx rename to src/pages/zh/docs/display.mdx diff --git a/src/pages/zhs/docs/divide-color.mdx b/src/pages/zh/docs/divide-color.mdx similarity index 100% rename from src/pages/zhs/docs/divide-color.mdx rename to src/pages/zh/docs/divide-color.mdx diff --git a/src/pages/zhs/docs/divide-style.mdx b/src/pages/zh/docs/divide-style.mdx similarity index 100% rename from src/pages/zhs/docs/divide-style.mdx rename to src/pages/zh/docs/divide-style.mdx diff --git a/src/pages/zhs/docs/divide-width.mdx b/src/pages/zh/docs/divide-width.mdx similarity index 100% rename from src/pages/zhs/docs/divide-width.mdx rename to src/pages/zh/docs/divide-width.mdx diff --git a/src/pages/zhs/docs/drop-shadow.mdx b/src/pages/zh/docs/drop-shadow.mdx similarity index 100% rename from src/pages/zhs/docs/drop-shadow.mdx rename to src/pages/zh/docs/drop-shadow.mdx diff --git a/src/pages/zhs/docs/editor-setup.mdx b/src/pages/zh/docs/editor-setup.mdx similarity index 100% rename from src/pages/zhs/docs/editor-setup.mdx rename to src/pages/zh/docs/editor-setup.mdx diff --git a/src/pages/zhs/docs/fill.mdx b/src/pages/zh/docs/fill.mdx similarity index 100% rename from src/pages/zhs/docs/fill.mdx rename to src/pages/zh/docs/fill.mdx diff --git a/src/pages/zhs/docs/flex-basis.mdx b/src/pages/zh/docs/flex-basis.mdx similarity index 100% rename from src/pages/zhs/docs/flex-basis.mdx rename to src/pages/zh/docs/flex-basis.mdx diff --git a/src/pages/zhs/docs/flex-direction.mdx b/src/pages/zh/docs/flex-direction.mdx similarity index 100% rename from src/pages/zhs/docs/flex-direction.mdx rename to src/pages/zh/docs/flex-direction.mdx diff --git a/src/pages/zhs/docs/flex-grow.mdx b/src/pages/zh/docs/flex-grow.mdx similarity index 100% rename from src/pages/zhs/docs/flex-grow.mdx rename to src/pages/zh/docs/flex-grow.mdx diff --git a/src/pages/zhs/docs/flex-shrink.mdx b/src/pages/zh/docs/flex-shrink.mdx similarity index 100% rename from src/pages/zhs/docs/flex-shrink.mdx rename to src/pages/zh/docs/flex-shrink.mdx diff --git a/src/pages/zhs/docs/flex-wrap.mdx b/src/pages/zh/docs/flex-wrap.mdx similarity index 100% rename from src/pages/zhs/docs/flex-wrap.mdx rename to src/pages/zh/docs/flex-wrap.mdx diff --git a/src/pages/zhs/docs/flex.mdx b/src/pages/zh/docs/flex.mdx similarity index 100% rename from src/pages/zhs/docs/flex.mdx rename to src/pages/zh/docs/flex.mdx diff --git a/src/pages/zhs/docs/float.mdx b/src/pages/zh/docs/float.mdx similarity index 100% rename from src/pages/zhs/docs/float.mdx rename to src/pages/zh/docs/float.mdx diff --git a/src/pages/zhs/docs/font-family.mdx b/src/pages/zh/docs/font-family.mdx similarity index 100% rename from src/pages/zhs/docs/font-family.mdx rename to src/pages/zh/docs/font-family.mdx diff --git a/src/pages/zhs/docs/font-size.mdx b/src/pages/zh/docs/font-size.mdx similarity index 100% rename from src/pages/zhs/docs/font-size.mdx rename to src/pages/zh/docs/font-size.mdx diff --git a/src/pages/zhs/docs/font-smoothing.mdx b/src/pages/zh/docs/font-smoothing.mdx similarity index 100% rename from src/pages/zhs/docs/font-smoothing.mdx rename to src/pages/zh/docs/font-smoothing.mdx diff --git a/src/pages/zhs/docs/font-style.mdx b/src/pages/zh/docs/font-style.mdx similarity index 100% rename from src/pages/zhs/docs/font-style.mdx rename to src/pages/zh/docs/font-style.mdx diff --git a/src/pages/zhs/docs/font-variant-numeric.mdx b/src/pages/zh/docs/font-variant-numeric.mdx similarity index 100% rename from src/pages/zhs/docs/font-variant-numeric.mdx rename to src/pages/zh/docs/font-variant-numeric.mdx diff --git a/src/pages/zhs/docs/font-weight.mdx b/src/pages/zh/docs/font-weight.mdx similarity index 100% rename from src/pages/zhs/docs/font-weight.mdx rename to src/pages/zh/docs/font-weight.mdx diff --git a/src/pages/zhs/docs/functions-and-directives.mdx b/src/pages/zh/docs/functions-and-directives.mdx similarity index 100% rename from src/pages/zhs/docs/functions-and-directives.mdx rename to src/pages/zh/docs/functions-and-directives.mdx diff --git a/src/pages/zhs/docs/gap.mdx b/src/pages/zh/docs/gap.mdx similarity index 100% rename from src/pages/zhs/docs/gap.mdx rename to src/pages/zh/docs/gap.mdx diff --git a/src/pages/zhs/docs/gradient-color-stops.mdx b/src/pages/zh/docs/gradient-color-stops.mdx similarity index 100% rename from src/pages/zhs/docs/gradient-color-stops.mdx rename to src/pages/zh/docs/gradient-color-stops.mdx diff --git a/src/pages/zhs/docs/grayscale.mdx b/src/pages/zh/docs/grayscale.mdx similarity index 100% rename from src/pages/zhs/docs/grayscale.mdx rename to src/pages/zh/docs/grayscale.mdx diff --git a/src/pages/zhs/docs/grid-auto-columns.mdx b/src/pages/zh/docs/grid-auto-columns.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-columns.mdx rename to src/pages/zh/docs/grid-auto-columns.mdx diff --git a/src/pages/zhs/docs/grid-auto-flow.mdx b/src/pages/zh/docs/grid-auto-flow.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-flow.mdx rename to src/pages/zh/docs/grid-auto-flow.mdx diff --git a/src/pages/zhs/docs/grid-auto-rows.mdx b/src/pages/zh/docs/grid-auto-rows.mdx similarity index 100% rename from src/pages/zhs/docs/grid-auto-rows.mdx rename to src/pages/zh/docs/grid-auto-rows.mdx diff --git a/src/pages/zhs/docs/grid-column.mdx b/src/pages/zh/docs/grid-column.mdx similarity index 100% rename from src/pages/zhs/docs/grid-column.mdx rename to src/pages/zh/docs/grid-column.mdx diff --git a/src/pages/zhs/docs/grid-row.mdx b/src/pages/zh/docs/grid-row.mdx similarity index 100% rename from src/pages/zhs/docs/grid-row.mdx rename to src/pages/zh/docs/grid-row.mdx diff --git a/src/pages/zhs/docs/grid-template-columns.mdx b/src/pages/zh/docs/grid-template-columns.mdx similarity index 100% rename from src/pages/zhs/docs/grid-template-columns.mdx rename to src/pages/zh/docs/grid-template-columns.mdx diff --git a/src/pages/zhs/docs/grid-template-rows.mdx b/src/pages/zh/docs/grid-template-rows.mdx similarity index 100% rename from src/pages/zhs/docs/grid-template-rows.mdx rename to src/pages/zh/docs/grid-template-rows.mdx diff --git a/src/pages/zhs/docs/guides/create-react-app.js b/src/pages/zh/docs/guides/create-react-app.js similarity index 100% rename from src/pages/zhs/docs/guides/create-react-app.js rename to src/pages/zh/docs/guides/create-react-app.js diff --git a/src/pages/zhs/docs/guides/gatsby.js b/src/pages/zh/docs/guides/gatsby.js similarity index 100% rename from src/pages/zhs/docs/guides/gatsby.js rename to src/pages/zh/docs/guides/gatsby.js diff --git a/src/pages/zhs/docs/guides/laravel.js b/src/pages/zh/docs/guides/laravel.js similarity index 100% rename from src/pages/zhs/docs/guides/laravel.js rename to src/pages/zh/docs/guides/laravel.js diff --git a/src/pages/zhs/docs/guides/nextjs.js b/src/pages/zh/docs/guides/nextjs.js similarity index 100% rename from src/pages/zhs/docs/guides/nextjs.js rename to src/pages/zh/docs/guides/nextjs.js diff --git a/src/pages/zhs/docs/guides/nuxtjs.js b/src/pages/zh/docs/guides/nuxtjs.js similarity index 100% rename from src/pages/zhs/docs/guides/nuxtjs.js rename to src/pages/zh/docs/guides/nuxtjs.js diff --git a/src/pages/zhs/docs/guides/vite.js b/src/pages/zh/docs/guides/vite.js similarity index 100% rename from src/pages/zhs/docs/guides/vite.js rename to src/pages/zh/docs/guides/vite.js diff --git a/src/pages/zhs/docs/height.mdx b/src/pages/zh/docs/height.mdx similarity index 100% rename from src/pages/zhs/docs/height.mdx rename to src/pages/zh/docs/height.mdx diff --git a/src/pages/zhs/docs/hover-focus-and-other-states.mdx b/src/pages/zh/docs/hover-focus-and-other-states.mdx similarity index 100% rename from src/pages/zhs/docs/hover-focus-and-other-states.mdx rename to src/pages/zh/docs/hover-focus-and-other-states.mdx diff --git a/src/pages/zhs/docs/hue-rotate.mdx b/src/pages/zh/docs/hue-rotate.mdx similarity index 100% rename from src/pages/zhs/docs/hue-rotate.mdx rename to src/pages/zh/docs/hue-rotate.mdx diff --git a/src/pages/zhs/docs/installation/framework-guides.js b/src/pages/zh/docs/installation/framework-guides.js similarity index 100% rename from src/pages/zhs/docs/installation/framework-guides.js rename to src/pages/zh/docs/installation/framework-guides.js diff --git a/src/pages/zhs/docs/installation/index.js b/src/pages/zh/docs/installation/index.js similarity index 100% rename from src/pages/zhs/docs/installation/index.js rename to src/pages/zh/docs/installation/index.js diff --git a/src/pages/zhs/docs/installation/play-cdn.js b/src/pages/zh/docs/installation/play-cdn.js similarity index 100% rename from src/pages/zhs/docs/installation/play-cdn.js rename to src/pages/zh/docs/installation/play-cdn.js diff --git a/src/pages/zhs/docs/installation/using-postcss.js b/src/pages/zh/docs/installation/using-postcss.js similarity index 100% rename from src/pages/zhs/docs/installation/using-postcss.js rename to src/pages/zh/docs/installation/using-postcss.js diff --git a/src/pages/zhs/docs/invert.mdx b/src/pages/zh/docs/invert.mdx similarity index 100% rename from src/pages/zhs/docs/invert.mdx rename to src/pages/zh/docs/invert.mdx diff --git a/src/pages/zhs/docs/isolation.mdx b/src/pages/zh/docs/isolation.mdx similarity index 100% rename from src/pages/zhs/docs/isolation.mdx rename to src/pages/zh/docs/isolation.mdx diff --git a/src/pages/zhs/docs/justify-content.mdx b/src/pages/zh/docs/justify-content.mdx similarity index 100% rename from src/pages/zhs/docs/justify-content.mdx rename to src/pages/zh/docs/justify-content.mdx diff --git a/src/pages/zhs/docs/justify-items.mdx b/src/pages/zh/docs/justify-items.mdx similarity index 100% rename from src/pages/zhs/docs/justify-items.mdx rename to src/pages/zh/docs/justify-items.mdx diff --git a/src/pages/zhs/docs/justify-self.mdx b/src/pages/zh/docs/justify-self.mdx similarity index 100% rename from src/pages/zhs/docs/justify-self.mdx rename to src/pages/zh/docs/justify-self.mdx diff --git a/src/pages/zhs/docs/letter-spacing.mdx b/src/pages/zh/docs/letter-spacing.mdx similarity index 100% rename from src/pages/zhs/docs/letter-spacing.mdx rename to src/pages/zh/docs/letter-spacing.mdx diff --git a/src/pages/zhs/docs/line-height.mdx b/src/pages/zh/docs/line-height.mdx similarity index 100% rename from src/pages/zhs/docs/line-height.mdx rename to src/pages/zh/docs/line-height.mdx diff --git a/src/pages/zhs/docs/list-style-position.mdx b/src/pages/zh/docs/list-style-position.mdx similarity index 100% rename from src/pages/zhs/docs/list-style-position.mdx rename to src/pages/zh/docs/list-style-position.mdx diff --git a/src/pages/zhs/docs/list-style-type.mdx b/src/pages/zh/docs/list-style-type.mdx similarity index 100% rename from src/pages/zhs/docs/list-style-type.mdx rename to src/pages/zh/docs/list-style-type.mdx diff --git a/src/pages/zhs/docs/margin.mdx b/src/pages/zh/docs/margin.mdx similarity index 100% rename from src/pages/zhs/docs/margin.mdx rename to src/pages/zh/docs/margin.mdx diff --git a/src/pages/zhs/docs/max-height.mdx b/src/pages/zh/docs/max-height.mdx similarity index 100% rename from src/pages/zhs/docs/max-height.mdx rename to src/pages/zh/docs/max-height.mdx diff --git a/src/pages/zhs/docs/max-width.mdx b/src/pages/zh/docs/max-width.mdx similarity index 100% rename from src/pages/zhs/docs/max-width.mdx rename to src/pages/zh/docs/max-width.mdx diff --git a/src/pages/zhs/docs/min-height.mdx b/src/pages/zh/docs/min-height.mdx similarity index 100% rename from src/pages/zhs/docs/min-height.mdx rename to src/pages/zh/docs/min-height.mdx diff --git a/src/pages/zhs/docs/min-width.mdx b/src/pages/zh/docs/min-width.mdx similarity index 100% rename from src/pages/zhs/docs/min-width.mdx rename to src/pages/zh/docs/min-width.mdx diff --git a/src/pages/zhs/docs/mix-blend-mode.mdx b/src/pages/zh/docs/mix-blend-mode.mdx similarity index 100% rename from src/pages/zhs/docs/mix-blend-mode.mdx rename to src/pages/zh/docs/mix-blend-mode.mdx diff --git a/src/pages/zhs/docs/object-fit.mdx b/src/pages/zh/docs/object-fit.mdx similarity index 100% rename from src/pages/zhs/docs/object-fit.mdx rename to src/pages/zh/docs/object-fit.mdx diff --git a/src/pages/zhs/docs/object-position.mdx b/src/pages/zh/docs/object-position.mdx similarity index 100% rename from src/pages/zhs/docs/object-position.mdx rename to src/pages/zh/docs/object-position.mdx diff --git a/src/pages/zhs/docs/opacity.mdx b/src/pages/zh/docs/opacity.mdx similarity index 100% rename from src/pages/zhs/docs/opacity.mdx rename to src/pages/zh/docs/opacity.mdx diff --git a/src/pages/zhs/docs/optimizing-for-production.mdx b/src/pages/zh/docs/optimizing-for-production.mdx similarity index 100% rename from src/pages/zhs/docs/optimizing-for-production.mdx rename to src/pages/zh/docs/optimizing-for-production.mdx diff --git a/src/pages/zhs/docs/order.mdx b/src/pages/zh/docs/order.mdx similarity index 100% rename from src/pages/zhs/docs/order.mdx rename to src/pages/zh/docs/order.mdx diff --git a/src/pages/zhs/docs/outline-color.mdx b/src/pages/zh/docs/outline-color.mdx similarity index 100% rename from src/pages/zhs/docs/outline-color.mdx rename to src/pages/zh/docs/outline-color.mdx diff --git a/src/pages/zhs/docs/outline-offset.mdx b/src/pages/zh/docs/outline-offset.mdx similarity index 100% rename from src/pages/zhs/docs/outline-offset.mdx rename to src/pages/zh/docs/outline-offset.mdx diff --git a/src/pages/zhs/docs/outline-style.mdx b/src/pages/zh/docs/outline-style.mdx similarity index 100% rename from src/pages/zhs/docs/outline-style.mdx rename to src/pages/zh/docs/outline-style.mdx diff --git a/src/pages/zhs/docs/outline-width.mdx b/src/pages/zh/docs/outline-width.mdx similarity index 100% rename from src/pages/zhs/docs/outline-width.mdx rename to src/pages/zh/docs/outline-width.mdx diff --git a/src/pages/zhs/docs/overflow.mdx b/src/pages/zh/docs/overflow.mdx similarity index 100% rename from src/pages/zhs/docs/overflow.mdx rename to src/pages/zh/docs/overflow.mdx diff --git a/src/pages/zhs/docs/overscroll-behavior.mdx b/src/pages/zh/docs/overscroll-behavior.mdx similarity index 100% rename from src/pages/zhs/docs/overscroll-behavior.mdx rename to src/pages/zh/docs/overscroll-behavior.mdx diff --git a/src/pages/zhs/docs/padding.mdx b/src/pages/zh/docs/padding.mdx similarity index 100% rename from src/pages/zhs/docs/padding.mdx rename to src/pages/zh/docs/padding.mdx diff --git a/src/pages/zhs/docs/place-content.mdx b/src/pages/zh/docs/place-content.mdx similarity index 100% rename from src/pages/zhs/docs/place-content.mdx rename to src/pages/zh/docs/place-content.mdx diff --git a/src/pages/zhs/docs/place-items.mdx b/src/pages/zh/docs/place-items.mdx similarity index 100% rename from src/pages/zhs/docs/place-items.mdx rename to src/pages/zh/docs/place-items.mdx diff --git a/src/pages/zhs/docs/place-self.mdx b/src/pages/zh/docs/place-self.mdx similarity index 100% rename from src/pages/zhs/docs/place-self.mdx rename to src/pages/zh/docs/place-self.mdx diff --git a/src/pages/zhs/docs/play-cdn.mdx b/src/pages/zh/docs/play-cdn.mdx similarity index 100% rename from src/pages/zhs/docs/play-cdn.mdx rename to src/pages/zh/docs/play-cdn.mdx diff --git a/src/pages/zhs/docs/plugins.mdx b/src/pages/zh/docs/plugins.mdx similarity index 100% rename from src/pages/zhs/docs/plugins.mdx rename to src/pages/zh/docs/plugins.mdx diff --git a/src/pages/zhs/docs/pointer-events.mdx b/src/pages/zh/docs/pointer-events.mdx similarity index 100% rename from src/pages/zhs/docs/pointer-events.mdx rename to src/pages/zh/docs/pointer-events.mdx diff --git a/src/pages/zhs/docs/position.mdx b/src/pages/zh/docs/position.mdx similarity index 100% rename from src/pages/zhs/docs/position.mdx rename to src/pages/zh/docs/position.mdx diff --git a/src/pages/zhs/docs/preflight.mdx b/src/pages/zh/docs/preflight.mdx similarity index 100% rename from src/pages/zhs/docs/preflight.mdx rename to src/pages/zh/docs/preflight.mdx diff --git a/src/pages/zhs/docs/presets.mdx b/src/pages/zh/docs/presets.mdx similarity index 100% rename from src/pages/zhs/docs/presets.mdx rename to src/pages/zh/docs/presets.mdx diff --git a/src/pages/zhs/docs/resize.mdx b/src/pages/zh/docs/resize.mdx similarity index 100% rename from src/pages/zhs/docs/resize.mdx rename to src/pages/zh/docs/resize.mdx diff --git a/src/pages/zhs/docs/responsive-design.mdx b/src/pages/zh/docs/responsive-design.mdx similarity index 100% rename from src/pages/zhs/docs/responsive-design.mdx rename to src/pages/zh/docs/responsive-design.mdx diff --git a/src/pages/zhs/docs/reusing-styles.mdx b/src/pages/zh/docs/reusing-styles.mdx similarity index 100% rename from src/pages/zhs/docs/reusing-styles.mdx rename to src/pages/zh/docs/reusing-styles.mdx diff --git a/src/pages/zhs/docs/ring-color.mdx b/src/pages/zh/docs/ring-color.mdx similarity index 100% rename from src/pages/zhs/docs/ring-color.mdx rename to src/pages/zh/docs/ring-color.mdx diff --git a/src/pages/zhs/docs/ring-offset-color.mdx b/src/pages/zh/docs/ring-offset-color.mdx similarity index 100% rename from src/pages/zhs/docs/ring-offset-color.mdx rename to src/pages/zh/docs/ring-offset-color.mdx diff --git a/src/pages/zhs/docs/ring-offset-width.mdx b/src/pages/zh/docs/ring-offset-width.mdx similarity index 100% rename from src/pages/zhs/docs/ring-offset-width.mdx rename to src/pages/zh/docs/ring-offset-width.mdx diff --git a/src/pages/zhs/docs/ring-width.mdx b/src/pages/zh/docs/ring-width.mdx similarity index 100% rename from src/pages/zhs/docs/ring-width.mdx rename to src/pages/zh/docs/ring-width.mdx diff --git a/src/pages/zhs/docs/rotate.mdx b/src/pages/zh/docs/rotate.mdx similarity index 100% rename from src/pages/zhs/docs/rotate.mdx rename to src/pages/zh/docs/rotate.mdx diff --git a/src/pages/zhs/docs/saturate.mdx b/src/pages/zh/docs/saturate.mdx similarity index 100% rename from src/pages/zhs/docs/saturate.mdx rename to src/pages/zh/docs/saturate.mdx diff --git a/src/pages/zhs/docs/scale.mdx b/src/pages/zh/docs/scale.mdx similarity index 100% rename from src/pages/zhs/docs/scale.mdx rename to src/pages/zh/docs/scale.mdx diff --git a/src/pages/zhs/docs/screen-readers.mdx b/src/pages/zh/docs/screen-readers.mdx similarity index 100% rename from src/pages/zhs/docs/screen-readers.mdx rename to src/pages/zh/docs/screen-readers.mdx diff --git a/src/pages/zhs/docs/screens.mdx b/src/pages/zh/docs/screens.mdx similarity index 100% rename from src/pages/zhs/docs/screens.mdx rename to src/pages/zh/docs/screens.mdx diff --git a/src/pages/zhs/docs/scroll-behavior.mdx b/src/pages/zh/docs/scroll-behavior.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-behavior.mdx rename to src/pages/zh/docs/scroll-behavior.mdx diff --git a/src/pages/zhs/docs/scroll-margin.mdx b/src/pages/zh/docs/scroll-margin.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-margin.mdx rename to src/pages/zh/docs/scroll-margin.mdx diff --git a/src/pages/zhs/docs/scroll-padding.mdx b/src/pages/zh/docs/scroll-padding.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-padding.mdx rename to src/pages/zh/docs/scroll-padding.mdx diff --git a/src/pages/zhs/docs/scroll-snap-align.mdx b/src/pages/zh/docs/scroll-snap-align.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-align.mdx rename to src/pages/zh/docs/scroll-snap-align.mdx diff --git a/src/pages/zhs/docs/scroll-snap-stop.mdx b/src/pages/zh/docs/scroll-snap-stop.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-stop.mdx rename to src/pages/zh/docs/scroll-snap-stop.mdx diff --git a/src/pages/zhs/docs/scroll-snap-type.mdx b/src/pages/zh/docs/scroll-snap-type.mdx similarity index 100% rename from src/pages/zhs/docs/scroll-snap-type.mdx rename to src/pages/zh/docs/scroll-snap-type.mdx diff --git a/src/pages/zhs/docs/sepia.mdx b/src/pages/zh/docs/sepia.mdx similarity index 100% rename from src/pages/zhs/docs/sepia.mdx rename to src/pages/zh/docs/sepia.mdx diff --git a/src/pages/zhs/docs/skew.mdx b/src/pages/zh/docs/skew.mdx similarity index 100% rename from src/pages/zhs/docs/skew.mdx rename to src/pages/zh/docs/skew.mdx diff --git a/src/pages/zhs/docs/space.mdx b/src/pages/zh/docs/space.mdx similarity index 100% rename from src/pages/zhs/docs/space.mdx rename to src/pages/zh/docs/space.mdx diff --git a/src/pages/zhs/docs/stroke-width.mdx b/src/pages/zh/docs/stroke-width.mdx similarity index 100% rename from src/pages/zhs/docs/stroke-width.mdx rename to src/pages/zh/docs/stroke-width.mdx diff --git a/src/pages/zhs/docs/stroke.mdx b/src/pages/zh/docs/stroke.mdx similarity index 100% rename from src/pages/zhs/docs/stroke.mdx rename to src/pages/zh/docs/stroke.mdx diff --git a/src/pages/zhs/docs/table-layout.mdx b/src/pages/zh/docs/table-layout.mdx similarity index 100% rename from src/pages/zhs/docs/table-layout.mdx rename to src/pages/zh/docs/table-layout.mdx diff --git a/src/pages/zhs/docs/tailwind-cli.mdx b/src/pages/zh/docs/tailwind-cli.mdx similarity index 100% rename from src/pages/zhs/docs/tailwind-cli.mdx rename to src/pages/zh/docs/tailwind-cli.mdx diff --git a/src/pages/zhs/docs/text-align.mdx b/src/pages/zh/docs/text-align.mdx similarity index 100% rename from src/pages/zhs/docs/text-align.mdx rename to src/pages/zh/docs/text-align.mdx diff --git a/src/pages/zhs/docs/text-color.mdx b/src/pages/zh/docs/text-color.mdx similarity index 100% rename from src/pages/zhs/docs/text-color.mdx rename to src/pages/zh/docs/text-color.mdx diff --git a/src/pages/zhs/docs/text-decoration-color.mdx b/src/pages/zh/docs/text-decoration-color.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-color.mdx rename to src/pages/zh/docs/text-decoration-color.mdx diff --git a/src/pages/zhs/docs/text-decoration-style.mdx b/src/pages/zh/docs/text-decoration-style.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-style.mdx rename to src/pages/zh/docs/text-decoration-style.mdx diff --git a/src/pages/zhs/docs/text-decoration-thickness.mdx b/src/pages/zh/docs/text-decoration-thickness.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration-thickness.mdx rename to src/pages/zh/docs/text-decoration-thickness.mdx diff --git a/src/pages/zhs/docs/text-decoration.mdx b/src/pages/zh/docs/text-decoration.mdx similarity index 100% rename from src/pages/zhs/docs/text-decoration.mdx rename to src/pages/zh/docs/text-decoration.mdx diff --git a/src/pages/zhs/docs/text-indent.mdx b/src/pages/zh/docs/text-indent.mdx similarity index 100% rename from src/pages/zhs/docs/text-indent.mdx rename to src/pages/zh/docs/text-indent.mdx diff --git a/src/pages/zhs/docs/text-overflow.mdx b/src/pages/zh/docs/text-overflow.mdx similarity index 100% rename from src/pages/zhs/docs/text-overflow.mdx rename to src/pages/zh/docs/text-overflow.mdx diff --git a/src/pages/zhs/docs/text-transform.mdx b/src/pages/zh/docs/text-transform.mdx similarity index 100% rename from src/pages/zhs/docs/text-transform.mdx rename to src/pages/zh/docs/text-transform.mdx diff --git a/src/pages/zhs/docs/text-underline-offset.mdx b/src/pages/zh/docs/text-underline-offset.mdx similarity index 100% rename from src/pages/zhs/docs/text-underline-offset.mdx rename to src/pages/zh/docs/text-underline-offset.mdx diff --git a/src/pages/zhs/docs/theme.mdx b/src/pages/zh/docs/theme.mdx similarity index 100% rename from src/pages/zhs/docs/theme.mdx rename to src/pages/zh/docs/theme.mdx diff --git a/src/pages/zhs/docs/top-right-bottom-left.mdx b/src/pages/zh/docs/top-right-bottom-left.mdx similarity index 100% rename from src/pages/zhs/docs/top-right-bottom-left.mdx rename to src/pages/zh/docs/top-right-bottom-left.mdx diff --git a/src/pages/zhs/docs/touch-action.mdx b/src/pages/zh/docs/touch-action.mdx similarity index 100% rename from src/pages/zhs/docs/touch-action.mdx rename to src/pages/zh/docs/touch-action.mdx diff --git a/src/pages/zhs/docs/transform-origin.mdx b/src/pages/zh/docs/transform-origin.mdx similarity index 100% rename from src/pages/zhs/docs/transform-origin.mdx rename to src/pages/zh/docs/transform-origin.mdx diff --git a/src/pages/zhs/docs/transition-delay.mdx b/src/pages/zh/docs/transition-delay.mdx similarity index 100% rename from src/pages/zhs/docs/transition-delay.mdx rename to src/pages/zh/docs/transition-delay.mdx diff --git a/src/pages/zhs/docs/transition-duration.mdx b/src/pages/zh/docs/transition-duration.mdx similarity index 100% rename from src/pages/zhs/docs/transition-duration.mdx rename to src/pages/zh/docs/transition-duration.mdx diff --git a/src/pages/zhs/docs/transition-property.mdx b/src/pages/zh/docs/transition-property.mdx similarity index 100% rename from src/pages/zhs/docs/transition-property.mdx rename to src/pages/zh/docs/transition-property.mdx diff --git a/src/pages/zhs/docs/transition-timing-function.mdx b/src/pages/zh/docs/transition-timing-function.mdx similarity index 100% rename from src/pages/zhs/docs/transition-timing-function.mdx rename to src/pages/zh/docs/transition-timing-function.mdx diff --git a/src/pages/zhs/docs/translate.mdx b/src/pages/zh/docs/translate.mdx similarity index 100% rename from src/pages/zhs/docs/translate.mdx rename to src/pages/zh/docs/translate.mdx diff --git a/src/pages/zhs/docs/upgrade-guide.mdx b/src/pages/zh/docs/upgrade-guide.mdx similarity index 100% rename from src/pages/zhs/docs/upgrade-guide.mdx rename to src/pages/zh/docs/upgrade-guide.mdx diff --git a/src/pages/zhs/docs/user-select.mdx b/src/pages/zh/docs/user-select.mdx similarity index 100% rename from src/pages/zhs/docs/user-select.mdx rename to src/pages/zh/docs/user-select.mdx diff --git a/src/pages/zhs/docs/using-with-preprocessors.mdx b/src/pages/zh/docs/using-with-preprocessors.mdx similarity index 100% rename from src/pages/zhs/docs/using-with-preprocessors.mdx rename to src/pages/zh/docs/using-with-preprocessors.mdx diff --git a/src/pages/zhs/docs/utility-first.mdx b/src/pages/zh/docs/utility-first.mdx similarity index 100% rename from src/pages/zhs/docs/utility-first.mdx rename to src/pages/zh/docs/utility-first.mdx diff --git a/src/pages/zhs/docs/vertical-align.mdx b/src/pages/zh/docs/vertical-align.mdx similarity index 100% rename from src/pages/zhs/docs/vertical-align.mdx rename to src/pages/zh/docs/vertical-align.mdx diff --git a/src/pages/zhs/docs/visibility.mdx b/src/pages/zh/docs/visibility.mdx similarity index 100% rename from src/pages/zhs/docs/visibility.mdx rename to src/pages/zh/docs/visibility.mdx diff --git a/src/pages/zhs/docs/whitespace.mdx b/src/pages/zh/docs/whitespace.mdx similarity index 100% rename from src/pages/zhs/docs/whitespace.mdx rename to src/pages/zh/docs/whitespace.mdx diff --git a/src/pages/zhs/docs/width.mdx b/src/pages/zh/docs/width.mdx similarity index 100% rename from src/pages/zhs/docs/width.mdx rename to src/pages/zh/docs/width.mdx diff --git a/src/pages/zhs/docs/will-change.mdx b/src/pages/zh/docs/will-change.mdx similarity index 100% rename from src/pages/zhs/docs/will-change.mdx rename to src/pages/zh/docs/will-change.mdx diff --git a/src/pages/zhs/docs/word-break.mdx b/src/pages/zh/docs/word-break.mdx similarity index 100% rename from src/pages/zhs/docs/word-break.mdx rename to src/pages/zh/docs/word-break.mdx diff --git a/src/pages/zhs/docs/z-index.mdx b/src/pages/zh/docs/z-index.mdx similarity index 100% rename from src/pages/zhs/docs/z-index.mdx rename to src/pages/zh/docs/z-index.mdx From 9c36554486e3e65ea0fc8da28260f3b3476d287f Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:50:57 +0800 Subject: [PATCH 39/48] fix import --- src/pages/resources.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index d765e4449..12e7e7ccd 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,7 +1,7 @@ -import { DocumentationLayout } from '@/layouts/zh/DocumentationLayout' +import { DocumentationLayout } from '@/layouts/.ZH/DocumentationLayout' import { Button } from '@/components/Button' import clsx from 'clsx' -import { BasicLayout } from '@/layouts/BasicLayout' +import { BasicLayout } from '@/layouts/.ZH/BasicLayout' import { ReactComponent as DiscordIcon } from '@/img/icons/discord.svg' import { ReactComponent as GitHubIcon } from '@/img/icons/github.svg' From 301d1810e23bfd44ef959c945679236151d07457 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 21:50:57 +0800 Subject: [PATCH 40/48] fix import --- src/pages/resources.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/resources.js b/src/pages/resources.js index d765e4449..12e7e7ccd 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,7 +1,7 @@ -import { DocumentationLayout } from '@/layouts/zh/DocumentationLayout' +import { DocumentationLayout } from '@/layouts/.ZH/DocumentationLayout' import { Button } from '@/components/Button' import clsx from 'clsx' -import { BasicLayout } from '@/layouts/BasicLayout' +import { BasicLayout } from '@/layouts/.ZH/BasicLayout' import { ReactComponent as DiscordIcon } from '@/img/icons/discord.svg' import { ReactComponent as GitHubIcon } from '@/img/icons/github.svg' From 71a13ab69fc2671d1600c23857fb9d912f9f3071 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=90=8B=E5=85=94=20Tryto?= <35431381+huibizhang@users.noreply.github.com> Date: Mon, 20 Dec 2021 21:58:23 +0800 Subject: [PATCH 41/48] Update resources.js --- src/pages/resources.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/resources.js b/src/pages/resources.js index 12e7e7ccd..c0d73280d 100644 --- a/src/pages/resources.js +++ b/src/pages/resources.js @@ -1,4 +1,5 @@ import { DocumentationLayout } from '@/layouts/.ZH/DocumentationLayout' + import { Button } from '@/components/Button' import clsx from 'clsx' import { BasicLayout } from '@/layouts/.ZH/BasicLayout' From 06c824ea41c9479feeb959afa4a587a7f97f9e9f Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 22:11:48 +0800 Subject: [PATCH 42/48] rename _app,js in .EN --- src/pages/.EN/{_app.js => _app.js.bak} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/pages/.EN/{_app.js => _app.js.bak} (100%) diff --git a/src/pages/.EN/_app.js b/src/pages/.EN/_app.js.bak similarity index 100% rename from src/pages/.EN/_app.js rename to src/pages/.EN/_app.js.bak From 8040359e3a67325addabde0a0900291c0d62fd76 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 22:18:17 +0800 Subject: [PATCH 43/48] fix path of remark/utils --- src/pages/zh/docs/guides/nuxtjs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/zh/docs/guides/nuxtjs.js b/src/pages/zh/docs/guides/nuxtjs.js index 926a76c99..ce3acdb99 100644 --- a/src/pages/zh/docs/guides/nuxtjs.js +++ b/src/pages/zh/docs/guides/nuxtjs.js @@ -175,7 +175,7 @@ export default function UsingNextJS({ code }) { export function getStaticProps() { // let { highlightCode } = require('../../../../remark/utils') - let { highlightCode } = require('../../../.././remark/utils') + let { highlightCode } = require('../../../../../remark/utils') return { props: { From 8e1ec468eb4acff520bebbcb12c3abba178018bd Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 22:26:21 +0800 Subject: [PATCH 44/48] rename _app.js.bak to backup._app.js --- src/pages/.EN/{_app.js.bak => backup._app.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/pages/.EN/{_app.js.bak => backup._app.js} (100%) diff --git a/src/pages/.EN/_app.js.bak b/src/pages/.EN/backup._app.js similarity index 100% rename from src/pages/.EN/_app.js.bak rename to src/pages/.EN/backup._app.js From f4eb452e11e1bbec439ff4b308cd0b4c19475219 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 22:34:25 +0800 Subject: [PATCH 45/48] add pages_backup --- src/{pages/.EN/backup._app.js => pages_backup/_app.js} | 0 src/{pages/.EN => pages_backup}/brand.mdx | 0 src/{pages/.EN => pages_backup}/index.js | 0 src/{pages/.EN => pages_backup}/resources.js | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename src/{pages/.EN/backup._app.js => pages_backup/_app.js} (100%) rename src/{pages/.EN => pages_backup}/brand.mdx (100%) rename src/{pages/.EN => pages_backup}/index.js (100%) rename src/{pages/.EN => pages_backup}/resources.js (100%) diff --git a/src/pages/.EN/backup._app.js b/src/pages_backup/_app.js similarity index 100% rename from src/pages/.EN/backup._app.js rename to src/pages_backup/_app.js diff --git a/src/pages/.EN/brand.mdx b/src/pages_backup/brand.mdx similarity index 100% rename from src/pages/.EN/brand.mdx rename to src/pages_backup/brand.mdx diff --git a/src/pages/.EN/index.js b/src/pages_backup/index.js similarity index 100% rename from src/pages/.EN/index.js rename to src/pages_backup/index.js diff --git a/src/pages/.EN/resources.js b/src/pages_backup/resources.js similarity index 100% rename from src/pages/.EN/resources.js rename to src/pages_backup/resources.js From cc23561b2ec946d88ccff43da45d41f82044380e Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 22:59:59 +0800 Subject: [PATCH 46/48] fix search.js importment --- src/components/.ZH/Header.js | 4 ++-- src/components/.ZH/{Search.js => Search.js.bak} | 0 src/layouts/.ZH/SidebarLayout.js | 3 ++- src/pages/_app.js | 4 ++-- src/pages/index.js | 3 ++- 5 files changed, 8 insertions(+), 6 deletions(-) rename src/components/.ZH/{Search.js => Search.js.bak} (100%) diff --git a/src/components/.ZH/Header.js b/src/components/.ZH/Header.js index 464617a4d..0980bd057 100644 --- a/src/components/.ZH/Header.js +++ b/src/components/.ZH/Header.js @@ -1,7 +1,7 @@ import Link from 'next/link' import { VersionSwitcher } from '@/components/VersionSwitcher' -// import { SearchButton } from '@/components/Search' -import { SearchButton } from '@/components/.ZH/Search' +import { SearchButton } from '@/components/Search' +// import { SearchButton } from '@/components/.ZH/Search' import Router from 'next/router' import { Logo } from '@/components/Logo' import { Dialog } from '@headlessui/react' diff --git a/src/components/.ZH/Search.js b/src/components/.ZH/Search.js.bak similarity index 100% rename from src/components/.ZH/Search.js rename to src/components/.ZH/Search.js.bak diff --git a/src/layouts/.ZH/SidebarLayout.js b/src/layouts/.ZH/SidebarLayout.js index 957c0b8f8..bf308d4e7 100644 --- a/src/layouts/.ZH/SidebarLayout.js +++ b/src/layouts/.ZH/SidebarLayout.js @@ -3,7 +3,8 @@ import { useRouter } from 'next/router' import { createContext, forwardRef, useRef } from 'react' import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect' import clsx from 'clsx' -import { SearchButton } from '@/components/.ZH/Search' +import { SearchButton } from '@/components/Search' +// import { SearchButton } from '@/components/.ZH/Search' import { Dialog } from '@headlessui/react' import chineseCategory from '@/components/.ZH/ChineseCategory' diff --git a/src/pages/_app.js b/src/pages/_app.js index a5550204c..661b79261 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -11,8 +11,8 @@ import Head from 'next/head' import socialCardLarge from '@/img/social-card-large.jpg' import { ResizeObserver } from '@juggle/resize-observer' import 'intersection-observer' -// import { SearchProvider } from '@/components/Search' -import { SearchProvider } from '@/components/.ZH/Search' +import { SearchProvider } from '@/components/Search' +// import { SearchProvider } from '@/components/.ZH/Search' if (typeof window !== 'undefined' && !('ResizeObserver' in window)) { window.ResizeObserver = ResizeObserver diff --git a/src/pages/index.js b/src/pages/index.js index 2003994f8..9f52c44ce 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,7 +10,8 @@ import { Customization } from '@/components/.ZH/home/Customization' import { ModernFeatures } from '@/components/.ZH/home/ModernFeatures' import { EditorTools } from '@/components/.ZH/home/EditorTools' import { ReadyMadeComponents } from '@/components/.ZH/home/ReadyMadeComponents' -import { SearchButton } from '@/components/.ZH/Search' +import { SearchButton } from '@/components/Search' +// import { SearchButton } from '@/components/.ZH/Search' import { Hero } from '@/components/.ZH/home/Hero' import { Logo } from '@/components/Logo' import { Footer } from '@/components/.ZH/home/Footer' From e99365da162e714b67cf67767c2042eec934b5b4 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 23:07:51 +0800 Subject: [PATCH 47/48] remove Search.js.bak --- src/components/.ZH/Search.js.bak | 198 ------------------------------- 1 file changed, 198 deletions(-) delete mode 100644 src/components/.ZH/Search.js.bak diff --git a/src/components/.ZH/Search.js.bak b/src/components/.ZH/Search.js.bak deleted file mode 100644 index aeabb3ea3..000000000 --- a/src/components/.ZH/Search.js.bak +++ /dev/null @@ -1,198 +0,0 @@ -import { useState, useCallback, useRef, createContext, useContext, useEffect } from 'react' -import { createPortal } from 'react-dom' -import Link from 'next/link' -import Head from 'next/head' -import { useRouter } from 'next/router' -import { DocSearchModal } from '@docsearch/react' -import clsx from 'clsx' -import { useActionKey } from '@/hooks/useActionKey' - -const INDEX_NAME = 'tailwindcss' -const API_KEY = '5fc87cef58bb80203d2207578309fab6' -const APP_ID = 'KNPXZI5B0M' - -const SearchContext = createContext() - -export function SearchProvider({ children }) { - const router = useRouter() - const [isOpen, setIsOpen] = useState(false) - const [initialQuery, setInitialQuery] = useState(null) - - const onOpen = useCallback(() => { - setIsOpen(true) - }, [setIsOpen]) - - const onClose = useCallback(() => { - setIsOpen(false) - }, [setIsOpen]) - - const onInput = useCallback( - (e) => { - setIsOpen(true) - setInitialQuery(e.key) - }, - [setIsOpen, setInitialQuery] - ) - - useDocSearchKeyboardEvents({ - isOpen, - onOpen, - onClose, - onInput, - }) - - return ( - <> - - - - - {children} - - {isOpen && - createPortal( - { - return items.map((item, index) => { - // We transform the absolute URL into a relative URL to - // leverage Next's preloading. - const a = document.createElement('a') - a.href = item.url - - const hash = a.hash === '#content-wrapper' ? '' : a.hash - - return { - ...item, - url: `${a.pathname}${hash}`, - __is_result: () => true, - __is_parent: () => item.type === 'lvl1' && items.length > 1 && index === 0, - __is_child: () => - item.type !== 'lvl1' && - items.length > 1 && - items[0].type === 'lvl1' && - index !== 0, - __is_first: () => index === 1, - __is_last: () => index === items.length - 1 && index !== 0, - } - }) - }} - />, - document.body - )} - - ) -} - -function Hit({ hit, children }) { - return ( - - - {children} - - - ) -} - -export function SearchButton({ children, ...props }) { - let searchButtonRef = useRef() - let actionKey = useActionKey() - let { onOpen, onInput } = useContext(SearchContext) - - useEffect(() => { - function onKeyDown(event) { - if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) { - if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) { - onInput(event) - } - } - } - window.addEventListener('keydown', onKeyDown) - return () => { - window.removeEventListener('keydown', onKeyDown) - } - }, [onInput, searchButtonRef]) - - return ( - - ) -} - -function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) { - useEffect(() => { - function onKeyDown(event) { - function open() { - // We check that no other DocSearch modal is showing before opening - // another one. - if (!document.body.classList.contains('DocSearch--active')) { - onOpen() - } - } - - if ( - (event.keyCode === 27 && isOpen) || - (event.key === 'k' && (event.metaKey || event.ctrlKey)) || - (!isEditingContent(event) && event.key === '/' && !isOpen) - ) { - event.preventDefault() - - if (isOpen) { - onClose() - } else if (!document.body.classList.contains('DocSearch--active')) { - open() - } - } - } - - window.addEventListener('keydown', onKeyDown) - return () => { - window.removeEventListener('keydown', onKeyDown) - } - }, [isOpen, onOpen, onClose]) -} - -function isEditingContent(event) { - let element = event.target - let tagName = element.tagName - return ( - element.isContentEditable || - tagName === 'INPUT' || - tagName === 'SELECT' || - tagName === 'TEXTAREA' - ) -} From 7a1eea4d62adb9f35bcda8517a2c5ce4e54d3ae4 Mon Sep 17 00:00:00 2001 From: huibizhang Date: Mon, 20 Dec 2021 23:26:54 +0800 Subject: [PATCH 48/48] update meta --- src/pages/_app.js | 12 ++++++---- src/pages/_document.js | 3 ++- src/pages_backup/_document.js | 44 +++++++++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 src/pages_backup/_document.js diff --git a/src/pages/_app.js b/src/pages/_app.js index 661b79261..9571c87c4 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -57,7 +57,8 @@ export default function App({ Component, pageProps, router }) { const showHeader = router.pathname !== '/' const meta = Component.layoutProps?.meta || {} const description = - meta.metaDescription || meta.description || 'Documentation for the Tailwind CSS framework.' + // meta.metaDescription || meta.description || 'Documentation for the Tailwind CSS framework.' + meta.metaDescription || meta.description || 'Tailwind CSS 框架技術文件' if (router.pathname.startsWith('/examples/')) { return @@ -79,20 +80,23 @@ export default function App({ Component, pageProps, router }) { diff --git a/src/pages/_document.js b/src/pages/_document.js index 543d0e565..15d09ea54 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -15,7 +15,8 @@ export default class Document extends NextDocument { render() { return ( + + + + + + + + + + + + + + +
    + + + + + ) + } +}