Advanced from Tailwind 3

16.12.2023

Tailwind CSS

index.html Raw #

<!--
https://lab.rjwebdesign.cz/tailwindcss/advanced/
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./dist/output.css" rel="stylesheet" />
    </head>
    <body class="p-5">
        <h1 class="mb-4 font-bold text-3xl">1) Peer / Group</h1>
        <div class="peer group group/second group/third grid place-items-center bg-slate-600 w-20 h-20 mt-10">
            <div class="bg-black w-5 h-5 group-hover:bg-red-500"></div>
            <div class="bg-black w-5 h-5 group-hover/second:bg-green-500"></div>
            <div class="bg-black w-5 h-5 group-hover/third:bg-orange-500"></div>
        </div>
        <div class="w-20 h-20 bg-orange-400 mt-10 peer-hover:bg-violet-300"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">2) Animation / Transition</h1>
        <div class="w-20 h-20 bg-teal-700 transition-all hover:bg-red-300 delay-300 duration-150"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">3) Responsivenes / BP (ranges)</h1>
        <div class="w-20 h-20 bg-red-500 md:max-lg:bg-green-500"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">4) Dynamic variants / props / values</h1>
        <div class="w-20 h-20 bg-[theme('colors.blue.300')]"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">5) TW extend / config</h1>
        <div class="w-20 h-20 neon-blue"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">6) TW extend -> COLORS</h1>
        <div class="text-primary">Hello how are you?</div>
    </body>
</html>

tailwind.config.js Raw #

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');

export default {
    content: ['./src/**/*.{html,js}', 'index.html'],
    theme: {
        extend: {
            // no result ... shit!!
            colors: {
                primary: { ...colors.green, DEFAULT: colors.green[300] },
            },
            boxShadow: {
                neon: "0 0 5px theme('colors.purple.300'), 0 0 25px theme('colors.purple.600')",
            },
        },
    },
    plugins: [
        plugin(({ theme, addUtilities }) => {
            const neonUtilities = {};
            const colors = theme('colors');
            const colorNames = Object.keys(colors);

            for (const color of colorNames) {
                const neonClassName = `.neon-${color}`;
                const neonStyle = {
                    boxShadow: `0 0 5px ${colors[color][300]}, 0 0 55px ${colors[color][600]}`,
                };
                neonUtilities[neonClassName] = neonStyle;
            }
            addUtilities(neonUtilities);
        }),
    ],
};