用1命令在Svelte中安装tailwindcss-DEV365 开发者社区

这是如何在Svelte中安装parwindcss

npx svelte-add tailwindcss

是的，您不需要其他任何东西：D

好吧，这实际上是怎么回事？

更新./package.json

包括所需的开发软件包。

"devDependencies": {
...
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"svelte-preprocess": "^4.10.7",
"autoprefixer": "^10.4.7",
"tailwindcss": "^3.1.5"
}

添加./tailwind.config.json

添加了尾风的正确配置，该配置添加了所有必要的内容文件类型。

const config = {
    content: ['./src/**/*.{html,js,svelte,ts}'],

    theme: {
        extend: {}
    },

    plugins: []
};

module.exports = config;

更新./svelte.config.js

更新以添加预处理要求。

import preprocess from 'svelte-preprocess';

...
preprocess: [
        preprocess({
            postcss: true
        })
    ]
...

添加./postcss.config.cjs

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

const config = {
    plugins: [
        //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
        tailwindcss(),
        //But others, like autoprefixer, need to run after,
        autoprefixer
    ]
};

module.exports = config;

添加./src/app.postcss

包括全局文件

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

添加./src/Routes/+layout.svelte

<script>
    import '../app.postcss';
</script>

<slot />