前言

真实项目中, 通常搭配 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]python0007-调试程序_debug

    ​ 调试程序 回忆上次内容 ​py​​ 的程序是按照顺序执行的 是一行行挨排解释执行的 程序并不是数量越多越好 kpi也在不断演化 ​ 编辑 写的代码越多 出现的bug就越多 什么是bug 如何找bu ...

  2. sql语句排序无效的问题

    数据可视化时因为数据类型排序无效的问题:这是由于你要排序的类型是String类型的而ORDER BY 方法排序要求整数型. 这就需要在ORDER BY 后加 CAST(需要排序的字段 AS UNSIG ...

  3. ClickHouse的向量处理能力

    ClickHouse的向量处理能力 引言 在过去,非结构化数据(如文本.图片.音频.视频)通常被认为难以在数据库中直接使用,因为这些数据类型的多样性和复杂性.然而,随着技术的发展,嵌入技术可以将非结构 ...

  4. （一）MOngoDB的安装与配置（Windows和Centos）

    其实Windows的安装没有什么难的,主要是后的Centos下的安装,我是在centos7上安装测试的,不管是手动安装还是脚本安装我都是成功才发出来的,有什么的问题可以留言,写博客只是为了记录和简单的 ...

  5. 《Python数据可视化之matplotlib实践》 源码 第三篇 演练 第九章

    图  9.1 import matplotlib.pyplot as plt import numpy as np fig=plt.figure() ax=fig.add_subplot(111) f ...

  6. 国产CPU，国产操作系统UOS——零刻LZX迷你主机 ， 显卡驱动安装以及屏幕配置

    看网上新闻发现了一款mini电脑--零刻LZX迷你主机 国产兆芯四核八线程 教学家用办公全能王8+256G 该款电脑使用的是国产CPU兆芯,以及国产操作系统UOS,由于价格还不贵就入手玩玩. 商品地址 ...

  7. conda环境下安装nvidia-nvcc

    参考: https://www.cnblogs.com/littletreee/p/17234053.html conda安装Pytorch或TensorFlow的时候是默认不安装nvcc,但是有时候 ...

  8. 电视家APP会员退款了 —— 网络电视APP的合规性处理

    今天打开家里网络电视的时候突然发现"电视家APP"居然无法使用了,随后发现账户关联的银行卡收到退款了,于是好奇的研究了一下这个事情. 由于家里是在农村,闭路电视的图像效果很差,估计 ...

  9. 【转载】 【Java分享客栈】我曾经的两个Java老师一个找不到工作了一个被迫转行了

      本文作者: 福隆苑居士 本文链接: https://www.cnblogs.com/fulongyuanjushi/p/16182465.html 版权声明: 本博客所有文章除特别声明外,均采用 ...

  10. java:找不到符号(使用lombok)

    1.背景 启动报错: Error:(76, 34) java: 找不到符号 符号: 方法 getOrderNo() 位置: 类型为XXXXX.request.coupon.SubmitOrderObj ...