Read this article two days ago juejin.cn/post/691707… , introduced the concept of atomic CSS, and also introduced a new CSS library, tailwindcss, today to write how to use in vue.

What is atomic CSS

Unlike common rules such as BEM, atomic CSS is split, and all CSS classes have a unique CSS rule. For example, the following

.w-full{
  width:100%;
}
.h-full{
  height:100%;
}
Copy the code

This one is not

.w&h-full{
  width:100%;
  height:100%;
}
Copy the code

When we use it, we just write the class name

<html>
	<body>
    	<div id="app" class="w-full h-full">
        	
        </div>
	</body>
</html>
Copy the code

Advantages and disadvantages of atomic CSS

Reduces CSS volume and improves CSS reuse

I don’t know how you write CSS, but I just gave it a name, and I just wrote it, like app, right

#app{
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}
Copy the code

This is fine, but as you write more and more, you’ll find that you need to write flex a lot, width a lot. If you use sass in your project, you might write a lot of @include, which is essentially atomic CSS

Reduce naming complexity

ClassName, variable name is really troublesome, and after a long time it is easy to forget, and have to review the code.

Increased memory costs

Once you’ve split CSS into atoms, you’ll have to remember some classes to write, even if tailwindcss provides a perfect toolchain. If you write background, remember that it starts with bg.

Added complexity to HTML structures

I’ll rewrite the above app using tailwindcss and it will look like this

<div id="app" class="w-full h-full flex flex-col justify-center items-center">
Copy the code

Semantically, of course, seems like a good idea. At the time, when the entire DOM was class names like this, it was bound to cause debugging problems, and sometimes it was difficult to locate specific CSS problems

You still need a class name

For most properties, you can just use center,auto, 100%, but sometimes you still need to set different values, such as left, top, and you also need a class name

Configure in VUE

You need to install it first. Note the version. Since tailwindcss 2.x requires postcss8, the current vue cli postcss version is still 7. NPM [email protected] – I D

Then need to configure the postcss. Config. Js, I tested many times, to find and configure tailwindcss, purgecss, pxtorem, purgecss is also a useful plug-ins, back to say again.

const tailwindcss = require("tailwindcss");
const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);
const pxtorem = require('postcss-pxtorem') ({rootValue: 100.// The result is: design element size /16, for example 320px width, the final page will be 20rem
  propList: [The '*']})const purgecss = postcssPurgecss({
  content: [ `./public/**/*.html`.`./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/
      [^]+?>.' ')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  whitelist: [].whitelistPatterns: [ 
    /-(leave|enter|appear)(|-(to|from|active))$/./ ^ (? ! (|. *? :)cursor-move).+-move$/./^router-link(|-exact)-active$/./data-v-.*/./van-.*/ // This is where I introduced vant, so I need to exclude all van starting styles]});module.exports = {
  plugins: [
    tailwindcss,
    pxtorem,
    purgecss // Remove the environmental judgment
    / /... (process.env.NODE_ENV === "production" ? [purgecss] : []),]};Copy the code

Some configuration issues have been found recently, and are updated here

  • Purgecss only works in production mode by default, which may cause inconsistency between local and online. It is recommended to remove environment judgment, although local development is slower
  • If you use a third-party component library, PurgECSS may automatically remove component styling issues. It is recommended to change the whitelist

Then you need to introduce the corresponding tailwindcss module, which has three main modules

  • Base: CSS reset: resets the default properties
  • Components: Some component styles
  • Utilities: The most common style wrapper

Therefore, we need to introduce this tool class, I suggest directly in the main, js, the introduction of the import “tailwindcss/utilities. CSS” in order to facilitate the writing and suggested corresponding vscode plug-in installation.

Configuration purgecss

After you install, you will notice that the package size has increased a lot. This is because the entire tailwindcss is packaged directly. Purgecss will automatically remove unused CSS and directly reduce the size of the CSS. During the configuration, follow the preceding configuration file.

After using tailwindcss, it feels like a new CSS experience. I recommend you to use it in your projects. This library is well worth using.

  • Documents: tailwindcss.com/docs/font-w…