Tailwind CSS

start

不用取名字

缺点 css 基本没复用、不可避免 css 的死代码存在、

某些方便操作：列 columns-3、网格 grid、主题(透明色)、3 行后截断 line-clamp-3(需安装：@tailwindcss/line-clamp)

国外用得挺火，招聘要求

我们需要这样的您:

具备卓越的独立工作能力和团队协作精神，高效的学习能力和解决问题能力。
熟悉 ES6、HTML5、CSS3，精通至少一种主流开发框架 Vue/React/Angular/……
熟悉微信小程序开发规范及技术点，能独立完成小程序端系统构架、开发、运维工作。
具备前端工程化经验 Webpack/Prettier/ESLint/Typescript/Jest/Cypress/TailwindCSS/……
有良好的代码编写习惯和文档编写能力。
加分项：

分布式团队协作经验
UX/UI 设计能力
善用 GitHub、Google、StackOverflow
喜欢 Typescript，会写单元测试、集成测试
基于 GraphQL 接口的开发经验


负责开发LOGO神器的周边功能和产品，主要接触的技术栈包括 React, Vue, Typescript, Next.js 等。。。

3 年以上前端开发经验，具备互联网产品开发经验，熟悉开发对接流程
HTML 、CSS 基本功扎实；熟练掌握 javascript 、typescript
精通 React 、Vue ，理解其设计原理
熟悉 W3C 、ECMAScript 、CommonJS 、ES6 等相关技术标准
熟悉 next.js 、nuxt.js ，熟悉 SSR
加分项：

熟悉 Canvas 、SVG ，或者有平面图形开发经验
熟悉 Tailwindcss 对前端技术有强烈的兴趣，喜欢钻研；
具备产品思维，基本的设计美感

认知

目的：科普性质（知道自己不知道）、可以在简历上写上了解 tailwindcss

后期如有需要，需要对照官网多熟悉下 class，达到熟练程度，相信会很快

安装及初始化

1. 从 cli 开始

npx create-react-app day1

2. 安装所需要的库

postcss 通过它实现 css 插件功能，autoprefixer 自动补全浏览器前缀

npm install -D tailwindcss postcss autoprefixer

3. 初始化 tailwind 配置

npx tailwindcss init -p

4. 添加目录

tailwindcss.config.js 添加如下

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. 添加颜色变量

公共 css 文件

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-base: 61, 61, 61;
    --color-purple: 103, 102, 201;
    --color-red: 255, 46, 133;
    --color-blue: 42, 152, 254;
    --color-gray: 235, 235, 235;
    --color-link: 123, 122, 255;
  }
}

tailwind.config.js 变成如下，也可以直接写颜色也有作用，但是当用到透明度的时候会不起作用，所以才要加入透明的参数，而不同颜色格式对应的 css 变量格式不一样，<alpha-value> 是内置的一个固定字符串，会被替换为透明度，也支持函数的写法

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        base: "rgba(var(--color-base), <alpha-value>)",
        purple: "rgba(var(--color-purple), <alpha-value>)",
        red: "rgba(var(--color-red), <alpha-value>)",
        blue: "rgba(var(--color-blue), <alpha-value>)",
        gray: "rgba(var(--color-gray), <alpha-value>)",
        link: "rgba(var(--color-link), <alpha-value>)",
      },
    },
  },
  plugins: [],
};

6. 安装 prettier 插件

安装

npm install -D prettier prettier-plugin-tailwindcss

prettier.config.js

module.exports = {
  tailwindConfig: "./styles/tailwind.config.js",
};