[CSS] Tailwindcss: get started
Install
npm install tailwaindcss postcss-cli autoperfixer
Config a empty tailwind config file
npx tailwind init
Conig postcss
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
Add tailwind.css
// css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Add scripts
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
},
Once you run npm run build, it will generate css file for you.
It looks like this:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
},
},
variants: {
extend: {},
},
plugins: [],
};
Utility
You can find all the utility class here
For example:
<body class="bg-gray-100">
<div class="px-8 py-12">
<img class="h-10" src="/img/logo.svg" alt="Workcation" />
<img
class="mt-6 rounded-lg shadow-xl"
src="/img/beach-work.jpeg"
alt="Woman workcation in beach"
/>
<h1 class="mt-6 text-2xl font-bold text-gray-900 leading-tight">
You can work from anywhere.
<span class="text-indigo-500">Take advantage of it.</span>
</h1>
<p class="mt-2 text-gray-600">
Workcation helps you find work-friendly rentals in becatiful location so
you can enjoy some nice weather even when you're not on vacation.
</p>
<div class="mt-4">
<a
href="#"
class="
inline-block
bg-indigo-500
text-white text-sm
px-5
py-3
rounded-lg
shadow-lg
uppercase
tracking-wider
font-semibold
"
>Book your escape</a
>
</div>
</div>
Responsive
There are sm, md, lg, xl, prefix, if use without prefix, it apply to all screen size.
<img
class="
mt-6
rounded-lg
shadow-xl
sm:mt-8 sm:h-64 sm:w-full sm:object-cover sm:object-center
lg:hidden
"
src="/img/beach-work.jpeg"
alt="Woman workcation in beach"
/>
You can find the docs about responsive here
Conditionally sytle
Such as hover, focus, those are call variants
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
backgroundColor: ["responsive", "hover", "focus", "active"],
// for example you want to enable hover for the fontsize, normally you won't do that just an example
// hover:text-2xl
// fontSize: ['responsive', 'hover'],
extend: {},
},
plugins: [],
};
We add backgroundColor to the config file, so that the conditional style can be add to background class:
<a
href="#"
class="
inline-block
bg-indigo-500
hover:bg-indigo-400
focus:outline-none focus:ring
active:bg-indigo-600
text-white text-sm
sm:text-base
px-5
py-3
rounded-lg
shadow-lg
uppercase
tracking-wider
font-semibold
"
>Book your escape</a
>
You can see the docs
@apply
Previously we have the a tag have lots of class:
<a
href="#"
class="
inline-block
bg-indigo-500
hover:bg-indigo-400
focus:outline-none focus:ring
active:bg-indigo-600
text-white text-sm
sm:text-base
px-5
py-3
rounded-lg
shadow-lg
uppercase
tracking-wider
font-semibold
"
>Book your escape</a
>
We want to use @apply to make custom class name with those classes
in css/tailwind.css
@tailwind components;
.btn {
@apply inline-block
px-5
py-3
rounded-lg
uppercase
tracking-wider
font-semibold;
}
.btn:focus {
@apply outline-none ring;
}
.btn-indigo {
@apply bg-indigo-500 text-white;
}
.btn-indigo:hover {
@apply bg-indigo-400;
}
.btn-indigo:active {
@apply bg-indigo-600;
}
@tailwind utilities;
<a href="#" class="btn btn-indigo sm:text-base shadow-lg">Book your escape</a>
We didn't apply shadow-lg and sm:text-base because different button might have different looking & feel.
Customizse
You can find docs here
You can generate a full configure file to have a look
npx tailwind init tailwind-full.config.js --full, it is a good reference to have a look what you are able to config.
For example, we want to add a new color or spacing:
theme: {
// what inside extend will extend default tailwind config
// what outside extend will override default tailwind config completely
extend: {
colors: {
"brand-blue": "#1992d4",
},
spacing: {
72: "18rem",
},
},
},
