Skip to content

Latest commit

 

History

History
170 lines (131 loc) · 4.82 KB

nuxt.mdx

File metadata and controls

170 lines (131 loc) · 4.82 KB
Raw
title description navigation github prev next
Nuxt.js - Installation Guide
Learn how to use Material Tailwind components with Nuxt.js and Tailwind CSS to easily create elegant and flexible pages.
installation
npm
yarn
pnpm
tailwindcss-config
ripple-effect
example
guide/nuxt
installation
license

Material Tailwind with Nuxt.js

Learn how to setup and install @material-tailwind/html with Nuxt.js.

First you need to create a new project using Nuxt.js, for more details check the Nuxt.js Official Documentation

npx nuxi@latest init <project-name>

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 Nuxt.js 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

Using PNPM

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: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

Ripple Effect

@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

Add the following script to the nuxt.config.ts file in your project.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          async: true,
          src: "https://unpkg.com/@material-tailwind/html/scripts/ripple.js",
        },
      ],
    },
  },
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});
## 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
}> ```html Button ```