如何将外部css导入到Tailwind的app.css中

Question

我正在尝试使用包含 css 的第 3 方 node_nodules，我尝试以各种方式将其导入混音应用程序中的 tailwinds app.css 中。Tailwind CSS 内容正在导入并且工作正常。

关于我做错了什么有什么想法吗？

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

/* DID NOT WORK: */
/* @import '/node_modules/swiper/swiper-bundle.css';
   @import '/node_modules/swiper/swiper-bundle.min.css';
   @import '/node_modules/swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import 'swiper/swiper-bundle.css';
   @import 'swiper/swiper-bundle.min.css';
   @import 'swiper/swiper.min.css'; */

/* DID NOT WORK: */
/* @import '~swiper/swiper-bundle.css';
   @import '~swiper/swiper-bundle.min.css';
   @import '~swiper/swiper.min.css'; */

我的 post.config.js 如下所示：

    module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

当我尝试在 remix 中执行 npm run build 时，它只会将输出作为导入语句的字符串：

Answer 1

不确定这个问题是否已经得到解答，但我发现使用 postcss-import 和 tailwind （也使用 Remix Vite SPA）解决了我的问题。在 postcss.config.js 文件中，确保具有以下内容：

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

从那里，确保正确设置导入，因为这确实使用严格的 CSS 导入，如下详细信息： https: //tailwindcss.com/docs/using-with-preprocessors#build-time-imports。

所以，我的 tailwind.css （主 css 文件）如下所示：

@import "./libraryStyles/tailwindbase.css";
/* 
  Will need to add tailwind components, utilities, etc in separate
  file if we need to use those appropriately
*/
@import "./libraryStyles/remixRootStyle.css"

其中，libraryStyles 文件夹同时包含 tailwind 基类和我从 remix github 中获取的样式。我的应用程序的 tailwindbase.css 文件如下所示：

@tailwind base;

@layer base {
    :root {
      --background: 0 0% 100%;
      --foreground: 20 14.3% 4.1%;
  
      --card: 0 0% 100%;
      --card-foreground: 20 14.3% 4.1%;
   
      --popover: 0 0% 100%;
      --popover-foreground: 20 14.3% 4.1%;
   
      --primary: 24 9.8% 10%;
      --primary-foreground: 60 9.1% 97.8%;
   
      --secondary: 60 4.8% 95.9%;
      --secondary-foreground: 24 9.8% 10%;
   
      --muted: 60 4.8% 95.9%;
      --muted-foreground: 25 5.3% 44.7%;
   
      --accent: 60 4.8% 95.9%;
      --accent-foreground: 24 9.8% 10%;
   
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 60 9.1% 97.8%;
  
      --border: 20 5.9% 90%;
      --input: 20 5.9% 90%;
      --ring: 20 14.3% 4.1%;
   
      --radius: 0.5rem;
    }
   
    .dark {
      --background: 20 14.3% 4.1%;
      --foreground: 60 9.1% 97.8%;
   
      --card: 20 14.3% 4.1%;
      --card-foreground: 60 9.1% 97.8%;
   
      --popover: 20 14.3% 4.1%;
      --popover-foreground: 60 9.1% 97.8%;
   
      --primary: 60 9.1% 97.8%;
      --primary-foreground: 24 9.8% 10%;
   
      --secondary: 12 6.5% 15.1%;
      --secondary-foreground: 60 9.1% 97.8%;
   
      --muted: 12 6.5% 15.1%;
      --muted-foreground: 24 5.4% 63.9%;
   
      --accent: 12 6.5% 15.1%;
      --accent-foreground: 60 9.1% 97.8%;
   
      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 60 9.1% 97.8%;
   
      --border: 12 6.5% 15.1%;
      --input: 12 6.5% 15.1%;
      --ring: 24 5.7% 82.9%;
    }
  }
   
  @layer base {
    * {
      @apply border-border;
    }
    body {
      @apply bg-background text-foreground;
    }
  }