zqy233的前端学习笔记 | zqy233的前端学习笔记

使用任意值

需要指定px时，这样写

html

<div class="top-[117px]">
  <!-- ... -->
</div>

<div class="top-[117px]">
  <!-- ... -->
</div>

结合响应式修饰符lg

html

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

自定义背景颜色、自定义文字大小、伪元素内容

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

使用 theme 函数来引用 tailwind.config.js 文件中的设计

html

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>

使用var css变量的写法：

html

<div class="bg-[--my-color]">
  <!-- ... -->
</div>

<div class="bg-[--my-color]">
  <!-- ... -->
</div>

配置

配置和自定义Tailwind安装的指南。

由于Tailwind是用于构建定制用户界面的框架，它从一开始就考虑到了自定义。

默认情况下，Tailwind会在项目根目录下查找一个可选的tailwind.config.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',
      }
    }
  },
}

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',
      }
    }
  },
}

配置文件的每个部分都是可选的，因此您只需要指定您想要更改的内容。任何缺失的部分将回退到Tailwind的默认配置。

使用任意值 #

配置 #

使用任意值

配置