前言

真实项目中, 通常搭配 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. 解决方案 | Adobe Acrobat XI Pro 右键菜单“在Acrobat中合并文件”丢失的最佳修复方法

    1.问题 Adobe Acrobat XI Pro右键菜单"转换为Adobe PDF"与"在Acrobat中合并文件" 不见了. 2.解决方案 桌面左下角搜索& ...

  2. oeasy教您玩转vim - 47 - # 使用标记

    ​ 使用标记 回忆上节课内容 有了这个range.address我们可以做很多事情 跳转:44 复制和剪切 1,3d 3,$y %d o 配合搜索 /oeasy/,$y 5;/oeasy/d 其实还有 ...

  3. 暑假java自学进度总结02

    一.今日所学: 1.配置环境变量 在系统内配置java路径后,再在path中 利用系统路径配置Java编译工具和运行工具路径. 2.下载并安装Natepad++,并且配置相关设置 3.初步了解了Jav ...

  4. Cython与C函数的结合

    技术背景 在前面一篇博客中,我们介绍了使用Cython加速谐振势计算的方法.有了Cython对于计算过程更加灵活的配置(本质上是时间占用和空间占用的一种均衡),及其接近于C的性能,并且还最大程度上的保 ...

  5. 写写Redis十大类型zset的常用命令

    其实这些命令官方上都有,而且可读性很强,还有汉化组翻译的http://redis.cn/commands.html,不过光是练习还是容易忘,写一写博客记录一下 从zset类型开始写||zset类型适合 ...

  6. Scratch源码下载 | 3D钻石

    程序说明: <3D钻石>是一个利用Scratch平台创作的独特艺术作品.此程序在屏幕上呈现一个精致的3D钻石模型,允许用户通过鼠标操作来旋转和查看钻石的不同角度.该程序还提供了修改钻石参数 ...

  7. Mac端MySQL安装教程

    Mac端: 1.安装 **        首先进入官网:**https://dev.mysql.com/downloads/mysql/ 根据自身情况是M系列芯片(ARM版)还是Intel系列芯片(x ...

  8. Android studio报错：Failed to allocate a 3213123 byte allocation with 31231 free bytes and 189MB ontil 0OM

    这个问题是运行内存超了 在AndroidManifest中加入 android:hardwareAccelerated="false"android:largeHeap= &quo ...

  9. web3产品介绍：mask将Web3的隐私和优势引入像Facebook和Twitter这样的社交媒体平台

    介绍: Mask Network是一个开源的浏览器扩展,将Web3的隐私和优势引入像Facebook和Twitter这样的社交媒体平台.它是一个功能强大的工具,允许用户在社交媒体上享受区块链的隐私保护 ...

  10. CentOS-7离线安装net-tools

    1.下载相关安装包 CentOS-7 所有rpm包的仓库地址:https://vault.centos.org/7.9.2009/os/x86_64/Packages/ net-tools-2.0-0 ...