ant-learning

入门

参考文档

QQ群：49262447
中文文档：http://tailwind.wyz.xyz
乌鸦嘴社区：https://wyz.xyz/ 有问必答。

使用tailwind的cdn

1. 安装

1.1 最简单模式

可以作为练习用，只使用了tailwindcss-cli@latest

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳✕✓✔✖

例子代码

① 快速开始

# 创建工程
mkdir myweb
cd myweb
npm init -y


# 生成tailwind.css文件
npx tailwindcss-cli@latest build -o ./dist/css/tailwind.css


# 创建index.html文件
touch dist/index.html
code .

添加html内容如下

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./css/tailwind.css" rel="stylesheet">
        <!-- ... -->
      </head>    
    <body>
        <div class="text-4xl">aa</div>
    </body>
</html>

使用vscode的插件live server，打开这个html文件，就能看到效果了。

但是有下下面的问题：

  • css文件太大，能不能把没有的样式去掉。

  • 如何监控文件变化，自动生成css文件。

② 优化css文件大小

# 添加配置文件tailwind.config.js 
npx tailwindcss-cli@latest init

修改tailwind.config.js ，添加purge

purge: ['./**/*.html'],

这里必须要添加NODE_ENV=production

# 打包
NODE_ENV=production npx tailwindcss-cli@latest build -o dist/css/tailwind.css

查看生成的tailwind.css大小，不到700行代码。

③ 自定义样式

# 添加定制的css文件
mkdir -p src/css
touch src/css/tailwind.css

编辑src/css/tailwind.css

下面自定义了一个btn的样式

@tailwind base;
@tailwind components;
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}


@tailwind utilities;

在html文件中添加

<div class='btn'>aaa</div>
# 打包
NODE_ENV=production npx tailwindcss-cli@latest build -i src/css/tailwind.css -o dist/css/tailwind.css

④ 自动编译

在终端中执行下面命令，会自动进行编译。

先安装一个htt-server。基于nodejs的http-server服务使用介绍和命令全收集

sudo npm install http-server -g

修改package.json，添加scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch":"NODE_ENV=production npx tailwindcss-cli@latest build -i src/css/tailwind.css -o dist/css/tailwind.css -w",
    "server":"http-server ./dist/",
    "start": "npm run  watch & npm run server"
  },

注释：npm scripts 使用指南。其中&表示并行；&&串行执行。

执行下面命令，就可以自动执行了

yarn start

这样就可以愉快的练习了。然后就可以用这个来学习tailwind的基本语法了。

1.2 作为PostCSS插件安装

原始代码在这里

① 是什么PostCSS？

是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

相关网址

② 快速开始

# 创建工程
mkdir postcss
cd mkdir postcss
npm init -y


npm install tailwindcss@latest postcss@latest autoprefixer@latest

在根目录新建一个postcss配置文件postcss.config.js,并且将文件内容修改为以下

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

优化css文件大小，可以见1.1章节的内容。

进行构建，修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css",
    "watch": "NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css -w",
    "server":"http-server ./dist/",
    "start": "yarn server & yarn watch "
  },

最后执行yarn start

1.3 在React中使用

在react中使用还是非常简单的，具体如下：

例子代码

① 创建react项目

npx create-react-app react-project
cd react-project/

② 安装tailwind插件

tyarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

③ 安装craco

craco有啥用？ 能在umi中使用吗？

tyarn add @craco/craco

修改package.json，将react-scripts替换成craco，替换完的效果如下：

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

创建craco.config.js

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

④ 配置tailwind

npx tailwindcss init

修改成下面的内容

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

⑤ CSS中加入Tailwind

打开 Create React App 默认为你生成的 ./src/index.css 文件

并使用 @tailwind 指令来包含Tailwind的 base，components 和 utilities 样式，替换原来的文件内容:

@tailwind base;
@tailwind components;
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}
@tailwind utilities;

⑥ 修改页面

修改App

function App() {
  return (
    <div >
      <div className="text-4xl">aa</div>
      <div className="btn">aa</div>
    </div>
  );
}
export default App;

⑦ 启动

yarn start

1.4 在Umi中配置

例子代码

① 初始化Umi

mkdir umi-project && cd umi-project
yarn create @umijs/umi-app
tyarn
yarn start
ctrl+c
code .

② 安装tailwind插件

tyarn add tailwindcss@npm:@tailwindcss/postcss7-compat

③ 修改.umirc.ts

添加插件

// 引入tailwind
  extraPostCSSPlugins: [
    require('tailwindcss')({
      config: './tailwind.config.js',
    }),
  ],

④ 配置tailwind

npx tailwindcss init

修改成下面的内容

purge: ['./src/pages/**/*.{js,jsx,ts,tsx,html}'],

⑤ CSS中加入Tailwind

src/global.css添加下面的内容

@tailwind base;
@tailwind components;
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}
@tailwind utilities;

如果不想污染全局css，那么也可以定义在一个单独的文件，进行引用。例如下面的写法

import styles from './index.less';
import tw from './tailwind.css'
export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <div className={tw["text-4xl"]}>aa</div>
      <div className={tw.btn}>aa</div>      
    </div>
  );
}

⑥ 修改页面

修改pages/index.tsx

import styles from './index.less';


export default function IndexPage() {
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <div className="text-4xl">aa</div>
      <div className="btn">aa</div>      
    </div>
  );
}

⑦ 启动

启动后，查看tailwind的样式

yarn start

⑧ 查看CSS大小

执行下面的命令

yarn build

如果生成的umi.css大于2M，那么是tailwind配置错误。实际大小在29.2k

1.5 webpack中引用

可以按照这个文档，建立一个webpack工程

① 安装tailwind所需类库

tyarn add tailwindcss@latest -D
tyarn add postcss@latest -D
tyarn add postcss-cli -D

② 配置tailwind.config.js

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

③ 配置tailwind.config.js

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

④ 撰写文件

撰写入口的js文件global.js，这个文件引用css文件，会自动添加相关的Html中的。

import 'static/css/global.css';

撰写入口的css文件global.css

@tailwind base;
@tailwind components;
.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}
@tailwind utilities;

撰写html页面

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>首页</title>
    </head>    
    <body>
        <div class="text-4xl">aa</div>
    </body>
</html>

⑤ 配置webpack.config.js文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //输出html文件的插件
const {CleanWebpackPlugin}=require("clean-webpack-plugin");//打包前清空disk的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //单独打包css
const webpack =require('webpack');


// 设置输出的变量 例如："build": "NODE_ENV=production，可以根据不同的变量打包
const devMode = process.env.NODE_ENV !== "production";




/**
 * 基本概念
 * 入口(entry)
 * 输出(output)
 * 插件(plugin)
 * 模式(mode)
 * 环境(environment)
 * devServer：模拟服务器
 * module:loader:webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块
 */
 module.exports = {
    /**
     * 配置别名，在程序中可以使用【import a from '@/a.js'】来找到地址
     */
     resolve:{
        alias:{
            '@':path.join(__dirname,'src'),
            'static':path.join(__dirname,'src/static'),
            'pages':path.join(__dirname,'src/pages'),
        }
    },


    /**
     * 哪个文件为入口起点开始打包,也可以把Html当成入口
     */
     entry:{
        global:'./src/static/js/global.js',
    },


    /**
     * 输出的资源到哪里去，叫什么名字
     * webpack默认是针对js进行输出的
     */
    output:{
        path:path.resolve(__dirname,'dist'),// 打包到dist目录下
        filename:"js/[name]_[chunkhash:8].js", //多入口文件可以使用占位符打包
    }, 
    
    mode: "development", //设置开发环境，生产模式：production   开发模式：development
    devtool:"inline-source-map", //源代码与打包后的代码的映射关系，可以了解一下sourceMap
    
    /**
     * 模拟服务器进行页面的预览
     */
     "devServer": {
        port: 3001,
        hot:false,  //官方网址说了：hot必须=false https://webpack.js.org/configuration/dev-server/#devserverlivereload
        liveReload: true,  
        proxy:{ //如果了解antDesign，那么就理解这个了,静态页面，使用这个没有用
            "/api":{
                target:"http://localhost:9092"
            }
        },
    },   


   /**
    * 插件管理
    */
    plugins:[
        
        new HtmlWebpackPlugin({
            template:"./src/pages/index.html",
            chunks:['global'],
            filename:'index.html'  
        }),




        // 打包前清除dist目录插件
        new CleanWebpackPlugin(),


        // 将css分离出来，单独打包
        new MiniCssExtractPlugin({ 
            filename:devMode ? "css/[name].css": "css/[name].[contenthash:8].css",
            chunkFilename: devMode ? "[id].css" : "[id].[contenthash:8].css",
        }),
    ],   


   /**
        模式 loader是有顺序的，从右到左，从下到上，有些顺序不对会引发错误
        loader是模块转换器，webpack默认只知道如何处理js与Json，那么其他格式的文件，例如css，图片，webpack就傻眼了。
        那只能使用loader了，下面是几种常用的loader
     */
    module:{
        rules:[
            /**
             * 处理css
             */
            {
                test: /\.(less|css)$/,  // 如果是css结尾的文件
                use: [
                    MiniCssExtractPlugin.loader, // 如果其中这个，要把style-loader
                    //"style-loader",            // 将css打入到js中
                    "css-loader", 
                    "less-loader", 
                    "postcss-loader", //兼容浏览器加兼容前缀
                ]
            },
            /**
             * 处理资源文件
             * webpack5之前我们处理静态资源比如。图片字体之类的资源的时候等，
             * 需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，
             * 这三个loader在github上也停止了更新。
             * webpack5使用四种新增的资源模块(Asset Modules)替代了这些loader的功能。
                asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
                asset/inline 将资源导出为dataURL(url(data:))的形式，之前的 url-loader的功能.
                asset/source 将资源导出为源码(source code). 之前的 raw-loader 功能.
                asset 自动选择导出为单独文件或者 dataURL形式(默认为8KB). 之前有url-loader设置asset size limit 限制实现。
                */
                {
                test: /\.(jpg|png|gif|jpeg|svg)$/,//处理图片资源
                type: "asset",//使用webpack5内置的type
                parser:{
                    dataUrlCondition:{
                        maxSize:8*1024  //data转成url的条件，也就是转成bas64的条件,maxSize相当于limit
                    }
                },
                generator:{//geneator中是个对象，配置下filename，和output中设置assetModuleFilename一样，将资源打包至imgs文件夹
                    filename:"imgs/[name][ext]"  //[name]指原来的名字，[hash:6]取哈希的前六位，[ext]指原来的扩展名
                }
            },


            /**
             * 处理字体文件
             */
            {
                test: /\.(woff2|woff)$/, //匹配字体规则
                type: "asset/resource",
            }    
        ]
    },    
 }
Edit this doc on gitee12/11/2022 05:56:54