tailwindcss-logical:Tailwind CSS 的 CSS 逻辑属性和值插件

  • j8_962192
    了解作者
  • 111.4KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 19:40
    上传日期
tailwindcss-逻辑 插件。 与 Tailwind v1.2.0+ 兼容并针对 Tailwind v2 进行了更新。 查看以进行可视化演练,或继续阅读以开始使用。 用法 安装作为项目的依赖项: npm install tailwindcss-logical --save-dev 在 Tailwind 配置文件的plugins部分注册 tailwindcss-logical: // tailwind.config.js module . exports = { plugins : [ require ( 'tailwindcss-logical' ) ] } 要启用(特定于断点的样式、悬停样式等),请将'variants.logical'添加到您的 Tailwind 配置文件中: // tailwind.config.js module . expor
tailwindcss-logical-master.zip
  • tailwindcss-logical-master
  • .github
  • workflows
  • codecov.yml
    267B
  • build.yml
    474B
  • LICENSE.txt
    728B
  • .eslintrc.js
    339B
  • jest.config.js
    6.4KB
  • README.md
    12.6KB
  • docs
  • index.html
    36.6KB
  • postcss.config.js
    425B
  • tailwind.config.js
    442B
  • output.css
    25.6KB
  • input.css
    59B
  • .editorconfig
    174B
  • tests
  • setup.js
    95B
  • output
  • blockSize.js
    2.1KB
  • nonconfigurable.js
    762B
  • minBlockSize.js
    161B
  • spaceBetween.js
    30.9KB
  • maxBlockSize.js
    1.7KB
  • borderRadius.js
    5.6KB
  • inlineSize.js
    2.7KB
  • inset.js
    26.7KB
  • borderWidth.js
    1.1KB
  • padding.js
    9.5KB
  • minInlineSize.js
    221B
  • margin.js
    19.3KB
  • maxInlineSize.js
    1.1KB
  • divideWidth.js
    2.5KB
  • index.test.js
    5.9KB
  • .gitignore
    47B
  • index.js
    9.7KB
  • .eslintignore
    14B
  • package-lock.json
    329.1KB
  • package.json
    1.2KB
  • .nvmrc
    9B
内容介绍
# tailwindcss-logical ![build](https://github.com/stevecochrane/tailwindcss-logical/workflows/build/badge.svg) [![NPM](https://img.shields.io/npm/v/tailwindcss-logical.svg)](https://github.com/stevecochrane/tailwindcss-logical/releases) [![Downloads](https://img.shields.io/npm/dt/tailwindcss-logical.svg)](https://www.npmjs.com/package/tailwindcss) [![codecov](https://codecov.io/gh/stevecochrane/tailwindcss-logical/branch/master/graph/badge.svg)](https://codecov.io/gh/stevecochrane/tailwindcss-logical) [![License](https://img.shields.io/npm/l/tailwindcss-logical.svg)](https://github.com/stevecochrane/tailwindcss-logical/blob/master/LICENSE.txt) A [CSS Logical Properties and Values](https://drafts.csswg.org/css-logical/) plugin for [Tailwind CSS](https://tailwindcss.com). Compatible with Tailwind v1.2.0+ and updated for Tailwind v2. View the [demo page](https://stevecochrane.github.io/tailwindcss-logical/) for a visual walkthrough, or read on to get started. ## Usage Install [tailwindcss-logical](https://www.npmjs.com/package/tailwindcss-logical) as a dependency of your project: ```bash npm install tailwindcss-logical --save-dev ``` Register tailwindcss-logical in the `plugins` section of your Tailwind config file: ```js // tailwind.config.js module.exports = { plugins: [ require('tailwindcss-logical') ] } ``` To enable [variants](https://tailwindcss.com/docs/configuring-variants) (breakpoint-specific styles, hover styles, and more), add `'variants.logical'` to your Tailwind config file: ```js // tailwind.config.js module.exports = { variants: { logical: ['responsive', 'hover'] } } ``` ## What are CSS Logical Properties and Values? In short, CSS Logical Properties and Values extend CSS for easier development when working with non-LTR (left-to-right) languages. For example, let's say you want to add padding before the start of a paragraph of text. For English, which is LTR, you would do this: ```css .lead-paragraph { padding-left: 1rem; } ``` However, for Farsi, which reads right-to-left, that would cause the padding to be at the end of the text rather than the beginning, so you would have to do something like this to cover both cases: ```css .lead-paragraph { padding-left: 1rem; } html[dir="rtl"] .lead-paragraph { padding-left: 0; padding-right: 1rem; } ``` CSS Logical Properties and Values simplifies this by abstracting away the specific directions. The above example becomes this: ```css .lead-paragraph { padding-inline-start: 1rem; } ``` With one style, the padding is applied as intended for either language. For more about CSS Logical Properties and Values, see [Building Multi-Directional Layouts](https://css-tricks.com/building-multi-directional-layouts/) by Ahmad El-Alfy. ## What's Included ### Flow-relative Values for `float` and `clear` ```css .float-start { float: inline-start; } .float-end { float: inline-end; } .clear-start { clear: inline-start; } .clear-end { clear: inline-end; } ``` ### Flow-relative Values for `text-align` ```css .text-start { text-align: start; } .text-end { text-align: end; } ``` ### Flow-relative Values for `resize` ```css .resize-block { resize: block; } .resize-inline { resize: inline; } ``` ### Flow-relative Longhands for `overscroll-behavior` ```css .overscroll-b-auto { overscroll-behavior-block: auto; } .overscroll-b-contain { overscroll-behavior-block: contain; } .overscroll-b-none { overscroll-behavior-block: none; } .overscroll-i-auto { overscroll-behavior-inline: auto; } .overscroll-i-contain { overscroll-behavior-inline: contain; } .overscroll-i-none { overscroll-behavior-inline: none; } ``` ### Logical Height and Logical Width Utilities are generated for the `block-size`, `inline-size`, `min-block-size`, `min-inline-size`, `max-block-size`, and `max-inline-size` properties. These match the values in your `height`, `width`, `min-height`, `min-width`, `max-height`, and `max-width` config objects, respectively. ```css .bs-1 { block-size: 0.25rem; } .is-1 { inline-size: 0.25rem; } .min-bs-0 { min-block-size: 0; } .min-is-0 { min-inline-size: 0; } .max-bs-full { max-block-size: 100%; } .max-is-full { max-inline-size: 100%; } ``` ### Flow-relative Margins Utilities are generated for the `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` properties, as well as for the shorthand properties `margin-block` and `margin-inline`. These match the values in your `margin` config object. ```css .mlb-1 { margin-block: 0.25rem; } .mli-1 { margin-inline: 0.25rem; } .mbs-1 { margin-block-start: 0.25rem; } .mbe-1 { margin-block-end: 0.25rem; } .mis-1 { margin-inline-start: 0.25rem; } .mie-1 { margin-inline-end: 0.25rem; } ``` ### Flow-relative Padding Utilities are generated for the `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` properties, as well as for the shorthand properties `padding-block` and `padding-end`. These match the values in your `padding` config object. ```css .plb-1 { padding-block: 0.25rem; } .pli-1 { padding-inline: 0.25rem; } .pbs-1 { padding-block-start: 0.25rem; } .pbe-1 { padding-block-end: 0.25rem; } .pis-1 { padding-inline-start: 0.25rem; } .pie-1 { padding-inline-end: 0.25rem; } ``` ### Flow-relative Space Between Flow-relative utilities are generated for the Tailwind-specific [Space Between](https://tailwindcss.com/docs/space). These match the values in your `space` config object. All of the usual positive and negative values plus `.space-b-reverse` and `.space-i-reverse` utilities are generated. ```css .space-b-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-b-reverse: 0; margin-block-start: calc(0.25rem * calc(1 - var(--tw-space-b-reverse))); margin-block-end: calc(0.25rem * var(--tw-space-b-reverse)) } .space-i-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-i-reverse: 0; margin-inline-start: calc(0.25rem * calc(1 - var(--tw-space-i-reverse))); margin-inline-end: calc(0.25rem * var(--tw-space-i-reverse)) } ``` ### Flow-relative Offsets (`top` / `right` / `bottom` / `left`) Utilities are generated for the `inset-block-start`, `inset-block-end`, `inset-inline-start`, and `inset-inline-end` properties, as well as for the shorthand properties `inset-block` and `inset-inline`. These match the values in your `inset` config object. ```css .inset-block-0 { inset-block: 0; } .inset-inline-0 { inset-inline: 0; } .block-start-0 { inset-block-start: 0; } .block-end-0 { inset-block-end: 0; } .inline-start-0 { inset-inline-start: 0; } .inline-end-0 { inset-inline-end: 0; } ``` ### Flow-relative Border Widths Utilities are generated for the `border-block-start-width`, `border-block-end-width`, `border-inline-start-width`, and `border-inline-end-width` properties. These match the values in your `borderWidth` config object. ```css .border-bs-2 { border-block-start-width: 2px; } .border-be-2 { border-block-end-width: 2px; } .border-is-2 { border-inline-start-width: 2px; } .border-ie-2 { border-inline-end-width: 2px; } ``` ### Flow-relative Divide Width Flow-relative utilities are generated for the Tailwind-specific [Divide Width](https://tailwindcss.com/docs/divide-width). These match the values in your `divideWidth` config object. All of the usual values plus `.divide-b`, `.divide-i`, `.divide-b-reverse` and `.divide-i-reverse` utilities are generated. ```css .divide-b-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-b-reverse: 0; border-block-start-width: calc(2px * calc(1 - var(--tw-divide-b-reverse))); border-block-end-width: calc(2px * var(--tw-divide-b-reverse)) } .divide-i-2 > :not([hidden]) ~ :not([hidden]) { --tw-divide-i-reverse: 0; border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-i-reverse))); border-inline-end-width: calc(2px * var(--tw-divide-i-reverse)) } ``` ### Flow-relative Corner Rounding (`border-radius`) Utility classes are generated for the `border-start-start-radius`, `border-start-end-radius`, `border-end-s
评论
    相关推荐
    • css-scale:标量CSS变量
      $ npm install css-scale 用法 安装请执行以下操作: @import 'css-scale' ; h1 { font-size : var ( --h1 ); } . title { padding : var ( --s2 ); } 原料药 s {1..4} rem的大小值。 用于设置边距,偏移量和...
    • css-specificity
      制作了这个模块,然后发现 npm 上已经存在一个。 改用它。 css 特异性 css-specificity 接受一个字符串并告诉您其中每个选择器的 CSS 特异性。 用法 var cssspecificity = require('css-specificity'); var s = ...
    • ToDo_tailwindCSS
      ToDo_tailwindCSS 启动应用程序的步骤-npm install -npm run dev
    • npm-css:奥克兰 CSS 讲座
      用于 CSSNPM 演示文稿,使用 构建 在本地查看幻灯片 首先,确保您安装了以下内容: : $ npm install -g bower : $ npm install -g gulp 然后,安装依赖项并运行预览服务器: $ npm install && bower ...
    • tailwindcss-starter-setup
      Tailwindcss入门安装程序 该软件包旨在帮助开发人员无需任何手动配置即可快速开始使用tailwindcss。 一切都已配置并准备就绪。 特征 文件结构几乎可以立即开始编码(需要简单的设置) 自动前缀(供应商前缀) 导入...
    • npm-css:从npm需要CSS
      npm-css 需要节点模块中CSS。 句法 @import "typeahead" ; @import "./foo.css" ; @import "./bar/baz.css" ; . foo { color : red } npm-css以@import " ... "的格式读取css导入,并为您内联该路径CSS。 它还...
    • react-发布reactnpm组件demo支持cssmodule自定义打包配置轻松上手
      发布react npm组件demo,支持css module、自定义打包配置,轻松上手
    • webdrivercss-uploader
      安装 npm install -g mocha npm install 浏览器堆栈集成 通过导出变量来使用 BrowserStack 凭据: export BROWSERSTACK_USERNAME= export BROWSERSTACK_KEY= < YOUR>
    • three-css2drenderer:threejs正式将CSS2DRender.js与npm一起应用
      threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let scene = new THREE...
    • mpx-import-npm-css:问题回购
      mpx-onload-async 一个mpx项目 开发人员 # install dep npm i # for dev npm run watch # for online ...npm-run-all是为了兼容Windows下无法同时执行两个npm脚本,如果不需要转web平台,可考虑去掉。