代码之家 › 专栏 › 技术社区 › Unik6065

使用Vite在Laravel中覆盖默认顺风颜色的问题

tailwind-css-4 vite tailwind-css laravel

1

Unik6065 · 技术社区 · 4 月前

我目前正在遵循Laracasts的路径,我被困在试图覆盖默认的顺风颜色上。

这是我的 package.json :

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "vite build",
    "dev": "vite"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.4",
    "concurrently": "^9.0.1",
    "laravel-vite-plugin": "^1.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.1",
    "vite": "^6.0.11"
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.0.1",
    "@tailwindcss/vite": "^4.0.1"
  }
}

这是我的 tailwind.config.js :

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        black: "#060606",
      },
    },
  },
  plugins: [],
};

这是我的 app.css 文件:

@import "tailwindcss";
@source "../views";

以及我的PostCSS配置文件( postcss.config.js ):

export default {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

如果有人知道为什么它没有按预期工作,我真的很感激你的帮助。

1 回复 | 直到 4 月前

1

Wongjn 4 月前

您使用的是Tailwind v3配置的混合,但安装了v4。要修复:

卸载 autoprefixer npm包。Tailwind v4不再需要此功能,因为Tailwind在内部也做同样的工作。
卸载 @tailwind/postcss 和 postcss npm包。你似乎在使用Vite,所以你不需要PostCSS集成路径。
删除 postcss.config.js 。删除前面提到的trhee包根本不需要这样做。

迁移


     tailwind.config.js

对输入CSS文件进行自定义:

@import "tailwindcss";
@source "../views";
/**
* You may need to modify these paths to the real path relative
* to this CSS file.
*/
@source "../resources/**/*.blade.php";
/**
* You may not need the following directive if the JS files are
* processed in Vite.
*/
@source "../resources/**/*.js";

@theme {
  --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /**
   * Not strictly needed as this is the default anyway.
   */
  --color-black: #000000;
}

删除 tailwind.config.js 文件。