前言
真实项目中, 通常搭配 Webpack 之类的工具使用: Webpack 学习笔记
这篇记入的是单元测试的环境
参考:
Automatic Class Sorting with Prettier
VS Code Extension
stylelint.config.js
module.exports = { mode: 'jit', extends: ['stylelint-config-recommended', 'stylelint-prettier/recommended'], plugins: ['stylelint-scss'], rules: { 'at-rule-no-unknown': null, 'scss/at-rule-no-unknown': [ true, { ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'], }, ], 'declaration-block-trailing-semicolon': null, 'no-descending-specificity': null, 'prettier/prettier': [ true, { singleQuote: true, endOfLine: 'auto', // refer: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier }, ], }, };
prettier.config.js
module.exports = { singleQuote: true, arrowParens: 'avoid', printWidth: 100, overrides: [ { files: '**/*.cshtml', options: { // note issue: // https://github.com/prettier/prettier/issues/10918#issuecomment-851049185 // https://github.com/heybourn/headwind/issues/127 // 暂时关掉, 等 issue printWidth: Number.MAX_VALUE, }, }, ], };
package.json
{ "name": "simple-test", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "prettier-plugin-tailwindcss": "^0.1.4", "stylelint": "^14.3.0", "stylelint-config-prettier": "^9.0.3", "stylelint-config-recommended": "^6.0.0", "stylelint-prettier": "^2.0.0", "stylelint-scss": "^4.1.0", "tailwindcss": "^3.0.18", "prettier": "^2.5.1" }, "dependencies": {} }
tailwind.config.js
module.exports = { content: ['*.{html,js}'], theme: { extend: {}, }, plugins: [], };
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="dist/style.css" /> <script src="script.js" defer></script> </head> <body> <h1 class="w-52 bg-red-600 p-4 pt-2">Hello world!</h1> </body> </html>
Start
npx tailwindcss -i ./style.css -o ./dist/style.css --watch
搞定