Last active
December 22, 2023 03:38
-
-
Save ryonakae/61659012349c3296541dd5ac31849554 to your computer and use it in GitHub Desktop.
Tailwind CSSのデフォルトの変数をほぼ全て削除して、なるべくArbitrary valuesを使うためのtailwind.config
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { Config } from 'tailwindcss' | |
| const config: Config = { | |
| content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], | |
| theme: { | |
| // Common | |
| colors: { | |
| '[]': '[]', | |
| inherit: 'inherit', | |
| transparent: 'transparent', | |
| }, | |
| spacing: { | |
| '[]': '[]', | |
| }, | |
| // Layout | |
| aspectRatio: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| columns: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| inset: { | |
| '[]': '[]', | |
| }, | |
| visibility: {}, | |
| zIndex: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| // Flexbox & Grid | |
| flexBasis: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| flexGrow: { | |
| '[]': '[]', | |
| }, | |
| flexShrink: { | |
| '[]': '[]', | |
| }, | |
| order: { | |
| '[]': '[]', | |
| }, | |
| gridTemplateColumns: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| gridColumn: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridColumnStart: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridColumnEnd: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridTemplateRows: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| gridRow: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridRowStart: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridRowEnd: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| gridAutoColumns: { | |
| '[]': '[]', | |
| }, | |
| gridAutoRows: { | |
| '[]': '[]', | |
| }, | |
| // Spacing | |
| // Sizing | |
| width: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| minWidth: { | |
| '[]': '[]', | |
| }, | |
| maxWidth: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| height: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| minHeight: { | |
| '[]': '[]', | |
| }, | |
| maxHeight: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| // Typography | |
| fontFamily: { | |
| '[]': '[]', | |
| }, | |
| fontSize: { | |
| '[]': '[]', | |
| }, | |
| fontWeight: { | |
| '[]': '[]', | |
| }, | |
| letterSpacing: { | |
| '[]': '[]', | |
| }, | |
| lineHeight: { | |
| '[]': '[]', | |
| }, | |
| textDecorationThickness: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| 'from-font': 'from-font', | |
| }, | |
| textUnderlineOffset: { | |
| '[]': '[]', | |
| auto: 'auto', | |
| }, | |
| // Backgrounds | |
| backgroundImage: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| // Borders | |
| borderRadius: { | |
| '[]': '[]', | |
| }, | |
| borderWidth: { | |
| '[]': '[]', | |
| }, | |
| borderColor: { | |
| '[]': '[]', | |
| inherit: 'inherit', | |
| transparent: 'transparent', | |
| }, | |
| outlineWidth: { | |
| '[]': '[]', | |
| }, | |
| outlineOffset: { | |
| '[]': '[]', | |
| }, | |
| // Effects | |
| boxShadow: { | |
| '[]': '[]', | |
| }, | |
| opacity: { | |
| '[]': '[]', | |
| }, | |
| // Filters | |
| blur: { | |
| '[]': '[]', | |
| }, | |
| brightness: { | |
| '[]': '[]', | |
| }, | |
| contrast: { | |
| '[]': '[]', | |
| }, | |
| dropShadow: { | |
| '[]': '[]', | |
| }, | |
| grayscale: { | |
| '[]': '[]', | |
| }, | |
| hueRotate: { | |
| '[]': '[]', | |
| }, | |
| invert: { | |
| '[]': '[]', | |
| }, | |
| saturate: { | |
| '[]': '[]', | |
| }, | |
| sepia: { | |
| '[]': '[]', | |
| }, | |
| backdropBlur: { | |
| '[]': '[]', | |
| }, | |
| backdropBrightness: { | |
| '[]': '[]', | |
| }, | |
| backdropContrast: { | |
| '[]': '[]', | |
| }, | |
| backdropGrayscale: { | |
| '[]': '[]', | |
| }, | |
| backdropHueRotate: { | |
| '[]': '[]', | |
| }, | |
| backdropInvert: { | |
| '[]': '[]', | |
| }, | |
| backdropOpacity: { | |
| '[]': '[]', | |
| }, | |
| backdropSaturate: { | |
| '[]': '[]', | |
| }, | |
| backdropSepia: { | |
| '[]': '[]', | |
| }, | |
| // Tables | |
| // Transitions & Animation | |
| transitionDuration: { | |
| '[]': '[]', | |
| }, | |
| transitionTimingFunction: { | |
| '[]': '[]', | |
| linear: 'linear', | |
| }, | |
| transitionDelay: { | |
| '[]': '[]', | |
| }, | |
| animation: { | |
| '[]': '[]', | |
| none: 'none', | |
| }, | |
| // Transforms | |
| scale: { | |
| '[]': '[]', | |
| }, | |
| rotate: { | |
| '[]': '[]', | |
| }, | |
| translate: { | |
| '[]': '[]', | |
| }, | |
| skew: { | |
| '[]': '[]', | |
| }, | |
| // Interactivity | |
| // SVG | |
| fill: { | |
| '[]': '[]', | |
| none: 'none', | |
| inherit: 'inherit', | |
| transparent: 'transparent', | |
| }, | |
| stroke: { | |
| '[]': '[]', | |
| none: 'none', | |
| inherit: 'inherit', | |
| transparent: 'transparent', | |
| }, | |
| strokeWidth: { | |
| '[]': '[]', | |
| }, | |
| // Your own settings | |
| extend: {}, | |
| }, | |
| } | |
| export default config |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
思想
letter-spacingが.trackingになっていたりvisibility: hidden;が.invisibleになっていたりfont-sizeを設定したいだけなのに.text-baseとすると一緒にline-heightも設定されたり方針
.aspect-autoはaspect-ratio: auto;となるので残す.aspect-squareはaspect-ratio: 1 / 1;なので削除[](Arbitrary values)だけを設定しておく.text-[16px]でfont-size: 16px;になる.invisible.sr-onlyなどextendに書けばよい