要在Remix中使用Tailwind CSS,可以按照以下步驟進行操作:
npm install tailwindcss postcss-cli autoprefixer
postcss.config.js
文件,并在其中添加以下內容:module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
tailwind.config.js
文件,并在其中添加以下內容:module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
};
styles.css
),并在其中導入Tailwind CSS:@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
import '../styles.css';
import React from 'react';
const MyComponent = () => {
return (
<div className="container mx-auto">
<h1 className="text-xl font-bold text-blue-500">Hello, Tailwind CSS!</h1>
</div>
);
};
export default MyComponent;
這樣就可以在Remix項目中使用Tailwind CSS了。請確保在構建項目之前,運行以下命令來生成最終的CSS文件:
npx tailwindcss build styles.css -o output.css
然后可以將生成的output.css
文件引入到項目中。