CSS – 单侧环境 (stylelint, prettier, tailwind)

前言

真实项目中, 通常搭配 Webpack 之类的工具使用: Webpack 学习笔记

这篇记入的是单元测试的环境

 

参考: 

Get started with Tailwind CSS

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

搞定

 

posted @   兴杰  阅读(382)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2018-01-31 Angular 学习笔记 ( 链接服务器 )
点击右上角即可分享
微信分享提示