• Tailwind CSS 基本配置


    一、前言

    最近的一个项目使用了新的框架,这个框架中使用了 Tailwind CSS。对这个 CSS 的框架不是很熟悉,所以在使用过程中会遇到一些问题。

    对于这些问题记录下。

    本文章主要介绍 Tailwind CSS 的安装、基本配置等。

    二、安装

    1、安装包

    根据自己使用习惯是使用 npm 还是 yarn

    # Using npm
    npm install tailwindcss
    
    # Using Yarn
    yarn add tailwindcss

    2、引入包

    Tailwind css 分了几个基本的模块,可以按需引入自己需要的基础模块。

    基本的导入,使用 Tailwind 指令

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

    在一些项目中使用了 postcss-import 那么导入的方式是用 import

    @import "tailwindcss/base";
    
    @import "tailwindcss/components";
    
    @import "tailwindcss/utilities";

    提示:在上面这些模块中,base 模块一般不会导入,因为有些基本的样式我们是用不到的,例如 button 的 outline。

    3、创建 tailwind.config.js 配置文件

    这个是直接使用命令创建(在项目根目录下)

    npx tailwindcss init

    执行完成后会生成一个配置文件,默认是空的。

    module.exports = {
      purge: [],
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
    }

    4、用 tailwind 处理 css

    项目中使用的 webpack,所以是在 webpack 中的 postcss-loader 中配置。

    Vue CLI2.x 中这样配置:

    module.exports = {
      // ...
      module: {
        rules: [
          {
            // ...
            use: [
              // ...
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: [
                    require('tailwindcss'),
                    require('autoprefixer'),
                  ],
                },
              },
            ],
          }
        ],
      }
    }

    Vue CLI3.x 中这样配置:

    module.exports = {
    // css 配置
      css:{
        loaderOptions:{
          postcss:{
            plugins:[require('tailwindcss'),require('autoprefixer')]
          }
        }
      },
    }

    提示:对于其他环境下的配置可以参考官方文档:Tailwind 安装

    三、关于配置

    在 tailwind.config.js 配置文件中可以根据实际情况自己定义。

    1.颜色配置问题

    在实际项目中遇到的问题是这样的:使用 text-pink-700 这样的样式不生效。

    查看配置文件是这样的:

    theme: {
        colors: {
          'transparent': 'transparent',
          'black': '#22292f',
          'white': '#ffffff',
          'grey': '#9897a9',
          'grey-light': '#dae1e7',
          'red': '#EB5757'
        }
    }

    颜色自定义了几种颜色,没有 pink-700 对应的颜色,所以不生效。

    正常来说一个项目中用到的颜色不会很多,使用什么颜色配置就好。

    上面的配置中添加:'pink-700':'#b83280' 后就可以正常使用。

        colors: {
          'transparent': 'transparent',
          'black': '#22292f',
          'white': '#ffffff',
          'grey': '#9897a9',
          'grey-light': '#dae1e7',
          'red': '#EB5757',
          'pink-700':'#b83280'
        },
  • 相关阅读:
    ThinkingInJava对this关键字的介绍
    MYSQL(三)
    MySQL(二)
    mysql语句实战
    js事件委托
    Python中应该使用%还是format来格式化字符串?
    js高级知识---词法分析和AO 链
    lsof/netstat命令的一个重要作用: 根据进程查端口, 根据端口查进程
    gg
    io多路复用
  • 原文地址:https://www.cnblogs.com/zhurong/p/12942170.html
Copyright © 2020-2023  润新知