将 TailwindCSS 转换为原生 CSS？

Question

我收到了一个使用 TailwindCSS 编写的 html 文件，我正在尝试找出如何将所有内容转换为原生 CSS。

我找到了一个只能执行该类的转换，但这需要我手动从代码中提取数千个类，然后重新粘贴它。是否有一些工具可以让我上传整个 html 文件，然后它会为我生成 CSS 版本，还是我必须手动进行整个转换？

我更喜欢在线的东西，因为我不想安装一堆第三方工具，学习那里的系统，进行转换，然后卸载所有东西。

Answer 1

将您的

html code

粘贴到

tailwind-playground

您可以在

generated css files

选项卡中访问 css。

示例

根据tailwind-css文档

当您在 CSS 中包含 @tailwind base 时，Tailwind 会自动注入这些样式（生成的 css 的前 552 行）

您可以通过在

preflight = false

 中设置 

tailwind.config.cs

来删除这些基类

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Answer 2

您可以使用此工具：https://tailwind-to-css.vercel.app/ 将 tailwind CSS 类转换为普通 CSS。

Answer 3

解决方案

我看到只有在线工具可用。我创建了一个 PostCSS 脚本，可以从 TailwindCSS 生成所需的

output.css

，而不需要任何

input.css

。对于我的示例，我使用了以下

index.html

：

<!-- index.html -->

<div class="text-center text-red-500 font-bold text-[2rem] lg:text-[4rem] lg:text-left">
  Hello, World!
</div>

由于我们将使用PostCSS和TailwindCSS，所以让我们将它们安装在项目的根目录中。

npm install postcss tailwindcss

创建您自己的

tailwind.config.js

并进行自定义。

// tailwind.config.js

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

让我们创建我们的

convert-tailwind-to-css.js

文件，其中 PostCSS 将根据 TailwindCSS 属性生成文件 output.css。

默认情况下，这将使用 4 个空格生成，但我集成了一个功能，允许您将其替换为任意数量的空格（在我的例子中：

2

）。当然，如果您打算稍后缩小它，这可能被认为是不必要的步骤。

// convert-tailwind-to-css.js

import { fileURLToPath } from 'url';
import { dirname, resolve } from 'path';
import fs from 'fs';
import postcss from 'postcss';
import tailwindcss from 'tailwindcss';

// Generated CSS indent spaces count
const indentSpaces = 2;
// Generated CSS output file
const outputCSS = './output.css';

// Load tailwind.config.js
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const configPath = resolve(__dirname, './tailwind.config.js');

// Convert Tailwind CSS to native CSS
postcss([ 
  tailwindcss(configPath),
])
  .process('@tailwind utilities; @tailwind components;', { from: undefined })
  .then((result) => {
    // Format and write the CSS output
    const formattedCSS = result.css
      .replaceAll(' '.repeat(4), ' '.repeat(indentSpaces)) // Handle indentation
      .replace(/([^{;\s]+:[^;}]+)(\s*?)\n(\s*})/g, '$1;\n$3'); // Insert semicolon before newline and closing brace, preserving indentation
      
    fs.writeFileSync(outputCSS, formattedCSS, 'utf8');
    console.log(`Native CSS generated: ${outputCSS}`);
  })
  .catch((err) => console.error('An error occurred:', err));

node convert-tailwind-to-css.js

我的解决方案的预期结果：

.text-center {
  text-align: center;
}
.text-\[2rem\] {
  font-size: 2rem;
}
.font-bold {
  font-weight: 700;
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
@media (min-width: 1024px) {
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-\[4rem\] {
    font-size: 4rem;
  }
}

Answer 4

🎉查看https://www.webdevheaven.com/tools/css/tailwind-to-css — 这是一个免费工具，支持 tailwind.css 和 tailwind.config.js/ts。

它处理整个 HTML 文件，识别所有 Tailwind 类，并将它们转换为标准 CSS。输出包括两个单独的文件：一个包含所有新生成的样式的 CSS 文件和一个引用该 CSS 文件的更新的 HTML 文件。