{"id":25319467,"url":"https://github.com/yann-github/acme-rockets-tailwindcss","last_synced_at":"2026-04-19T15:01:51.580Z","repository":{"id":183078589,"uuid":"669558402","full_name":"Yann-GitHub/acme-rockets-tailwindcss","owner":"Yann-GitHub","description":"Acme Rockets is a static website implementing Tailwind CSS","archived":false,"fork":false,"pushed_at":"2023-07-22T17:39:24.000Z","size":466,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T20:41:40.907Z","etag":null,"topics":["dark-mode","prettier-plugin-tailwindcss","render-deployment","responsive-design","tailwindcss"],"latest_commit_sha":null,"homepage":"https://a-rockets.onrender.com","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/Yann-GitHub.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}},"created_at":"2023-07-22T17:05:29.000Z","updated_at":"2023-07-22T17:35:25.000Z","dependencies_parsed_at":"2023-07-22T18:48:27.599Z","dependency_job_id":null,"html_url":"https://github.com/Yann-GitHub/acme-rockets-tailwindcss","commit_stats":null,"previous_names":["yann-github/acme-rockets-tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Facme-rockets-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Facme-rockets-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Facme-rockets-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yann-GitHub%2Facme-rockets-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yann-GitHub","download_url":"https://codeload.github.com/Yann-GitHub/acme-rockets-tailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713310,"owners_count":20983683,"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":["dark-mode","prettier-plugin-tailwindcss","render-deployment","responsive-design","tailwindcss"],"created_at":"2025-02-13T20:40:32.862Z","updated_at":"2026-04-19T15:01:46.536Z","avatar_url":"https://github.com/Yann-GitHub.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Acme Rockets - Tailwind project\n\nThis repository hosts the codebase for Acme Rockets, a simple static website implementing Tailwind CSS and following CSS best practices. The website is deployed on render.com and can be accessed at https://a-rockets.onrender.com. \n\n## Get started with Tailwind CSS\n\n- Initialize a project with npm.\n```bash\nnpm init -y\n```\n\n- Install Tailwind CSS as a dev dependency.\n```bash\nnpm install -D tailwindcss@latest\n```\n\n- Initialize a project with Tailwind CSS and create your 'tailwind.config.js'.\n```bash\nnpx tailwindcss init\n```\n\n- Modify the tailwind.config.js file to include the paths of your CSS and JS files in the \"content\" property:\n```js\ncontent: [\"./build/*.html\", \"./build/js/*.js\"],\n```\n\n- Add the Tailwind directives to your CSS file. Create an 'input.css' file in the 'src' folder and include the following directives:.\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n In some cases, you might encounter the error \"unknown at-rule @tailwind\" in VSCode. To resolve this, either modify the VSCode settings to avoid errors for future projects or add a '.vscode/settings.json' file with the following code (https://stackoverflow.com/questions/65247279/unknown-at-rule-tailwind-cssunknownatrules):\n```json\n{\n  \"files.associations\": {\n    \"*.css\": \"tailwindcss\"\n  }\n}\n```\n- Add a script in the 'package.json' to compile the CSS file. Run the command \"npm run tailwind\" in a dedicated terminal to generate the CSS file in the 'build/css' folder:\n```json\n\"tailwind\": \"npx tailwindcss -i ./src/input.css -o ./build/css/style.css --watch\"\n```\n\n## Topics covered\n\n1. Class names, logic and using Emmet to speed up the process.\n2. Responsive design - breakpoints - media queries.\n3. Light \u0026 Dark mode depending on the user's preferences.\n4. Hamburger menu with Html symbols or Pseudo elements (before, after) for better accessibility and animation.\n5. Custom classes \u0026 arbitrary values + extend and override tailwind classes with custom classes (see tailwind.config.js).\n6. Css config for sections full height depending on the viewport !!\n7. Prettier plugin for tailwindcss. (npm install -D prettier-plugin-tailwindcss)\n8. Deployement on render.com (https://a-rockets.onrender.com).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyann-github%2Facme-rockets-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyann-github%2Facme-rockets-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyann-github%2Facme-rockets-tailwindcss/lists"}