https://github.com/techjmi/tailwind-css
Tailwind Css Notes-Practice
https://github.com/techjmi/tailwind-css
css framework installation practice tailwindcss
Last synced: 10 months ago
JSON representation
Tailwind Css Notes-Practice
- Host: GitHub
- URL: https://github.com/techjmi/tailwind-css
- Owner: techjmi
- Created: 2024-02-09T21:56:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T22:12:35.000Z (almost 2 years ago)
- Last Synced: 2025-01-26T01:28:13.626Z (12 months ago)
- Topics: css, framework, installation, practice, tailwindcss
- Language: CSS
- Homepage:
- Size: 2.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Basic Setup Process
How to setup Tailwind CSS
Step 1: Run the following commands
npm install -D tailwindcss npx tailwindcss init
Step 2: Update tailwind.conf.js file to include this line:
content: ["*.html"],
Step 3: create src/input.css to include:
@tailwind base; @tailwind components; @tailwind utilities;
Step 4: Include the src/output.css file to your html
Step 5: Run the following command:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
** Basic Overview**
Utility-First Approach:
Emphasizes small, single-purpose classes for styling.
Class Naming Convention:
Classes are named intuitively, representing their styles (e.g., bg-blue-500).
Responsive Design:
Breakpoints (sm:, md:, lg:, xl:) for styling based on screen sizes (e.g., md:text-lg).
Flexbox:
flex: Enables a flex container.
items-{alignment}, justify-{alignment}: Aligns items and content.
Spacing:
p-{size}, m-{size}: Sets padding and margin.
Sizing:
w-{size}, h-{size}: Sets width and height.
Borders and Corners:
border, border-{side}-{size}: Adds borders.
rounded, rounded-{size}: Applies rounded corners.
Typography:
text-{size}, font-{weight}: Sets font size and weight.
Background and Color:
bg-{color}, text-{color}: Sets background color and text color.
Shadow and Opacity:
shadow-{size}, opacity-{percentage}: Adds shadow and adjusts opacity.
Spacing Scale:
Predefined scale for consistent spacing.
Text Alignment:
text-left, text-center, text-right: Aligns text.
Display Properties:
hidden, block, inline, inline-block: Adjusts display.
Visibility:
invisible: Makes an element invisible.
Overflow:
overflow-{property}: Handles overflow.
Positioning:
static, relative, absolute, fixed: Controls positioning.
Z-Index:
z-{index}: Sets stacking order.
Cursor:
cursor-{type}: Changes cursor style.
Hover, Focus, and Active States:
hover:, focus:, active:: Apply styles on interaction.
Transitions:
transition-{property}: Adds smooth transitions.
Transforms:
transform-{type}: Applies 2D transformations.
Interactivity:
pointer-events-{type}: Controls pointer events.
Responsive Visibility:
hidden sm:block: Adjusts visibility based on screen size.
Container Utility:
container: Centers and adds max-width for a responsive layout.
Spacing Scale:
Tailwind has a predefined spacing scale (e.g., 1, 2, 4, 8, ...) for consistent spacing throughout the design.
Text Alignment:
text-left, text-center, text-right: Aligns text within its container.
Display Properties:
hidden: Hides an element.
block, inline, inline-block: Adjusts the display property of an element.
Visibility:
invisible: Makes an element invisible while still taking up space.
Overflow:
overflow-{property}: Handles overflow, such as overflow-hidden to hide content that overflows its container.
Positioning:
static, relative, absolute, fixed: Controls the positioning of an element.
Z-Index:
z-{index}: Sets the stacking order of an element.
Cursor:
cursor-{type}: Changes the cursor style, e.g., cursor-pointer.
Hover, Focus, and Active States:
hover:, focus:, active:: Apply styles on hover, focus, or when an element is active.
Transitions:
transition-{property}: Adds smooth transitions to specified properties.
Transforms:
transform-{type}: Applies 2D transformations, like scaling or rotating.
Interactivity:
pointer-events-{type}: Controls how an element responds to pointer events.
Responsive Visibility:
hidden sm:block: Adjusts visibility based on screen size.
Container Utility:
container: Centers and adds max-width to an element for a responsive layout.