Installation

Install Skin via npm:

                npm install -D @bayfrontmedia/skin

Add Skin as a Tailwind plugin and add the required theme-primary and theme-secondary colors in the tailwind.config.js file. In addition, add Skin's JavaScript file to your content data to ensure any Tailwind classes used by Skin are not purged from your stylesheet.

It is also recommended to use the @tailwindcss/forms plugin to ensure proper styling of form elements.


                
                // tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
    content: ['./node_modules/@bayfrontmedia/skin/dist/skin.min.js'],
    theme: {
        extend: {
            colors: {
                'theme-primary': colors.blue["500"],
                'theme-secondary': colors.green["500"]
            }
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@bayfrontmedia/skin'),
    ]
}

To support toggling dark mode manually instead of relying on the operating system preference, use the class strategy:


                
                // tailwind.config.js

module.exports = {
    darkMode: 'class',
}

To utilize the JavaScript features, include the skin.min.js file from your preferred source and initialize Skin before the closing body tag:


                
                <!-- Local -->
<script src="./path/to/skin.min.js"></script>

<!-- unpkg -->
<script src="https://www.unpkg.com/@bayfrontmedia/skin@2.0.0/dist/skin.min.js"></script>

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@bayfrontmedia/skin@2.0.0/dist/skin.min.js"></script>

<!-- Using a bundler such as Webpack -->
import '@bayfrontmedia/skin/dist/skin.min';

<!-- Once the JavaScript is included, initialize Skin's features: -->
<script>
    window.addEventListener("load", () => {
        Skin.App.init();
    });
</script>

For more information, see JavaScript.