{"id":51494086,"url":"https://github.com/kiritocode1/tailwind-css-beginner-practice","last_synced_at":"2026-07-07T13:02:01.314Z","repository":{"id":53300848,"uuid":"446912904","full_name":"kiritocode1/tailwind-css-beginner-practice","owner":"kiritocode1","description":"this is the tailwind practice i made for myself","archived":false,"fork":false,"pushed_at":"2023-03-07T01:55:12.000Z","size":28423,"stargazers_count":2,"open_issues_count":7,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-05-18T03:46:16.214Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"tailwind-css-beginner-practice.vercel.app","language":"JavaScript","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/kiritocode1.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}},"created_at":"2022-01-11T17:12:10.000Z","updated_at":"2023-03-04T03:33:40.000Z","dependencies_parsed_at":"2023-02-07T20:15:41.700Z","dependency_job_id":null,"html_url":"https://github.com/kiritocode1/tailwind-css-beginner-practice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kiritocode1/tailwind-css-beginner-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiritocode1%2Ftailwind-css-beginner-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiritocode1%2Ftailwind-css-beginner-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiritocode1%2Ftailwind-css-beginner-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiritocode1%2Ftailwind-css-beginner-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiritocode1","download_url":"https://codeload.github.com/kiritocode1/tailwind-css-beginner-practice/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiritocode1%2Ftailwind-css-beginner-practice/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35228643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-07T02:00:07.222Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-07-07T13:01:54.479Z","updated_at":"2026-07-07T13:02:00.566Z","avatar_url":"https://github.com/kiritocode1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-css-beginner-practice\nthis is the tailwind practice i made for myself\n\n**TO DOWNLOAD TAILWIND FOLLOW THE FOLLOWING STEPS**\n\n\u003e  first make a new react app with tailwind -\u003e\n\n### ```npx create-react-app my-project```\n\n### ```cd my-project```\n\n\u003ewell  it's name is my-project but u can name it anything as you wish . \n\n\u003eand then follow the steps necessary \n\u003e\n\n\u003ethen install ```tailwind css``` and it's peer dependencies and and then \n\n\u003erun init command to generate both\n\n\u003e```tailwind.config.js``` and the ```postcss.config.js```\n\n### ```npm install -D tailwindcss postcss autoprefixer```\n\n### ```npx tailwindcss init -p```\n\n\u003eand then do some changes to the tailwind.config.js , that is the config \n\n\u003e file that youre going to change \n\n\u003e\u003e before : content:[]\n\n\u003e\u003e after : content:[\"./src/**/*.{js,jsx,ts,tsx}\",]\n\n\u003eand then we do the changes to the ./src/index.css files basically remove everything and add the 3 things that arte right here\n\n\u003e\u003e```@tailwind base;```\n\n\u003e\u003e```@tailwind components;```\n\n\u003e\u003e```@tailwind utilities;```\n\n\u003eand thats almost it , now in the terminal -\u003e\n### ```npm run start```\n\n\u003eonce this is done and success is found , please continue updating the \n\n\u003ething with the changes to the app.js lol . \n---\n**TO UNDERSTAND THE WORK-FLOW FOLLOW THIS ROUTE .**\n\n\u003e the outer layer is same but all the inner things change , this is intentional bacause the same layout takes less time to render and thus is better optimization .this approach is called the ```layout first approach``` .this works really well and thus we need to cover a few things -\u003e \n\n\u003e\u003e Default HOC : a default higher order component is the thing that we need that does not change , think the outer layer of chrome browser , think the layout of snapchat camera , these things does not change but the inner processes change a lot .\n\u003e\u003eDefault Layout: this is a default layout for how the page is going to look inside  , like different components making the inner things , that is the things . \n\u003e\u003eReact Router dom: we need this for fast loading  to our dom , download using npm . -\u003e \n### ```npm i react-router-dom```\n---\n**TO CONNECT COMPONENTS WE DO 3 THINGS**\n\u003edefault layout rendered in a new folder inside [src](./taily-windy/src) called layouts.\n\u003eafter downloading react-router-dom  add the browserRouter inside the index.js  to make sure that we are free of fuss by adding the browserRouter outside the browserRouter. check the index.js for more details \n\u003eafter this we need to open the api development of the react-router dom that changed , the ones with the router and the routes . this is really mesy and i was not able to do this really well .\n\u003edealt with the problem we make DEFAULT HOC inside the [src](./taily-windy/src) and then make a new default.HOC.js in this process make the biggest cover we needed to make . this is the layout \n\n# default layout -\u003e default HOC -\u003e app.js -\u003e index.js -\u003e rendered .  and this is how we have made tailwind-css work . \n\n\n\n^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiritocode1%2Ftailwind-css-beginner-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiritocode1%2Ftailwind-css-beginner-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiritocode1%2Ftailwind-css-beginner-practice/lists"}