Tailwind 類在 Svelte 應用程序中不起作用

Question

幾天來，我一直在嘗試讓 Tailwind 課程與我的 Svelte 項目一起工作。 我從這里遵循了確切的步驟，但仍然沒有任何效果。

這是我的苗條項目的結構：

postcss.config.cjs代碼：

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

tailwind.config.js代碼：

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: {
    content: ["./src/App.svelte"],
    enabled: production, // disable purge in dev
  },
};

在tailwind.css文件中：

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

在package.json文件中：

{
  "name": "svelte-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public",
    "serve": "serve public -p 80",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""
  },

  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "@types/autoprefixer": "^10.2.0",
    "concurrently": "^7.2.2",
    "cross-env": "^7.0.3",
    "postcss-cli": "^7.1.2",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "sirv-cli": "^2.0.0",
    "tailwindcss": "^3.1.3"
  }
}

我做錯了什么？ 我已經在網上尋找了很多答案，但我的筆記本電腦仍然沒有任何效果......不過，Tailwind CDN 可以工作，但這不是我想要的！

Answer 1

這可能不是最好的指令集。 由於您已經在使用可以處理其中一些問題的匯總，因此添加額外的腳本只會使事情復雜化。 此外，通常（AFAIK🤷‍♂️）順風是通過專用的細長組件導入的。

我會將tailwindcss和autoprefixer添加到您的rollup.config.js中，然后您就不需要使用watch:tailwind

export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require('tailwindcss')(), require('autoprefixer')()],
        },
      }),
    }),
    // ...
  ],
  // ...
}

如果你把它放到Tailwind.svelte組件中

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

然后您可以通過<Tailwind/>在您的應用程序中包含

以下是您可能想要查看的其他一些來源

• https://dev.to/ardc_overflow/setting-up-svelte-and-tailwind-with-minimal-extra-dependencies-1g5a
• https://github.com/jhanca-vm/Svelte-Tailwind