Madhav GanesanTailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
Features:
Utility-first:
Tailwind css is a utility-first css framework that provides low-level utility classes to build custom designs without writing css.This approach allows us to implement a completely custom component design without writing a single line of custom CSS."You aren’t wasting energy inventing class names".
Content purging:
It is the process of removing unused CSS classes from the final CSS file that will be used in production environment.It is an optimization process in which the final CSS size is smaller, easier to maintain and shows improved performance.
Commands:
Underline:
underline
underline-offset-<size>
decoration-<color>-<shade> //color for underline
decoration-<thickness> // size of underline
decoration-<style> // wavy, double
Text Styling
text-<color>-<shade> //color of text
text-opacity-<shade> //opacity of text
text-<size> //size of text
text-<alignment> //alignment of text
Background Color
bg-<color>-<shade>
Gradient
bg-gradient-to-{direction} from-{color} via-{color} to-{color}
Image covers the entire parent div
object-cover
Border Radius
rounded-<size>
Font Styling
font-<style> //mono, serif, sans
font-bold
font-thin
Italic:
italic
list:
list-<style> //none
Visibility
Hide elements:
hidden
Display (Opposite to hide):
block
Padding
p-<size> /* All sides */
px-<size> /* Horizontal (left and right) */
py-<size> /* Vertical (top and bottom) */
pl-<size> /* Left */
pr-<size> /* Right */
pt-<size> /* Top */
pb-<size> /* Bottom */
Margin
m-<size> /* All sides */
mx-<size> /* Horizontal (left and right) */
my-<size> /* Vertical (top and bottom) */
ml-<size> /* Left */
mr-<size> /* Right */
mt-<size> /* Top */
mb-<size> /* Bottom */
Flexbox
flex
flex-<direction> // row or column
Justify Content
justify-<option>
Align Items
items-<option> //start,end,center
Responsive Design
sm /* Small devices */
md /* Medium devices */
lg /* Large devices */
xl /* Extra large devices */
Sizing
h-<size>
w-<size>
Borders
border
border-<size>
border-<color>
All States
hover:<utility>
focus:<utility>
active:<utility>
Input Box
outline-none
ring-<color>-<shade>
ring-<size>
