{"id":21763328,"url":"https://github.com/techjmi/tailwind-css","last_synced_at":"2025-03-21T04:44:15.173Z","repository":{"id":221763783,"uuid":"755317864","full_name":"techjmi/tailwind-css","owner":"techjmi","description":"Tailwind Css Notes-Practice","archived":false,"fork":false,"pushed_at":"2024-02-09T22:12:35.000Z","size":2855,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T01:28:13.626Z","etag":null,"topics":["css","framework","installation","practice","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techjmi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-09T21:56:26.000Z","updated_at":"2024-04-20T22:38:37.000Z","dependencies_parsed_at":"2024-02-09T23:35:36.154Z","dependency_job_id":null,"html_url":"https://github.com/techjmi/tailwind-css","commit_stats":null,"previous_names":["techjmi/tailwind-css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjmi%2Ftailwind-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjmi%2Ftailwind-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjmi%2Ftailwind-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjmi%2Ftailwind-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techjmi","download_url":"https://codeload.github.com/techjmi/tailwind-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244739939,"owners_count":20501990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framework","installation","practice","tailwindcss"],"created_at":"2024-11-26T12:14:59.054Z","updated_at":"2025-03-21T04:44:15.152Z","avatar_url":"https://github.com/techjmi.png","language":"CSS","readme":"Basic Setup Process\nHow to setup Tailwind CSS \nStep 1: Run the following commands\n\nnpm install -D tailwindcss npx tailwindcss init \nStep 2: Update tailwind.conf.js file to include this line:\n\ncontent: [\"*.html\"], \nStep 3: create src/input.css to include:\n\n@tailwind base; @tailwind components; @tailwind utilities; \nStep 4: Include the src/output.css file to your html\n\nStep 5: Run the following command:\n\nnpx tailwindcss -i ./src/input.css -o ./src/output.css --watch\n\n\n** Basic Overview**\nUtility-First Approach:\n\nEmphasizes small, single-purpose classes for styling.\nClass Naming Convention:\n\nClasses are named intuitively, representing their styles (e.g., bg-blue-500).\nResponsive Design:\n\nBreakpoints (sm:, md:, lg:, xl:) for styling based on screen sizes (e.g., md:text-lg).\nFlexbox:\n\nflex: Enables a flex container.\nitems-{alignment}, justify-{alignment}: Aligns items and content.\nSpacing:\n\np-{size}, m-{size}: Sets padding and margin.\nSizing:\n\nw-{size}, h-{size}: Sets width and height.\nBorders and Corners:\n\nborder, border-{side}-{size}: Adds borders.\nrounded, rounded-{size}: Applies rounded corners.\nTypography:\n\ntext-{size}, font-{weight}: Sets font size and weight.\nBackground and Color:\n\nbg-{color}, text-{color}: Sets background color and text color.\nShadow and Opacity:\n\nshadow-{size}, opacity-{percentage}: Adds shadow and adjusts opacity.\nSpacing Scale:\n\nPredefined scale for consistent spacing.\nText Alignment:\n\ntext-left, text-center, text-right: Aligns text.\nDisplay Properties:\n\nhidden, block, inline, inline-block: Adjusts display.\nVisibility:\n\ninvisible: Makes an element invisible.\nOverflow:\n\noverflow-{property}: Handles overflow.\nPositioning:\n\nstatic, relative, absolute, fixed: Controls positioning.\nZ-Index:\n\nz-{index}: Sets stacking order.\nCursor:\n\ncursor-{type}: Changes cursor style.\nHover, Focus, and Active States:\n\nhover:, focus:, active:: Apply styles on interaction.\nTransitions:\n\ntransition-{property}: Adds smooth transitions.\nTransforms:\n\ntransform-{type}: Applies 2D transformations.\nInteractivity:\n\npointer-events-{type}: Controls pointer events.\nResponsive Visibility:\n\nhidden sm:block: Adjusts visibility based on screen size.\nContainer Utility:\n\ncontainer: Centers and adds max-width for a responsive layout.\n\nSpacing Scale:\n\nTailwind has a predefined spacing scale (e.g., 1, 2, 4, 8, ...) for consistent spacing throughout the design.\nText Alignment:\n\ntext-left, text-center, text-right: Aligns text within its container.\nDisplay Properties:\n\nhidden: Hides an element.\nblock, inline, inline-block: Adjusts the display property of an element.\nVisibility:\n\ninvisible: Makes an element invisible while still taking up space.\nOverflow:\n\noverflow-{property}: Handles overflow, such as overflow-hidden to hide content that overflows its container.\nPositioning:\n\nstatic, relative, absolute, fixed: Controls the positioning of an element.\nZ-Index:\n\nz-{index}: Sets the stacking order of an element.\nCursor:\n\ncursor-{type}: Changes the cursor style, e.g., cursor-pointer.\nHover, Focus, and Active States:\n\nhover:, focus:, active:: Apply styles on hover, focus, or when an element is active.\nTransitions:\n\ntransition-{property}: Adds smooth transitions to specified properties.\nTransforms:\n\ntransform-{type}: Applies 2D transformations, like scaling or rotating.\nInteractivity:\n\npointer-events-{type}: Controls how an element responds to pointer events.\nResponsive Visibility:\n\nhidden sm:block: Adjusts visibility based on screen size.\nContainer Utility:\n\ncontainer: Centers and adds max-width to an element for a responsive layout.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjmi%2Ftailwind-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechjmi%2Ftailwind-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjmi%2Ftailwind-css/lists"}