reactjs 如何在react @shopify/polaris中使用顺风类

hl0ma9xz  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(431)

我是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>
        </>

    );
}

上面是我的简单代码示例,我在北极星卡上使用顺风类,但它不能对它产生影响。

eqqqjvef

eqqqjvef1#

请在index.js中导入“@shopify/polaris/build/esm/styles.css”

相关问题