前言

真实项目中, 通常搭配 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. python与c/java的异

    1.注释 #为单行注释 """ 这里是多行注释 """ ''' 这个也可以是多行注释 ''' 2.赋值 在python中赋值不需要特定变量的 ...

  2. RHCA cl210 013 制作镜像 轮转key rabbitmq追踪 写时复制 keystone多域登录图形界面

    undercloud 部署 overcloud overcloud控制节点上的组建rabbitmq 排错需要rabbitmq,开启追踪则会更详细,会消耗性能 环境问题 登录一下classroom os ...

  3. 一次url请求全过程

    一次url请求全过程 1,从宏观总体来看url请求全流程 2,从家庭实际网络架构来看一看网络是如何搭建和传输的 3,从网络七层协议的角度来看一看网络在各个层次之间的传输过程 4,从三次握手四次挥手的角 ...

  4. 第零讲：基础架构：一条SQL查询语句是如何执行的

    目录 第零讲:基础架构:一条SQL查询语句是如何执行的 正确的认识事物的方式方法(极为重要): sql语句内部的执行过程:(极为重要) MySQL 可以分为 Server 层和存储引擎层两部分. Se ...

  5. 【Spring-Security】Re07 持久化的记住我

    Security记住我功能底层实现依赖于SpringJDBC组件,如果有持久层框架的话,就由持久层框架实现 演示案例的选型,MysqlJdbc + MybatisStarter <depende ...

  6. 终端无人机武器的克星——部署反无人机干扰机之后 —— 武器AI化势在必行

    相关: 观察者网一周军评:俄乌战争对未来无人机发展影响 俄乌战争中无人机有了突出的表现,这种类似巡飞弹的无人机工具有着高可控性.易操作.廉价.易制造等优势,依靠这种攻击性的小型无人机往往具有极高的性价 ...

  7. ubuntu系统升级软件sudo apt upgrade后GPU崩溃报错，显示驱动版本不匹配——ubuntu系统版本过低导致的问题

    ubuntu系统升级软件(sudo apt upgrade)后,GPU崩溃报错,查看系统日志: Aug 2 06:25:02 lcwt rsyslogd: [origin software=" ...

  8. sublime添加GBK编码格式

    1.背景 2.步骤 Tools(工具) --->  Install Package Control...(安装控制包) 点击执行完成后继续下一步: 点击Package Control,随后搜索I ...

  9. [BJOI2016] IP地址 题解

    前言 来个不一样的做法,用到了 Trie 树和主席树,并且是可爱的在线算法. 题目链接:洛谷. 题目分析 对于一个查询 \(\texttt{ip}\),只考虑所有前缀字符串规则.以时间建里横轴,匹配长 ...

  10. Apache SeaTunnel 4月回顾：明星贡献者与技术突破

    各位热爱 SeaTunnel 的小伙伴们,SeaTunnel 社区 4 月份月报来啦!这里将记录 SeaTunnel 社区每月的重要更新,欢迎关注! 月度 Merge 之星 感谢以下小伙伴 4 月为 ...