category: CSS
Posted on: May 6th 2021, 9:39pm
Last modified: May 6th 2021, 9:39pm
First at index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/css/tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-300 font-sans m-0">
<div class="bg-gray-100 lg:grid lg:grid-cols-2 2xl:grid-cols-5">
<div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-24 lg:max-w-full xl:mr-0 2xl:col-span-2">
<div class="xl:max-w-xl">
<img class="h-10" src="/image/logo.svg" alt="workcation">
<img class="w-full mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full sm:object-cover object-center lg:hidden"
src="/image/beach-work.jpg" alt="Woman workcationing on the beach">
<h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl">You can
work
from
anywhere.
<span class="text-indigo-500 block">Take advantage of it.</span>
</h1>
<p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ipsum asperiores veniam at
cumque
numquam maxime obcaecati reprehenderit vitae commodi.
</p>
<div class="mt-4 sm:mt-6 sm:text-base">
<a href="#"
class="bg-indigo-500 hover:bg-indigo-400 px-5 py-3 inline-block rounded-lg shadow-lg uppercase tracking-wider font-semibold text-sm text-white no-underline transform hover:-translate-y-0.5 transition focus:outline-none focus:ring focus:ring-offset-2 focus:ring-indigo-500 focus:ring-opacity-50 active:bg-indigo-600 sm:hover:text-3xl">Book
your escape
</a>
</div>
</div>
</div>
<div class="hidden lg:block relative 2xl:col-span-3">
<img class="absolute inset-0 w-full h-full object-cover object-center" src="/image/beach-work.jpg"
alt="Woman workcationing on the beach">
</div>
</div>
</body>
</html>Next, at tailwind.config.js file,
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {
backgroundColor: ["active"],
fontSize: ["hover"],
},
},
plugins: [],
};
references:
Recommended
HTML markdown cheatsheetInstall netlify cli globallyCustomizing font family and color in Tailwind.cssGenerate full version of tailwind.config.js fileEnable variant in the config file for Tailwind.cssSetup Tailwind workflowUsing @apply with Complex ClassesCustom animation in Tailwind.cssGradient in TailwindLoop through JSON object