TailwindCSS
As a Design Systems Engine
CLASS NAME
IS MAINLY PRESENTATIONAL
CSS
should be reusable
HTML
should KNoW CSS
Not opposite
Building CSS
IS like building
lego
PADDING
MARGIN
Font
WIDTH
HEIGHT
Writing A CSS STYLING
TACHYONCSS
TAILWINDCSS
<div class="md:flex bg-white rounded-lg p-6">
<img
class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
src="avatar.jpg"
>
<div class="text-center md:text-left">
<h2 class="text-lg">Maya Shavin</h2>
<div class="text-purple-500">Senior FED</div>
<div class="text-gray-600">@mayashavin</div>
</div>
</div>
IS TAILWINDCSS
ANOTHER TACHYONCSS?
ANOTHER TACHYONCSS?
IS TAILWINDCSS
Inline-like CSS?
Inline-line CSS?
TAILWINDCSS IS
SIMILAR TO TAchyonCSS
BUT BETTER
What is TailwindCSS?
Utility-first
Customizable
PostCSS
CSS SHAKE-ABLE
Extractable component classes
REFACTORINGUI Concepts
yarn add tailwindcss/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;npx tailwindcss init// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}module.exports = {
important: true,
theme: {
fontFamily: {
display: ['Gilroy', 'sans-serif'],
body: ['Graphik', 'sans-serif'],
},
extend: {
colors: {
cyan: '#9cdbff',
},
margin: {
'96': '24rem',
'128': '32rem',
},
}
},
variants: {
opacity: ['responsive', 'hover']
}
}