我是react的新手,我使用的是tailwind + @shopify/polaris,但是tailwind类在这个库中不起作用。
下面是我的代码:
/** App.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** tailwind.config.js */
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.jsx",
],
theme: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false
},
}
/** postcss.config.js */
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
/** package.json */
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7",
"vite": "^4.0.0"
},
"dependencies": {
"@shopify/polaris": "^10.35.0",
"@vitejs/plugin-react": "^3.0.1",
"@vitejs/plugin-react-refresh": "^1.3.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2"
}
}
/** Example */
import React from 'react';
import { Card } from '@shopify/polaris';
export default function App() {
return (
<>
<Card className='p-8 m-4 text-black bg-[#008060] rounded-sm font-bold text-2xl'>Example Code</Card>
</>
);
}
上面是我的简单代码示例,我在北极星卡上使用顺风类,但它不能对它产生影响。
1条答案
按热度按时间eqqqjvef1#
请在index.js中导入“@shopify/polaris/build/esm/styles.css”