Wener Notes

Tailwind CSS

约 4 分钟阅读
  • tailwindlabs/tailwindcssGitHubtailwindlabs/tailwindcsstailwindlabs/tailwindcss 是什么？ · CSS 样式工具集 - 通过 class 名字来组合样式 · 将样式原子化 · 高度定制化 - 颜色、大小、breackpoint、extend 等等 · prune 可缩减大小 - 默认 未压缩 3.8 MB,Minified 3 MB, Gzip 300 KB, Brotli 75 KB笔记：Tailwind CSS 是什么？
    • CSS 样式工具集 - 通过 class 名字来组合样式
    • 将样式原子化
    • 高度定制化 - 颜色、大小、breackpoint、extend 等等
    • prune 可缩减大小 - 默认 未压缩 3.8 MB,Minified 3 MB, Gzip 300 KB, Brotli 75 KB
  • 问题
  • 参考
bash
# 直接使用命令行构建
pnpx @tailwindcss/cli -i ./src/app/globals.css -o dist/globals.css

# 基础依赖
npm add tailwindcss postcss autoprefixer

# 初始化配置
# postcss.config.js tailwind.config.js
npx tailwindcss init -p

# 包含默认配置
# https://unpkg.com/browse/[email protected]/stubs/config.full.js
npx tailwindcss init --full

# 自行构建
npx tailwind build ./src/styles/tailwind.css -o ./public/tailwind.css
# 持续构建
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Packagestailwindcssnpm PackagetailwindcssNPMpostcssnpm PackagepostcssNPMautoprefixernpm PackageautoprefixerNPM
JavaScript
// 预构建好的 css
import 'tailwindcss/dist/tailwind.css';
// 基于 PostCSS 的 css
import 'tailwindcss/tailwind.css';

plugins

plugin

  • layers
    • base
      • typography
      • font-face
    • utilities
    • components
TypeScript
const plugin = require('tailwindcss/plugin');
const MyPlugin = plugin(
  function ({
    addUtilities,
    addComponents,
    matchUtilities,
    matchComponents,
    addBase,
    addVariant,
    matchVariant,
    theme,
    corePlugins,
    // escaping strings
    e,
    // looking up Tailwind configuration
    config,
    variants,
    postcss,
  }) {
    // 静态
    addUtilities({
      '.content-auto': {
        'content-visibility': 'auto',
      },
    });
    // 动态
    // tab-1 tab-[123]
    matchUtilities(
      {
        tab: (value) => ({
          tabSize: value,
        }),
      },
      { values: theme('tabSize') },
    );
    // base 层
    addBase({
      h1: { fontSize: theme('fontSize.2xl') },
      h2: { fontSize: theme('fontSize.xl') },
      h3: { fontSize: theme('fontSize.lg') },
    });
    // 组件层
    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',
        },
      },
    });

    // 修饰
    addVariant('optional', '&:optional');
    addVariant('hocus', ['&:hover', '&:focus']);
    addVariant('supports-grid', '@supports (display: grid)');
    addVariant('group-optional', ':merge(.group):optional &');
    addVariant('peer-optional', ':merge(.peer):optional ~ &');
  },
  // 插件配置
  function (options) {
    // 可以接受配置
    return {
      theme: {
        tabSize: {
          1: '1',
          2: '2',
          4: '4',
          8: '8',
        },
      },
    };
  },
);

module.exports = {
  plugins: [MyPlugin],
};

container query

JavaScript
module.exports = {
  theme: {
    extend: {
      containers: {
        '2xs': '16rem',
      },
    },
  },
};

tailwind.css

css
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

JavaScript
module.exports = {
  // 裁剪的基础用法
  purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
  purge: {
    enabled: false, // 是否裁剪不必要的定义
    preserveHtmlElements: true, // 是否保留 HTML 元素基础样式
    layers: ['components', 'utilities'], // 裁剪层
    mode: 'all', // 是否裁剪所有未用到的定义 - 不建议
    content: ['./src/**/*.html'],
    // PurgeCSS 直接传入参数
    options: {
      safelist: [
        'bg-red-500',
        'px-4',
        {
          pattern: /bg-(red|green|blue)-(100|200|300)/,
          variants: ['lg', 'hover', 'focus', 'lg:hover'],
        },
      ],
    },
  },
  // 禁用插件可减少大小
  corePlugins: {
    float: false,
  },
  // 或者指定需要的插件
  corePlugins: ['margin', 'padding'],
};

Patterns

  • 避免内容溢出
  • 实现虚拟滚动窗口
text
<div className='flex flex-col'>
  <header></header>

  <div className='flex-1 min-h-0 relative'>
    <div className='absolute inset-0'>content</div>
  </div>

  <footer></footer>
</div>

JIT

  • 颜色组合 - bg-<color>/<opacity>
  • 任意值 - w-[20px]
  • 临近节点选择 - peer peer-checked:bg-blue-500
  • 简化使用 - transform, filter, backdrop-filter 直接使用
  • 设置 content - before:content-['hello']
html
<div data-content="hello world" class="before:content-[attr(data-content)] before:block"></div>

important

  • ! 前缀
html
<p class="font-bold !font-medium sm:hover:!tw-font-bold">
  This will be medium even though bold comes later in the CSS.
</p>

styled-jsx

bash
npm add styled-jsx-plugin-postcss
Packagesstyled-jsx-plugin-postcssnpm Packagestyled-jsx-plugin-postcssNPM
json
{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-postcss"]
        }
      }
    ]
  ]
}

命名分组/嵌套分组

  • group-2, group-2-hover
JavaScript
const plugin = require('tailwindcss/plugin');

module.exports = {
  theme: {
    groups: ['2', '3'],
  },
  plugins: [
    plugin(({ addVariant, theme }) => {
      const groups = theme('groups') || [];

      groups.forEach((group) => {
        addVariant(`group-${group}-hover`, () => {
          return `:merge(.group-${group}):hover &`;
        });
      });
    }),
  ],
};

snippets

css
.absolute-center {
  @apply absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2;
}

nesting

  • WebStrom: Language&Framework > Style Sheets > Dialects
postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

选择直接子元素

html
<ul class="children:p-4">
  <li>A</li>
</ul>
JavaScript
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('children', '& > *');
    },
  ],
};

关联信息

反向链接、本文链接的其他页面和外部资料。

反向链接

  • Ant Design
    笔记 · tailwindcss

    ant-design/ant-design · 丰富强大的组件库 · 不建议产品使用 - 除非是后台管理系统 · 参考 · 推荐使用 react-component，antd 的基础库 · 非常适用于 快速 出原型和结果 · 非常适用于 内部系统 / 后台管理系统

References

GitHub13 条
其他外链6 条
最近更新commit 8c45b83Edit

DaisyUI Version

Previous Page

Flowbite

Next Page

On this page

Tailwind CSSpluginsplugincontainer querytailwind.csstailwind.config.jsPatternsJITstyled-jsx命名分组/嵌套分组snippetsnesting选择直接子元素