Installation

Install Skin via npm:

                npm install -D @bayfrontmedia/skin

Tailwind config

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',
}

Many Skin elements can be customized by adding the skin property to your tailwind.config.js file. The default configuration is as follows:


                
                // tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    skin: {
        borderRadius: '.5rem',
        borderRadiusSm: '.25rem',
        borderWidth: '1px',
        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);',
        themes: { // Valid themes: light, dark
            light: {
                bgDefault: colors.gray["100"],
                bgContent: colors.white,
                borderDefault: colors.gray["300"],
                textDefault: colors.gray["700"],
                textLight: colors.gray["500"],
                textCode: colors.red["600"]
            },
            dark: {
                bgDefault: colors.gray["900"],
                bgContent: colors.gray["800"],
                borderDefault: colors.gray["700"],
                textDefault: colors.gray["300"],
                textLight: colors.gray["500"],
                textCode: colors.red["400"]
            }
        }
    }
}

These values are used to define the utility classes and CSS variables used by Skin.

JavaScript

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.