@wazabii/stratoxtailwind v1.0.1

Stratox Tailwind CSS Theme

The Stratox Tailwind theme is an intuitive Tailwind CSS plugin featuring a range of polished UI components, including forms, buttons, containers, and headlines. It simplifies rem unit conversion, equating 1.5rem to 15px, and maintains a consistent CSS structure for ease of use.

Installation

1. Install the package

npm install @wazabii/stratoxtailwind --save-dev

2. Require the plugin package

Now you just have to require the require('@wazabii/stratoxtailwind'); plugin to the tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
		extend: {},
	},
    plugins: [
        require('@wazabii/stratoxtailwind').config({
        })
    ],
}

The theme has been installed!

Configurations

Guide is not completed, more configs will come.

Theme colors

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {
            colors: {
                'bg': {
                    'primary': "#1E40AF",
                    'secondary': "#E2E8F0",
                    'light': "#F9F9F9",
                    'approve': '#17A355',
                    'error': '#D32E32',
                },
                'text': {
                    'primary': "#0F172B",
                    'secondary': "#47566C",
                    'link': '#1E40AF',
                    'approve': '#17A355',
                    'error': '#D32E32',
                },
                'border': {
                    'primary': "#CDD5E0",
                    'secondary': "#70A3F3",
                    'light': "#E3E8EF",
                    'approve': '#4CA054',
                    'error': '#8D2822'
                },
            }
        }
    },
    plugins: [
        require('@wazabii/stratoxtailwind').config({
        })
    ],
}

Default font

Set default font.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
	    extend: {},
    },
    plugins: [
        require('@wazabii/stratoxtailwind').config({
	        fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
        })
    ],
}

Custom font with @font-face

Install a custom font with @font-face.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
		extend: {},
	},
    plugins: [
        require('@wazabii/stratoxtailwind').config({
	        fontFamily: ['Open Sans', 'Helvetica', 'Arial', 'sans-serif'],
	        fontFace: [
                {
                    '@font-face': {
                        'font-family': '"Open Sans"',
                        'src': 'url("fontface/opensans-bold-webfont.woff2") format("woff2")',
                        'font-weight': 'bold',
                        'font-style': 'normal'
                    }
                },
                {
                    '@font-face': {
                        'font-family': '"Open Sans"',
                        'src': 'url("fontface/opensans-italic-webfont.woff2") format("woff2")',
                        'font-weight': 'normal',
                        'font-style': 'italic'
                    }
                },
                {
                    '@font-face': {
                        'font-family': '"Open Sans"',
                        'src': 'url("fontface/opensans-regular-webfont.woff2") format("woff2")',
                        'font-weight': 'normal',
                        'font-style': 'normal'
                    }
                }
            ]
        })
    ],
}