directory : /web/css/ : tailwind-css.html

Directory path . web , css .
HTML Document File : tailwind-css.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tailwind-css</title>
</head>

<body>
    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <h1 class="text-3xl font-bold underline">Hello world from Tailwind with customizations!</h1>
    <p>sharing recent hack for TailWind-CSS without pre-compilations ( no PostCSS either ) . </p>
    <br>
    <a href="javascript: alert('link with javascript'); "> link with js </a>
    <br>
    <br>
    <button onclick="alert('you clicked me !')"> clickable button </button>
    <br>
    <form onsubmit=" alert('you wrote : ' + this.input_text1.value); return false; ">
        <input required id="input_text1" placeholder="write here then submit">
        <input type="submit" value="submit">
    </form>

    <br>
    <button class="btn-red">red Button</button>
    <br>
    <br>
    <textarea> text area test </textarea>

    <script>

        // TailwindCSS

        // pairs of css selectors and classes to apply
        const cssSelectorsClassesPairs = [

            // ['button , input[type=button] , input[type=submit]', 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'],

            ['button , input[type=button] , input[type=submit] , a[href^="javascript:"] ', 'btn btn-blue'],

            ['.btn', 'font-bold py-2 px-4 rounded'],

            ['.btn-blue', 'bg-blue-500 text-white'],
            //['.btn-blue:hover', 'bg-blue-700'],
            ['.btn-blue', 'hover:bg-blue-700'],

            ['.btn-red', 'bg-red-500 text-white hover:bg-red-700'],

            ['textarea , input[type=text] , input:not([type])', 'border border-gray-300'],
        ]

        // apply classes to selectors
        function cssSelectorsClassesPairApply(pair) {

            // add classes to element
            function cssAddClasses(element, classes) {
                element.classList.add(...classes.split(' '));
            }

            // apply classes to all elements matching selector
            const [selector, classes] = pair;
            document.querySelectorAll(selector).forEach(element => cssAddClasses(element, classes));
        }

        function initCSSPairs(cssPairs) {
            // apply all pairs
            cssPairs.forEach(pair => cssSelectorsClassesPairApply(pair));
        }

        function initCSS() {
            initCSSPairs(cssSelectorsClassesPairs);
        }

        function init() {
            initCSS();
        }

        init();
    </script>

    <!-- Show Source -->
    <script src="https://arkenidar.com/web/show-source.js"></script>
</body>

</html>