Configuration article

Custom theme configuration is available through tailwind.config.js

purge

This works only in the Production environment to remove styles that are not in use

darkMode

Generate dark variants for color class styles (atomic styles with dark prefixes)

theme

Custom themes

  • spacing
const spacings = [0, 8, 10, 12, 16, 20, 32, 40, 56, 64, 96, 128, 240, 480]; . { theme:{ spacing: { px: '1px', ... spacings.reduce((pre, cur) => { pre[cur] = cur + 'px'; return pre }, {}) }, } }Copy the code

By default, the spacing ratio is given by padding, margin, width, height, maxHeight, gap, inset, space, and translate.

  • Width and heights

In many cases, the Settings for W and h are not the same as for spacing, so it is necessary to set them separately

const widths = [44, 240, 400, 480]; const heights = [200, 300]; . {... theme: { width: { ... widths.reduce((pre, cur) => { pre[cur] = cur + 'px'; return pre }, {}) }, heights: { ... heights.reduce((pre, cur) => { pre[cur] = cur + 'px'; return pre }, {}) }, } }Copy the code
  • colors

In general, the color also needs to be modified

By default, these colors are automatically shared by all color-driven feature classes such as textColor, backgroundColor, borderColor, and so on.

This configuration generates a style similar to the following

  • fontSize

It is recommended to configure an array with the first point being the font and the second point being the line height

const fontSizes = [0, 36, 40, 48, 56, 64]; . {theme: {fontSize: {/ / font size and line height, 12 point font 1 row high sm: [" 24 px ", "24 px"], / / minimum 12, 12 cannot guarantee base: [" 28 px ", "40 px"], lg: ["32px", "48px"], // The above three are the main font names in the project, and the other special font names are not numbers... fontSizes.reduce((pre, cur) => { pre[cur] = [cur + "px", 1]; return pre; }, {}),},}}Copy the code
  • Extend: does not override the original style

The colors configured above will override the original configuration. Usually, the color of the text will overlap with the other fill colors, so you can use the colors inherited from the colors to create a separate color for the text for certain purposes

plugins

You can use this API when you need to add custom styles, such as setting base styles (Preflight), component styles, and so on

variant

Variants can be understood as prefixes for certain scenarios, such as hover, focus, or you can configure custom variants based on the document

(Note that transform must be set when the variant uses transform.)

Customize styles in CSS

In addition to extending styles in tailwind.config.js, you can also extend them with functions and directives in YOUR CSS for a simpler way of writing

@layer

Add the base style, equivalent to addBase and addComponents for plugins

@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; }}Copy the code
@layer components { .btn-blue { @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; }}Copy the code

Variants, screens, and responsive

All three are designed to add some extra functionality to your custom styles, such as some variants such as Focus, a blackout of a media query, and the generation of a corresponding series of column responsive styles