前言

真实项目中, 通常搭配 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

搞定

CSS – 单侧环境 (stylelint, prettier, tailwind)的更多相关文章

  1. CSS代码检查工具stylelint

    前面的话 CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简 ...

  2. Swift中空合运算符、闭区间运算符、单侧区间、半开区间

    空合运算符(Nil Coalescing Operator) 用于取代3目判空运算,提供超短的写法比如常规判空写法如下,反正我写java就是这么干的 var anOptionalInt: Int? = ...

  3. ASP.NET Core on K8S学习初探（1）K8S单节点环境搭建

    当近期的一个App上线后,发现目前的docker实例(应用服务BFF+中台服务+工具服务)已经很多了,而我司目前没有专业的运维人员,发现运维的成本逐渐开始上来,所以容器编排也就需要提上议程.因此我决定 ...

  4. Windows Server 2008搭建单域环境

    前言 一个典型的单域环境由主机,DC(Domain Controller域控制器).DNS服务器组成.DNS.DC都可以有多个,以实现负载均衡和容错 域中的计算机通过DNS解析域控制器,然后向域控制器 ...

  5. 估计量|估计值|矩估计|最大似然估计|无偏性|无偏化|有效性|置信区间|枢轴量|似然函数|伯努利大数定理|t分布|单侧置信区间|抽样函数|

    第二章 置信区间估计 估计量和估计值的写法? 估计值希腊字母上边有一个hat 点估计中矩估计的原理? 用样本矩来估计总体矩,用样本矩的连续函数来估计总体矩的连续函数,这种估计法称为矩估计法.Eg:如果 ...

  6. KingbaseES V8R3 备份恢复案例之--单实例环境sys_rman脚本备份案例

    案例说明: sys_rman是KingbaseES数据库的物理备份工具,支持数据库的全备和增量备份,由于sys_rman工具使用需要配置多个参数,对于一般用户使用不是很方便.为方便用户在Kingbas ...

  7. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  8. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

  9. 基于minikube快速搭建kubernetes单节点环境

    一.说明 本文主要介绍在 Centos7 环境下基于 Minikube 来快速部署 Kubernetes 单节点集群环境,并在浏览器上访问部署在 k8s 上的 dashboard 服务. 二.Mini ...

  10. Ubuntu15.04 网站服务器环境搭建，php/html/css等学习环境搭建教程

    ---恢复内容开始--- 本文部分参考自:http://www.cnblogs.com/emouse/archive/2013/06/07/3124009.html 原文中存在少量错误,已改正. 首先 ...

随机推荐

  1. [oeasy]python0068_ 字体样式_正常_加亮_变暗_控制序列

    字体样式 回忆上次内容 上次了解了一个新的转义模式 \33 逃逸控制字符 esc esc 让输出 退出标准输出流 进行控制信息的设置 可以清屏 也可以设置光标输出的位置 还能做什么呢? 可以设置字符的 ...

  2. WebAPI规范设计——违RESTful

    本文首先简单介绍了几种API设计风格(RPC.REST.GraphQL),然后根据实现项目经验提出WebAPI规范设计思路,一些地方明显违反了RESTful风格,供大家参考! 一.几种设计风格介绍 1 ...

  3. ComfyUI进阶：Comfyroll插件 (六)

    ComfyUI进阶:Comfyroll插件 (六) 前言: 学习ComfyUI是一场持久战,而Comfyroll 是一款功能强大的自定义节点集合,专为 ComfyUI 用户打造,旨在提供更加丰富和专业 ...

  4. 浅谈 I/O 与 I/O 多路复用

    1.基础知识 网络编程里常听到阻塞IO.非阻塞IO.同步IO.异步IO等概念,总听别人聊不如自己下来钻研一下.不过,搞清楚这些概念之前,还得先回顾一些基础的概念. 下面说的都是Linux环境下,跟Wi ...

  5. 简单认识APP项目

    manifests:里面只有一个xml,是app运行配置文件 清单文件 <?xml version="1.0" encoding="utf-8"?> ...

  6. 使用Transformer模型实现四足机器人控制—— 跨模态Transformer: LocoTransformer —— LEARNING VISION-GUIDED QUADRUPEDAL LOCOMOTION END-TO-END WITH CROSS-MODAL TRANSFORMERS

    论文: LEARNING VISION-GUIDED QUADRUPEDAL LOCOMOTION END-TO-END WITH CROSS-MODAL TRANSFORMERS 发表于ICLR20 ...

  7. Intel因特尔10700k CPU的核显驱动

    下载地址: https://www.intel.cn/content/www/cn/zh/download/776137/intel-7th-10th-gen-processor-graphics-w ...

  8. python高性能计算：cython使用openmp并行（示例）

    y.pyx import cython from cython import parallel from cython.parallel import prange cdef int i cdef i ...

  9. 【转载】 Python Pillow 和 cv2 图片 resize 速度的比较

    原文地址: https://zhuanlan.zhihu.com/p/91078855 -------------------------------------------------------- ...

  10. gym.wrappers.Monitor报错，无法使用

    使用gym中的录制功能,报错,具体: >>> import gym >>> gym.wrappers.MonitorTraceback (most recent c ...