Skip to content
/ ui Public

Vue component library and TailwindCSS base

License

Notifications You must be signed in to change notification settings

anime-skip/ui

Repository files navigation

Available Components

Anime Skip UI

Vue component library for all of Anime Skip, using TailwindCSS, powering the website and web extension

echo "@anime-skip:registry=https://npm.pkg.github.com/" >> .npmrc
pnpm add @anime-skip/ui

Contributing

See the contributing guidelines for all of Anime Skip


Get Started

  1. Install the library:

    echo "@anime-skip:registry=https://npm.pkg.github.com/" >> .npmrc
    pnpm add @anime-skip/ui
  2. Setup TailwindCSS, stopping after the "Create your configuration files" steps

  3. Modify the tailwind config

    // tailwind.config.js
    module.exports = {
      presets: [require('@anime-skip/ui/tailwind.preset')],
      purge: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
        './node_modules/@anime-skip/ui/ui.*.js',
      ],
    };
  4. Create a PostCSS config file

    module.exports = {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    };
  5. Import the styles in your main entrypoint

    import '@anime-skip/ui/tailwind.css';

Usage

This library is not documented yet. Play around with the code to see what changes, then use the components in your code