前言

真实项目中, 通常搭配 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. 在windows双系统中，nginx配置虚拟域名

    比如在ubuntu系统中,nginx配置了域名www.abc.com, 那么需要在终端 sudo vim /etc/hosts文件中配置域名,如下: 127.0.0.1 www.abc.com 即可访 ...

  2. BS架构和CS架构应用

    概述     B/S结构即浏览器和服务器结构.它是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户工作界面是通过WWW浏览器来实现,极少部分事务逻辑在前端(Br ...

  3. oeasy教您玩转vim - 11 - # 向前向后

    向前向后 回忆上节课内容 我们上次强化了起手势 回忆了基本的移动方式 hjkl 除 hjkl 外,据说还有更厉害的移动方式 是什么呢? 下素材 #这个素材,我们下载过,重温一下 wget github ...

  4. oeasy教您玩转vim - 83 - # 表达式Expression

    ​ 表达式 expression 回忆 关于 函数function ,我们回忆一下 可以查询 可以新建 可以调用 还可以删除 我想用 函数function 往 buffuer 里面写点东西 比如写一个 ...

  5. SP12304 题解

    原题链接 | 题解链接 本篇题解为此题最较简单做法及最较少码量, 并且码风优良, 请放心阅读. 题目简述 当 \(i\) 的所有正因数和 \(=\) \(n\) 时, 其中 \(i\) 的最小值. 思 ...

  6. 前端太卷了，不玩了，写写node.js全栈涨工资，赶紧学起来吧！！！！！

    首先聊下node.js的优缺点和应用场景 Node.js的优点和应用场景 Node.js作为后端开发的选择具有许多优点,以下是其中一些: 高性能: Node.js采用了事件驱动.非阻塞I/O模型,使得 ...

  7. [rCore学习笔记 011]第1章作业题

    编程题 第一题 在homework文件夹下创建homework-1-1,使用cargo创建工程: cargo new getFileName 在src下创建file_name.rs文件: // /ho ...

  8. C# 自定义泛型二维数组

    public class Array2D<T>{ public int Width { get; } public int Height { get; } public T[] Data ...

  9. Python pluggy框架基础用法总结

    代码为例进行说明 实践环境 Python 3.6.5 pluggy 0.13.0 例1 注册类函数为插件函数 #!/usr/bin/env python # -*- coding:utf-8 -*- ...

  10. JavaScript 监听组合按键

    JavaScript监听组合按键   by:授客 QQ:1033553122 1.   思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,ct ...