Reason & Preface
- If you haven't heard of it tailwindcss Please return first. This article doesn't talk about what tailwindcss is and how to use it, but how to use it gracefully.
If you have heard of it, please continue reading and consider using tailwindcss, because after reading it:
- Development: it may save you and even your front-end team a lot of style writing time, and it can also greatly improve your or your project development experience
- Production: the proportion of style code in the package volume of your project will suddenly drop, and then tend to remain unchanged.
Do you really need css preprocessor
Maybe most students should use scss, less, stylus when developing or maintaining a project css preprocessing languages, and even a variety of preprocessing languages are used in a single project, which may be for the use of variables, for the convenience of reusing styles, or for the convenience of writing some functions to facilitate our processing of some style values, but most of the time, we are to write nested styles, in short, to improve our development efficiency, All this was so beautiful before tailwindcss appeared. Until we met tailwindcss, you will find that you don't even need to configure stylelint, because you may not need to write css at all
How & Which Version
tailwindcss v2 vs v3
If your project needs to be compatible with IE, please use v2 version. If not, please go to v3 version
Please be sure to check the official website document on how to use tailwindcss in your project v2 Chinese v3English , it is recommended to add based on postcss
Install vscode plug-in
If you decide to use tailwindcss, install bradlc Vscode tailwindcss, an official plug-in, provides the ability to prompt, complete and view the actual style
Configure your tailwind
If you have created tailwind. Com according to the documentation tutorial config. JS file, then we will further configure this file
PC end project
If your project is only aimed at PC web pages, you may only need to ask your design classmates what are some basic design principles in your project, such as some theme colors that will be used, font size, gradient, internal and external margin size, gradient, commonly used border fillet size, gradient, border width and gradient. If the design classmates do not have these principles, Just negotiate these basic principles, such as which colors will be used, and the margin unit is generally set according to the multiple of 4px
colour
If the design students provide the theme colors in the project and have semantic names, such as semantic colors such as success, info and warning, we can configure our colors based on these, including but not limited to font, background, border and shadow colors (after configuration, we can directly use classes similar to text success to set the colors), It can replace the variable function of css preprocessor
// tailwindcss v3
const colors = {
'success': '#654321'，
'info': '#123456',
'warning': '#666666',
// ...
}
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
// ...
colors,
},
plugins: [],
}
// tailwindcss v2
const colors = {
'success': '#654321'，
'info': '#123456',
'warning': '#666666',
// ...
}
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
// ...
textColor: colors,
backgroundColor: colors,
borderColor: colors,
},
plugins: [],
}There are some differences between v2 and v3 versions. The specific color of v2 needs to be specified.
Spacing & width & height & row height & fillet & border width
Because the configuration related to the default length of tailwindcss is based on rem, and most of the projects on the PC side are fixed with a width and left and right blank, in most cases, the design draft will be within a fixed width, and the size, width and height margins of the elements are px, so we need to make some specific configurations for the default to adapt to our projects
const spacing = {
0: 0,
4: '4px',
8: '8px',
12: '12px',
// ... All commonly used in the project can be configured
}
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
// v3 & v2
spacing,
lineHeight: spacing,
borderWidth: spacing,
borderRadius: spacing,
},
plugins: [],
}Mobile terminal adaptation scheme
Maybe the popular solution for mobile terminal adaptation is the viewport solution, or some projects still use the flexible solution, but we don't want to convert PX to rem or vw manually. Although the community also has postcss plug-ins like pxtorem or pxtovw, the solution to the problem is not elegant enough. It may be because the plug-ins are not actively maintained, or the plug-ins are not easy to use, Incompatible with postcss8(pxtovw means you 😤)， Now that we all have tailwindcss, let's make these configurations simpler! If your design classmates provide common spacing schemes, such as multiples of 4px or multiples of 6px, now assuming that the design drafts of your design classmates are 750px, we can write two function methods to deal with the tasks of pxtorem and pxtovw based on this. If you are flexible, use pxtorem, and if you are the adaptation scheme of viewport, use pxToVmin.
function pxToRem(variable) {
return `${variable / 75}rem`
}
function pxToVmin(variable) {
return `${variable / 7.5}vmin`
}
// flexable
const fontSize = {
12: pxToRem(12),
14: pxToRem(14),
16: pxToRem(16),
...
}, spacing = {
0: 0,
4: pxToRem(4),
8: pxToRem(8),
12: pxToRem(12),
...
}
// viewport
const fontSize = {
12: pxToVmin(12),
14: pxToVmin(14),
16: pxToVmin(16),
...
}, spacing = {
0: 0,
4: pxToVmin(4),
8: pxToVmin(8),
12: pxToVmin(12),
...
}
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
// ...
fontSize,
spacing
},
plugins: [],
}Of course, the fillet size and border width can be configured in this way. Is it much more elegant than using plug-ins
Nested syntax
Some students may have a special liking for the nested syntax of css preprocessor. Is it OK in tailwindcss? Arrange!
tailwindcss has a plug-in called @tailwindcss/nesting , some based on the official website to configure It should be noted that the document is to configure tailwindcss/nesting for postcss. In fact, you need to configure @ tailwindcss/nesting, and then you can provide nesting based on css. Try it~
Truncation after fixed number of rows
Sometimes in order to write a text, we will stage after x lines and display We need to write several lines of style code, so we usually define such a scss tool function
@mixin ellipsis($line: 1, $substract: 0) {
@if $line==1 {
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
}
width: 100% - $substract;
overflow: hidden;
}tailwindcss provides proprietary plug-ins for this special case @tailwindcss/line-clamp , just install it, and then install it in tailwind config. JS can be imported from plugins
Install plug-ins
npm install -D @tailwindcss/line-clamp
to configure
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/line-clamp'),
],
}use
<div class="line-clamp-3"> <!-- ...3 Post row truncation --> <div>
multiple-topic
You may be maintaining a project that needs to support multiple themes. There are multiple color schemes in different cases. It will be as simple as suffocating to implement multi theme color matching in tailwindcss with css var:
Configure the theme in your global css file. Suppose we have three different theme colors: success, info and warning
/* global base css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// Default theme
:root {
--success: 5 193 174;
--info: 51 163 238;
--warning: 237 214 18;
}
// Color matching for theme 1
.theme-1 {
--success: 36 195 102;
--info: 54 143 255;
--warning: 234 209 27;
}
// Color matching for Theme 2
.theme-2 {
--success: 57 209 121;
--info: 0 186 255;
--warning: 234 209 27;
}Then go to our tailwind config. JS to change our color configuration
// Let our colors support transparency settings
function withOpacityValue(variable) {
return ({ opacityValue }) => {
return opacityValue === undefined
? `rgb(var(${variable}))`
: `rgb(var(${variable}) / ${opacityValue})`
}
}
const colors = {
success: withOpacityValue('--success'),
info: withOpacityValue('--info'),
warning: withOpacityValue('--warning'),
// ...
}
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
// ...
colors,
},
plugins: [require('@tailwindcss/line-clamp')],
}Finally, set your theme according to different situations. Just set the corresponding class for the top-level element of the theme to be set. All internal color styles will change according to the specific theme!
<!-- Default theme --> <div> <!-- ... --> </div> <!-- Topic 1 --> <div class="theme-1"> <!-- ... --> </div> <!-- Topic 2 --> <div class="theme-2"> <!-- ... --> </div>
Some best practices
If some element styles are particularly complex, resulting in long and messy html code, how to optimize? You can provide it through tailwindcss @apply Instructions represent a series of styles through a semantic class
<div class="complex-node">xxxx<div> // ... <style> .complex-node { @apply flex m-3 text-success rounded ....; } </style>I have some styles that are universal, such as buttons and cards. How can I maintain them? You can provide it through tailwindcss @layer The instruction will compare the general style layer to the components layer as the component level style, so as to achieve the purpose of global reuse
@layer components { .btn-blue { @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; } }My project is maintained by many people. How can I ensure that the atomized style class names have a reasonable order? For example, you like to write width and height first and then position, but your colleagues are opposite to you. How to formulate a specification? tailwindcss provides a prettier plug-in prettier-plugin-tailwindcss , you can standardize the formatting of different member write style classes by installing the plug-in and updating the configuration after saving
npm install -D prettier prettier-plugin-tailwindcss
Create a new profile prettierrc.json type {} to configure according to the original configuration of your project. If it is a personal project, it can also be configured according to your personal preferences, and then install esbenp. JSP in vscode Prettier vscode plug-in, then open your setting search format, check both Format On Paste and Format On Save, and you can automatically sort the order of your style classes after saving. By default, the sorting rules are sorted according to the rules of css box model from outside to inside:
margin - border - padding - content
summary
I just talked about the ability of tailwindcss for the part I usually use. In fact, there are still many abilities that have not been mentioned. For example, some settings for the style of printed pages, hover, active, pseudo class, etc. provided by v3 are also relatively simple. Just look at the official documents when using them specifically. Maybe some buddy practice makes perfect. Tailwindcss has many basic class names to make complaints about, but not many, practice makes perfect. If you also have good configuration schemes or best practices, you can also tell me in the comment area. Finally, please like it if it's useful. Please pay attention if you like it. I'm Senar (public name with the same name). Thank you!
Previous contents
Basic productivity literacy of front-end development (updated irregularly in the later stage)
Dear frontend developer s, the time is ripe. Let's start using pnpm