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