1

Im new in react, im using tailwind + @shopify/polaris, but tailwind classes not working in this library.

here is my code:

/** 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>
        </>

    );
}

Above is my simple code example im using classes of tailwind on polaris card but it cannot effect on it.

Kamal
  • 11
  • 5

1 Answers1

1

You need to import styles.css like this:

import "@shopify/polaris/build/esm/styles.css" in index.js
DSDmark
  • 1,045
  • 5
  • 11
  • 25
Priyank Rajai
  • 11
  • 1