How to use TailwindCSS arbitrary values syntax? - 面试题

TailwindCSS's arbitrary values syntax allows developers to use custom values directly in class names without pre-defining them in configuration files. This is a powerful feature in TailwindCSS v3.0+.

Arbitrary Values Basics

Basic Syntax

Arbitrary values are wrapped in square brackets [] and can be used for any TailwindCSS property.

html
<!-- Arbitrary width -->
<div class="w-[137px]">
  Custom width
</div>

<!-- Arbitrary color -->
<div class="bg-[#1da1f2]">
  Custom color
</div>

<!-- Arbitrary spacing -->
<div class="p-[2.5rem]">
  Custom padding
</div>

Supported Property Types

1. Dimensions and Spacing

html
<!-- Width -->
<div class="w-[50%] w-[12rem] w-[300px]"></div>

<!-- Height -->
<div class="h-[100vh] h-[50vh] h-[800px]"></div>

<!-- Padding -->
<div class="p-[1.5rem] px-[20px] py-[10px]"></div>

<!-- Margin -->
<div class="m-[2rem] mx-[auto] my-[10px]"></div>

2. Colors

html
<!-- Background color -->
<div class="bg-[#1da1f2] bg-[rgb(29, 161, 242)] bg-[hsl(203, 89%, 53%)]"></div>

<!-- Text color -->
<p class="text-[#ff6b6b] text-[rgb(255, 107, 107)]"></p>

<!-- Border color -->
<div class="border-[#e5e7eb] border-b-[#3b82f6]"></div>

<!-- Shadow color -->
<div class="shadow-[0_0_20px_rgba(0,0,0,0.5)]"></div>

3. Fonts and Text

html
<!-- Font size -->
<h1 class="text-[2.5rem] text-[40px]"></h1>

<!-- Line height -->
<p class="leading-[1.8] leading-[32px]"></p>

<!-- Letter spacing -->
<p class="tracking-[0.05em] tracking-[2px]"></p>

<!-- Font weight -->
<p class="font-[600] font-[bold]"></p>

4. Borders and Border Radius

html
<!-- Border width -->
<div class="border-[3px] border-t-[5px]"></div>

<!-- Border radius -->
<div class="rounded-[12px] rounded-tl-[20px]"></div>

<!-- Border style -->
<div class="border-[dashed] border-[dotted]"></div>

5. Positioning and Layout

html
<!-- Positioning -->
<div class="top-[10px] right-[20px] bottom-[30px] left-[40px]"></div>

<!-- Z-index -->
<div class="z-[100] z-[999]"></div>

<!-- Flex gap -->
<div class="gap-[15px] gap-x-[20px] gap-y-[10px]"></div>

<!-- Grid column width -->
<div class="grid-cols-[200px_1fr_100px]"></div>

Advanced Usage

1. CSS Variables

html
<!-- Use CSS variables -->
<div class="w-[var(--container-width)] bg-[var(--primary-color)]">
  Using CSS variables
</div>

<!-- CSS variables with fallback -->
<div class="text-[var(--text-color,#333)]">
  CSS variables with fallback
</div>

2. Calculated Values

html
<!-- Use calc() -->
<div class="w-[calc(100%-2rem)] h-[calc(50vh-100px)]">
  Calculated values
</div>

<!-- Complex calculations -->
<div class="w-[calc((100%-2rem)/3)]">
  Complex calculations
</div>

3. Media Queries

html
<!-- Custom breakpoints -->
<div class="w-full min-[500px]:w-1/2 min-[768px]:w-1/3">
  Custom breakpoints
</div>

<!-- Max-width -->
<div class="max-[640px]:hidden">
  Hide on small screens
</div>

4. Pseudo-elements

html
<!-- Use pseudo-elements -->
<div class="before:content-[''] before:w-[10px] before:h-[10px]">
  Pseudo-elements
</div>

<!-- Custom content -->
<div class="after:content-['→'] after:ml-[10px]">
  Custom pseudo-element content
</div>

Practical Scenarios

1. Precise Design Implementation

html
<!-- Precise implementation of design specifications -->
<div class="w-[375px] h-[812px] bg-[#f5f5f5]">
  <div class="p-[20px]">
    <h1 class="text-[24px] font-[700] text-[#333] mb-[16px]">
      Precise Design Implementation
    </h1>
    <p class="text-[16px] leading-[1.5] text-[#666]">
      Use arbitrary values to precisely implement design specifications
    </p>
  </div>
</div>

2. Responsive Design

html
<!-- Precise responsive breakpoints -->
<div class="
  w-full
  min-[320px]:w-[300px]
  min-[768px]:w-[600px]
  min-[1024px]:w-[900px]
">
  Precise responsive
</div>

3. Special Effects

html
<!-- Custom shadow -->
<div class="shadow-[0_10px_40px_-10px_rgba(0,0,0,0.3)]">
  Custom shadow effect
</div>

<!-- Gradient background -->
<div class="bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]">
  Gradient background
</div>

<!-- Blur effect -->
<div class="backdrop-blur-[10px]">
  Blur background
</div>

4. Animation and Transitions

html
<!-- Custom transition time -->
<button class="transition-[0.5s] hover:bg-blue-500">
  Custom transition
</button>

<!-- Custom animation delay -->
<div class="animate-[bounce_1s_ease-in-out_infinite]">
  Custom animation
</div>

<!-- Bezier curve -->
<div class="transition-[cubic-bezier(0.4,0,0.2,1)]">
  Custom easing function
</div>

Best Practices

1. When to Use Arbitrary Values

Suitable for arbitrary values:

Need to precisely implement design specifications
One-time special values
Rapid prototyping
Special effect implementation

Not suitable for arbitrary values:

Repeatedly used styles (should add to configuration)
Design systems requiring maintenance
Team collaboration projects

2. Combining with Configuration Files

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Add commonly used arbitrary values to configuration
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      colors: {
        'brand': {
          'primary': '#3b82f6',
          'secondary': '#10b981',
        },
      },
    },
  },
}

3. Naming Conventions

html
<!-- Use semantic arbitrary values -->
<div class="w-[var(--content-width)]">
  Semantic variables
</div>

<!-- Avoid magic numbers -->
<div class="w-[375px]">
  <!-- ❌ Not recommended: magic numbers -->
</div>

<div class="w-[var(--mobile-width)]">
  <!-- ✅ Recommended: semantic variables -->
</div>

Performance Considerations

1. JIT Compiler

Arbitrary values syntax relies on JIT compiler, ensure it's enabled in configuration.

javascript
// tailwind.config.js
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
}

2. File Size Impact

Arbitrary values don't significantly affect final CSS file size because JIT compiler only generates actually used styles.

3. Build Performance

Heavy use of arbitrary values may slightly increase build time, but usually negligible.

Common Issues

1. Arbitrary Values vs Configuration Files

html
<!-- Arbitrary values -->
<div class="w-[375px]"></div>

<!-- Configuration file -->
<div class="w-mobile"></div>

Selection Principles:

One-time use → Arbitrary values
Repeated use → Configuration file
Rapid prototyping → Arbitrary values
Long-term maintenance → Configuration file

2. Limitations of Arbitrary Values

Some properties don't support arbitrary values, need to use custom CSS.

css
/* Unsupported properties */
.custom-element {
  /* Need to write in CSS file */
  filter: blur(10px) brightness(1.2);
}

3. Browser Compatibility

CSS generated by arbitrary values syntax is the same as standard CSS, browser compatibility depends on the CSS properties used.

Considerations

Readability: Overuse of arbitrary values may reduce code readability
Maintainability: Repeatedly used arbitrary values should be added to configuration
Team Collaboration: Ensure team consensus on arbitrary values usage
Design System: Long-term projects should establish a complete design system
Performance Monitoring: Regularly check generated CSS file size

Summary

Arbitrary values syntax is a powerful feature of TailwindCSS that provides:

Flexibility: Use arbitrary values without pre-configuration
Efficiency: Quickly achieve precise design implementation
Simplicity: Reduce configuration file complexity

But note:

Use reasonably, avoid over-reliance
Repeatedly used values should be added to configuration
Maintain code readability and maintainability
Consider long-term project maintenance costs