如何使用 Tailwindcss 提取自己的类以分离文件

Posted 2023-03-07

【中文标题】如何使用 Tailwindcss 提取自己的类以分离文件

【英文标题】：How to extract own classes with Tailwindcss to separate file

【发布时间】：2020-10-24 08:40:29

【问题描述】：

我有类似 app.css 的文件

@tailwind base;
@tailwind components;
    
@import url('features/login/login.css');
    
@tailwind utilities;

在 login.css 代码中

.login-button 
  @apply w-full flex justify-center border border-transparent;

        
body 
  background-color: red !important;

正文规则有效，但登录按钮无效

如何根据我们的 css 文件中的 tailwind 类创建自己的 css 类？

谢谢

更新：添加 html 文件（它是 Aurelia-framework 模板） 原始模板

<template>
  <span class="login-button-wrapper">
   <button type="submit" class="login-button">
    Sign in
   </button>
  </span>
</template>

固定模板

<template>
<require from="./login.css"></require>
<span class="login-button-wrapper">
 <button type="submit" class="login-button">
    Sign in
 </button>
</span>
</template>

【问题讨论】：

请分享您使用过.login-button类的html代码

感谢您的重播。我找到解决方案：需要手动将 css 文件添加到模板。但我认为如果我将 app.css 链接到我的应用程序的根模块，所有自定义类都将起作用。也许它的 js 框架特性/问题

您只需将文件名更改为login.scss，然后运行php artisan dev 将其编译回.css

【参考方案1】：

您可以在顺风资产下编写自己的风格

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

.login-button 
  @apply w-full flex justify-center border border-transparent;

        
body 
  background-color: red !important;

像这样，如果更喜欢使用该文件，您也可以使用 指令之前你需要确保你已经安装了

npm install postcss-import
    

 @import url("path");
     or
  @import "path";

您需要检查路径是否正确并再次重新构建您的应用，这将起作用

【参考方案2】：

如果你使用 PostCSS，你只需要将导入行改为这个

@import "features/login/login.css";.

另外，请确保您已连接 postcss-import 插件。

https://tailwindcss.com/docs/using-with-preprocessors/#build-time-imports.