Versoly UI - Quickstart

Get started by copying the config files and install the JS with NPM or CDN

Main CSS File

Copy and paste the extended Tailwind CSS file into your main CSS file.

When gzipped the file is around 3.3kb. We're always improving it and looking at a Tailwind plugin for better compression.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

}

Require via NPM

Versoly UI requires you to have Node.js, Tailwind CSS and the Tailwind form and typography plugins installed.

1. Install Versoly UI as a dependency using NPM by running the following command:

npm install versoly-ui --save

2. Make sure the Tailwind plugins are added to the tailwind.config.js file:

module.exports = {

    plugins: [
        require('@tailwindcss/typography'),
        require('tailwindcss/forms')
    ]

}

3. Extend colors, content and theme of the tailwind.config.js file:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {},
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwindcss/forms')
  ]
}

4. Include the main JavaScript file to make interactive elements work:

<script src="../path/to/versoly-ui/dist/versoly-ui.js"></script>

5. To include classes from interactive elements add the following in the tailwind.config.js file:

module.exports = {

    content: [
        "./node_modules/versoly-ui/**/*.js"
    ]

}

If you use Webpack or other bundlers you can also import it like this:

import 'versoly-ui';

Include JS via CDN

And include the following javascript file before the end of the body element:

<script src="https://unpkg.com/versoly-ui@1.0.6/dist/versoly-ui.js"></script>