Vue3 allows you to write page styles with twice the result with half the effort CSS framework-Unocss understanding

Introduction: Vue3 allows you to write page styles with twice the result with half the effort CSS framework-Unocss understanding

Front-end common css framework

• windicss：https://cn.windicss.org/
• tailwindcss：https://tailwindcss.com/
• tachyons：https://tachyons.io/
• unocss：https://gitee.com/mirrors/unocss

Writing styles has never been easier

• Native writing method, you need to define class or id on the tag first, and then write the style in the css style sheet

	.xd{
    
    
	  margin: 1px
	  width: 1px
	  height: 1px
	}

• Using the unocss framework, there is no need to define class or id, just write the style directly in the tag

<div m-1px w-1px h-1px> </div>

Introduction to Unocss

• Author: Anthony Fu, core development member of vue and vite
• https://zhuanlan.zhihu.com/p/425814828?utm_medium=social&utm_oi=31225867665408
• Definition: Unocss is an engine, not a framework, because it does not provide core tool classes, all functions can be provided through presets and inline configuration
• advantage
  • Intuitive and easy to customize
  • Attributed schema with no value
  • Better compatibility with other component library styles
  • Delivering flexibility without compromising performance