title | description | navigation | github | prev | next | |||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Solid - Installation Guide |
Learn how to use Material Tailwind components with Solid and Tailwind CSS to easily create elegant and flexible pages. |
|
guide/solid |
installation |
license |
First you need to create a new project using Solid, for more details check the Solid Official Documentation
npm create vite@latest my-app -- --template solid
Then you need to install Tailwind CSS since @material-tailwind/html is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. Check Tailwind CSS Installation for Solid on Tailwind CSS Documentation.
## Using NPM
Install @material-tailwind/html as a dependency using NPM by running the following command:
npm i @material-tailwind/html
## Using Yarn
Install @material-tailwind/html as a dependency using Yarn by running the following command:
yarn add @material-tailwind/html
Install @material-tailwind/html as a dependency using PNPM by running the following command:
pnpm i @material-tailwind/html
## TailwindCSS Configurations
Once you install @material-tailwind/html you need to wrap your tailwind css configurations with the withMT()
function coming from @material-tailwind/html/utils.
/** @type {import('tailwindcss').Config} */
import withMT from "@material-tailwind/html/utils/withMT";
export default withMT({
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
});
@material-tailwind/html comes with a ripple effect script file same as Material Design ripple effect and you can simply use it by adding it's CDN link to you project and add the data-ripple-light="true"
for light ripple effect and data-ripple-dark="true"
for dark ripple effect as an attribute for components
The ripple effect used in @material-tailwind/html is a separate package called material-ripple-effect
<!-- from node_modules -->
<script defer src="node_modules/@material-tailwind/html/scripts/ripple.js"></script>
<!-- from cdn -->
<script async src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
## Example
Now you're good to go and use @material-tailwind/html in your project.
<CodePreview id="example" component={ <button type="button" data-ripple-light="true" className="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
Button