Vue3 Development Solutions(Ⅰ)

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

1. Customized, high-availability front-end style processing solution

Pain points in CSS processing under enterprise-level projects：

• Unified variables are difficult to maintain
• Lots of className overhead
• The writing burden caused by the separation of HTML and CSS
• Responsive, theme switching is complex to implement

For more pain points, see CSS Utility Classes and “Separation of Concerns”

In response to the above problems, we can solve it through tailwindcss. Let’s look at its specific usage below.

Installation

yarn add tailwindcss postcss autoprefixer -D

Initializes the tailwindcss.config.js configuration file and also creates the postcss.config.js file.

// -p This represents creating a basic configuration file.
npx tailwindcss init -p

// tailwindcss.config.js
/** @type…