There are some unknownAtRules in vscode@apply

  1. Disable CSS verification for VScode and Vetur

.vscode/settings.json

{
    "less.validate": false,
  "scss.validate": false,
  "css.validate": false,
  "vetur.validation.style": false,
}
Copy the code
  1. Use the stylelint to verify the CSS rule configuration
  • Vscode installs the stylelint plug-in
  • npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-scss
  • Create stylelint.config.js in the root directory
const tailwindAt = ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'layer'];
module.exports = {
  extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
  plugins: ['stylelint-scss'],
  ignoreFiles: ['node_modules/**', 'dist/**'],
  rules: {
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: tailwindAt,
      },
    ],
    'selector-max-id': null,
    'selector-class-pattern': null,
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
    'no-irregular-whitespace': null,
    'no-invalid-position-at-import-rule': null,
    'declaration-block-no-duplicate-custom-properties': null,
    'no-duplicate-selectors': null,
    // ::v-deep
    'selector-pseudo-element-no-unknown': null
  },
};

Copy the code

Tailwind base, Utilities, components

Although both are global atomic, there is a semantic difference, and this difference is also important. Base comes with the global reset style, utilities comes with various function styles, Tailwind is mostly functional, Components only come with. Container @tailwind Base is going to introduce the styles that are added to @Layer Base and addBase as well as @tailwind Utilities and Components

Tailwind should be configured to comply with these semantic differences

Boundary and fit with SCSS

Many projects simply use tailwind to configure and combine its atomic styles, but features such as mixins in SCSS are still irreplaceable in some scenarios, such as:

@mixin ellipsis($line: 2, $line-height: 1.2) {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line; line-height: $line-height; }Copy the code

In practice, it is recommended that variable definitions such as spacing, color and size be handed to Tailwind, and function definitions be handed to SCSS tailwind’s variables + SCSS mixins with style-resources-loader

 .btn {
        width: 126px;
        height: 56px;
        line-height: 56px;
        padding: 0;
        border: 0;
        right: -33px;
        @include fix-border-1(theme('textColor[tip]'), 12px);
      }
Copy the code

Also recommended to install Color Highlight plugin, in JS can also see the Color effect