creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.51k stars 307 forks source link

Switch style not correct #548

Closed Britman72 closed 4 months ago

Britman72 commented 6 months ago

Using the Switch component in React, looks like this:

switch

Index.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

index.js:

import { ThemeProvider } from "@material-tailwind/react";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

    <React.StrictMode>
     <ThemeProvider>
        <App />
    </ThemeProvider>
    </React.StrictMode>

tailwind.config.js:

const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
      "./src/**/*.{js,jsx,ts,tsx}",
          ],

Component (used from docs):

<Switch
      id="custom-switch-component"
      ripple={false}
      className="h-full w-full checked:bg-[#134475]"
     containerProps={{
     className: "w-8 h-4",
              }}
          circleProps={{
          className: "before:hidden left-0.5 border-none",
           }}
/>
sajadevo commented 4 months ago

@Britman72 here is the correct example:

<Switch
  id="custom-switch-component"
  ripple={false}
  className="h-full w-full checked:bg-[#134475]"
  containerProps={{
    className: "w-11 h-6",
  }}
  circleProps={{
    className: "before:hidden left-0.5 border-none",
  }}
/>