邂逅Tailwind (二)

coderklaus
645 阅读6分钟

配置

Tailwind 是一个 CSS 框架，它提供了一组预定义的 CSS 类和样式，用于构建用户界面

Tailwind 的主要目标是提高开发效率，因此它的设计初衷就是方便定制和自定义

通过修改配置文件，可以轻松地添加、删除或修改 Tailwind 的默认样式

所以一般在项目根目录下，存在名为tailwind.config.js的tailwind的配置文件

配置文件中的每个部分都是可选的，如果自定义了配置就会使用自定义配置，否则就会使用默认配置

# tailwindcss 提供了一个同名CLI工具 tailwindcss
# 通过init指令 可以在项目根目录下 新建一个简易版本的Tailwind配置文件
# 默认配置文件名为 tailwind.config.js
npx tailwindcss init

# -p 表示 在生成tailwind的配置文件的同时生成含有tailwind配置的postcss配置文件
npx tailwindcss init -p

# --full 表示生成完整的tailwind配置文件 --- 不推荐
npx tailwindcss init --full

content

一个数组，用于指定那些路径下的文件需要被tailwind处理

所有使用了功能类的html文件以及操作了功能类的js文件都需要再content中进行配置，只有在content中配置了的文件才会被tailwind解析

在content中不需要配置css文件，content中配置的css路径并不会被tailwind所解析

但是在html和js中使用的类(如在组件中编写的css样式) 会被tailwind所解析

Tailwind会通过正则提取出所有的功能类，并转换为一个压缩和丑化过的css文件

这个CSS文件包含了所有的类名和对应的样式，可以直接在网页中引用

  • 使用 * 匹配除斜杠和隐藏文件之外的任何内容
  • 使用 ** 匹配零个或多个目录
  • 使用逗号分隔的值在 {} 中，以匹配选项列表
module.exports = {
  // 对应的路径列表是相对于项目根目录
  // 不是相对于tailwind.config.js所在的目录
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './index.html',
  ],
  // ...
}

module.exports = {
  content: {
    // 将relative字段的值为true的时候
    // content中的路径就是相对于tailwind.config.js所在的目录，而不是项目根目录
    // 在tailwind3中默认relative是false，在未来的tailwind4中relative的默认值可能会修改为true
    relative: true,
    files: [
      './pages/**/*.{html,js}',
      './components/**/*.{html,js}',
    ],
  },
  // ...
}

Tailwind 是一个在构建时处理的工具，它会根据配置文件生成一组 CSS 类名和对应的样式

也就是说Tailwind是静态的，不是动态的，所以Tailwind 只会提取完整的类名，而无法解析动态构建的类名

为了确保 Tailwind 可以正确地生成对应的 CSS 样式，应该只使用完整的类名，而不是动态构建类名

<!-- error -->
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

<!-- success -->
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

content.transform

通过content.transform在解析tailwindcss之前，插入额外的自定义处理逻辑

// remark是一个处理markdown的css库
// 可以结合插件进行语法高亮，可以将markdown转换为各种格式的文件
const remark = require('remark')

module.exports = {
  content: {
    files: ['./src/**/*.{html,md}'],
    // 如果需要使用编译为HTML格式的内容格式（比如Markdown）
    // 例如在markdown编译为html的时候，注入tailwind类
    // 可以使用content.transform方法
    transform: {
      md: (content) => {
        return remark().process(content)
      }
    }
  },
  // ...
}

screens

用于自定义响应式断点

module.exports = {
  theme: {
    // theme.screens 中配置的响应式断点对象会覆盖默认的响应式断点对象
    // 在本例中xl，2xl 和 3xl 都会被移除响应式断点系统
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

module.exports = {
  theme: {
    // theme.extend.screens 中添加的断点系统会被添加到默认的断点系统后边
    // 同名的响应式断点会覆盖默认断点值
    // 所以这对于添加比默认响应式断点列表系统更大的断点非常有效
    extend: {
      screens: {
        'lg': '992px',
        '3xl': '1600px',
      },
    },
  },
}

// 添加最小的响应式断点

// tailwindcss/defaultTheme中提供的是tailwind默认的theme相关配置
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

module.exports = {
  theme: {
    screens: {
      // 自定义响应式断点名
      'tablet': '640px', // 使用 --- tablet:grid-cols-2
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

module.exports = {
  theme: {
    // 2xl: '1535px' --- min-width: 1535px
    // 2xl: {'max': '1535px'} --- max-width: 1535px
    // max-width的断点需要降序设置
    // min-width的断点需要升序设置
    // 「 避免匹配到多个断点后，后边的断点样式覆盖之前的断点样式 」
    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) { ... }
    }
  }
}

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) { ... }
    },
  }
}

module.exports = {
  theme: {
    extend: {
      screens: {
        // 自定义媒体查询条件
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

colors

module.exports = {
  theme: {
    // 自定义颜色值，会在tailwind的默认颜色值上扩展
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      // bg-white
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
      // bg-skyblue，bg-skyblue-dark，bg-skyblue-light
      'skyblue': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // bg-tahiti-100
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      }
    },
  },
}

preflight

Preflight提供一组常见的基础样式，以确保在创建Tailwind项目时，所有浏览器都具有一致的基础样式，以减少跨浏览器不一致性的问题

可以将Preflight简单地理解为一种样式重置和默认样式的组合

在实际使用中，通过@tailwind base;来注入Preflight样式

在tailwind中，进行了如下样式重置

  • 默认外边距被移除
  • H标签的样式被移除，并且具有与普通文本相同的字体大小和字体粗细
  • 移除了列表的所有样式，有序列表和无序列表都没有样式，没有项目符号或编号，也没有边距或填充
  • 可替换元素都是块级元素并添加了 vertical-align: middle;
  • 可替换元素默认情况下都是宽度充满父容器，高度自适应
  • 盒子元素的box-sizing为border-box
  • 默认情况下，会移除所有元素的默认边框样式
avatar
文章
阅读
粉丝