♨️ Landing 51

Tailwind basic

Setup verison 4

Install

npm install next react react-dom
npm install tailwindcss @tailwindcss/postcss postcss

Configure PostCSS Plugins

// postcss.config.mjs
const config = {
    plugins: ["@tailwindcss/postcss"],
};

export default config;

Import Tailwind CSS

/* ./css/global.css */
@import "tailwindcss";

Include in React page

Code: HelloWorld.jsx
export default function HelloWorld() {
    return (
        <>
            <h1 className="text-red-300 underline italic">Hello world</h1>


            <div className="p-2 perspective-midrange bg-sky-700">
                <img src="https://placehold.co/150x100" 
                    className="rotate-[6.73deg]" />
            </div>


            <button className="m-2 size-15 rounded bg-cyan-500 shadow-lg shadow-cyan-500/50">Subscribe</button>


        </>
    )
}
Output

Hello world