postcss-transform-tailwindcss

PostCSS Transform Tailwindcss [postcss]

[PostCSS Transform Tailwindcss] can convert class names from less, sass, and less files to classMame in tsx and class in html

Quick start

[PostCSS Transform Tailwindcss] is a [PostCSS] plugin.
If you want to transition from semantic class names to Tailwindcss, this is a good tool.

• Install postcss-transform-tailwindcss from npm.
• Add postcss-transform-tailwindcss to your configuration. Read more on how to use and install PostCSS Transform Tailwindcss.

Usage

Add [PostCSS Transform Tailwindcss] to your project:

npm install postcss-transform-tailwindcss --save-dev

Use [PostCSS Transform Tailwindcss] as a [PostCSS] plugin:

Transform Css

npm install sass --save-dev
npm install postcss-nested --save-dev

const sass = require("sass");
const postcss = require("postcss");
const postcssNested = require("postcss-nested");
const postcssTransformTailwindcss = require("postcss-transform-tailwindcss");
const from = "project/xxx/xxx.css";
const { css } = sass.compile();
postcss([
  postcssNested(),
  postcssTransformTailwindcss(/* pluginOptions */)
]).process(css, {
  from,
  to: undefined
});

Transform Scss

npm install sass --save-dev

const sass = require("sass");
const postcss = require("postcss");
const postcssTransformTailwindcss = require("postcss-transform-tailwindcss");
const from = "project/xxx/xxx.scss";
const { css } = sass.compile();
postcss([postcssTransformTailwindcss(/* pluginOptions */)]).process(css, {
  from,
  to: undefined
});

Transform less

npm install sass --save-dev
npm install less --save-dev

const sass = require("sass");
const postcss = require("postcss");
const postcssTransformTailwindcss = require("postcss-transform-tailwindcss");
const from = "project/xxx/xxx.less";
const css = fs.readFileSync(from, "utf-8");
// https://lesscss.org/usage/
less.render(css, async (error, output) => {
  if (error) {
    console.warn("error", error);
    return;
  }
  const { css } = sass.compileString(output.css);
  const result = await postcss([postcssTransformTailwindcss(opts)]).process(
    css,
    {
      from,
      to: undefined
    }
  );
});

Transform files

npm install sass --save-dev
npm install less --save-dev
npm install globs --save-dev

const sass = require("sass");
const postcss = require("postcss");
const globs = require("globs");
const postcssTransformTailwindcss = require("postcss-transform-tailwindcss");

async function transformSass(from, opts = {}) {
  const { css } = sass.compile(from);
  const result = await postcss([postcssTransformTailwindcss(opts)]).process(
    css,
    {
      from,
      to: undefined
    }
  );
}
globs("xxx/xxx/**/*.scss", function(err, files) {
  if (err) {
    throw err;
  }
  files.forEach(path => {
    transformSass(path, {
      ratio: 2,
      fileExtensions: ["tsx"],
      removeEmptyClassName: true,
      getClassNames(classNames, merge) {
        classNames["align-items"] = merge(classNames["align-items"], {
          "align-items: top;": "items-top",
          "align-items: bottom;": "items-bottom"
        });
        return classNames;
      }
    });
  });
});

Options

ratio

The ratio option is similar to the ratio of the parameters in the Postcss-pxtransform plugin. For example, if the size is twice the size of the design draft, then ratio: 2.

postcssTransformTailwindcss({ ratio: 0 });

fileExtensions

The FileExtensions option is a collection of files that CSS needs to convert, which can be of file types such as '.jsx ','.tsx', or '.html '

postcssTransformTailwindcss({ fileExtensions: ["jsx"] });
postcssTransformTailwindcss({ fileExtensions: ["jsx", "tsx"] });
postcssTransformTailwindcss({ fileExtensions: ["html", "tsx", "jsx"] });

removeEmptyClassName

The removeEmptyClassName option is very useful during debugging to determine whether to remove the class names of the corresponding. jsx, tsx,. html files that convert CSS

postcssTransformTailwindcss({ removeEmptyClassName: true });

getClassNames

The getClassNames option is a function that takes two parameters. The first parameter is a collection of tailwincss classNames, and the second parameter is [deepmerge]（ https://www.npmjs.com/package/deepmerge ）Method, you need to return the merged classNames

postcssTransformTailwindcss({
  getClassNames(classNames, merge) {
    classNames["align-items"] = merge(classNames["align-items"], {
      "align-items: top;": "items-top",
      "align-items: bottom;": "items-bottom"
    });
    return classNames;
  }
});

Notes

• When converting HTML files, tag elements must be closed and cannot have comments. At the same time, the label 'DOCTYPE html' needs to be temporarily removed
• When dealing with. tsx or. jsx.html cross selectors, only a maximum of two will be processed, and nested descendants of cross selectors cannot be processed.
• Due to the higher priority of the media query selector in tailwindcss compared to regular atomic selectors, the effect is different.
• When dealing with situations where animations and tailwindcss do not match, you can add custom configurations in tailwind.diag.js and merge custom configurations in the getClassNames plugin
• Remember to check if the conversion is correct after completion