CSS – 单侧环境 (stylelint, prettier, tailwind)
前言
真实项目中, 通常搭配 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
搞定
分类:
(新) CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2018-01-31 Angular 学习笔记 ( 链接服务器 )