zoukankan      html  css  js  c++  java
  • [Tailwind] Create Custom Utility Classes in Tailwind

    In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.

    Update gulpfile.js:

    const gulp = require("gulp");
    const postcss = require("gulp-postcss");
    const tailwindcss = require("tailwindcss");
    
    const PATHS = {
      css: "./src/styles.css",
      config: "./tailwind.js",
      dist: "./"
    };
    
    gulp.task("css", () => {
      return gulp
        .src(PATHS.css)
        .pipe(postcss([tailwindcss(PATHS.config), require("autoprefixer")]))
        .pipe(gulp.dest(PATHS.dist));
    });
    
    gulp.task("default", ["css"], () => {
      gulp.watch(PATHS.config, ["css"]);
    });

    For example, you want to add some custom margin and padding in tailwind.js file:

      margin: {
        'auto': 'auto',
        'px': '1px',
        '0': '0',
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '6': '1.5rem',
        '8': '2rem',
        '16': '4rem', //added
        'crazy': '8rem', //added
      },
      padding: {
        'px': '1px',
        '0': '0',
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '6': '1.5rem',
        '8': '2rem',
        '16': '4rem', //added 
        'crazy': '16rem', //added
      },

    After run 'gulp' command.

    index.html

      <h1 class="text-purple
              bg-pink-dark
              p-crazy mt-crazy">Hello Tailwind!</h1>

    Checkout more on docs.

  • 相关阅读:
    使用Ant自动化发布web工程
    分页过滤SQL求总条数SQL正则
    Spark-Java版本WordCount示例
    Apache-Tika解析Word文档
    Apache-Tika解析JPEG文档
    Apache-Tika解析HTML文档
    Apache-Tika解析XML文档
    Apache-Tika解析Excell文档
    @RestController注解的使用
    @ResponseBody注解的使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8781217.html
Copyright © 2011-2022 走看看