将 TailwindCSS 与 SvelteJS 结合使用
如果你还没看过TailwindCSS,不妨去看看。它的精彩之处我就不多说了🤪
TL;DR。完整实现可以在我的 Github muhajirdev/svelte-tailwind-template上找到。
获取 Svelte 默认模板
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
安装依赖项
npm install --save-dev tailwindcss postcss-import @fullhuman/postcss-purgecss postcss rollup-plugin-postcss autoprefixer
设置rollup-plugin-postcss
// rollup.config.js
...
import postcss from 'rollup-plugin-postcss'
...
export default {
plugins: [
postcss({extract: true}),
svelte(...),
...
]
}
这是最终结果
//rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss'
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
postcss({
extract: true
}),
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve({ browser: true }),
commonjs(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
创造postcss.config.js
const production = !process.env.ROLLUP_WATCH;
const purgecss = require("@fullhuman/postcss-purgecss");
module.exports = {
plugins: [
require("postcss-import")(),
require("tailwindcss"),
require("autoprefixer"),
// Only purge css on production
production &&
purgecss({
content: ["./**/*.html", "./**/*.svelte"],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
]
};
创造src/main.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
导入src/main.css
src/main.js
// src/main.js
import App from "./App.svelte";
import "./main.css";
const app = new App({
target: document.body,
props: {
name: "world"
}
});
export default app;
选修的
删除public/global.css
并且删除
<link rel="stylesheet" href="global.css" />
因为index.html
我们已经有了 normalize.csstailwind
最后,现在你可以编写 tailwind 类
尝试一下它<div class="bg-black">test</div>
应该会给你一个具有黑色背景的 div。
如有任何反馈,我们将非常感激:)
最初发表于https://muhajir.dev/writing/using-tailwincss-with-svelte/
鏂囩珷鏉ユ簮锛�https://dev.to/muhajirdev/using-tailwindcss-with-sveltejs-2098