{"id":21224819,"url":"https://github.com/chaphasilor/tailwind-template","last_synced_at":"2026-04-18T04:33:57.807Z","repository":{"id":54454685,"uuid":"306134375","full_name":"Chaphasilor/tailwind-template","owner":"Chaphasilor","description":"Get TailwindCSS up and running as quickly as possible, no need for frameworks! Includes purging, bundling and minifying out-of-the-box.","archived":false,"fork":false,"pushed_at":"2021-07-24T19:48:08.000Z","size":1205,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-08T23:02:02.592Z","etag":null,"topics":["css","html","static","static-site","tailwind","tailwindcss","template","templates","webpack"],"latest_commit_sha":null,"homepage":"","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/Chaphasilor.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":"2020-10-21T20:01:42.000Z","updated_at":"2021-02-16T21:16:54.000Z","dependencies_parsed_at":"2022-08-13T16:10:40.749Z","dependency_job_id":null,"html_url":"https://github.com/Chaphasilor/tailwind-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Chaphasilor/tailwind-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaphasilor%2Ftailwind-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaphasilor%2Ftailwind-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaphasilor%2Ftailwind-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaphasilor%2Ftailwind-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chaphasilor","download_url":"https://codeload.github.com/Chaphasilor/tailwind-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaphasilor%2Ftailwind-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31957052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":["css","html","static","static-site","tailwind","tailwindcss","template","templates","webpack"],"created_at":"2024-11-20T23:00:08.586Z","updated_at":"2026-04-18T04:33:57.790Z","avatar_url":"https://github.com/Chaphasilor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Template\n\n## Quick Start\n\n1. Install all dependencies:\n\n    ```shell\n    npm i\n    ```\n\n2. Build the project **for development** and have it open in your default browser:\n\n    ```shell\n    npm run watch\n    ```\n\n   **Tip**: [Browsersync](https://browsersync.io/) is used to serve the project. It will automatically sync reloads, scroll events, form inputs and more between different tabs/browsers/clients. So you can open the URL displayed in the terminal on your phone to test both desktop and mobile layout at the same time!\n\n3. Build the project **for production**:\n\n   ```shell\n   npm run build\n   ```\n\n   *On Windows you might get a warning about the command `export` not being recognized. You can safely ignore it.*\n\n   This will minify your bundle and apply some additional optimizations through webpack. After building for production, you can simply copy the `static`-folder and upload it to your web server, etc.\n\n## Features\n\n\u003c!-- TODO --\u003e\nTODO\n\n## Working With The Template\n\n### File Management\n\n- Place any static files (e.g. html, images) into the `static/` folder\n- Place any files you want to run through webpack into the `src/` folder **and import the files in `index.js`** (or inside another js file that is already imported in `index.js`).  \n  Check out how it's done with `example-dependency.js` :)\n- If you add aditional html pages, remember to include the webpack bundles in each one!  \n  Just include `\u003cscript src=\"webpack/tailwind.bundle.js\"\u003e\u003c/script\u003e` inside the head and `\u003cscript src=\"webpack/index.bundle.js\"\u003e\u003c/script\u003e` at the bottom of the html file.\n- Don't put anything inside `static/webpack/` as the folder is cleared on every build\n- If you change the output filename(s) inside the webpack config, you'll have to manually change them in each webpack bundle import (see above)\n\n### Tailwind\n\n[TailwindCSS](https://tailwindcss.com/) is included out-of-the-box. A default config with minor additions is used. For more info, keep reading.\n\n#### Colors\n\n- All colors from the [default palette](https://tailwindcss.com/docs/customizing-colors) are available\n- All additional colors from the [color palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) are **also** available. They can be accessed both in *lowercase* or *dromedarCase* for convenience (docs use dromedarCase, but I like my class names lowercase...).  \n  *Keep in mind that some colors from the the color palette reference are aliased in the default palette ([take a look at this](https://github.com/tailwindlabs/tailwindcss/blob/3de0c48bd67f47c94f484bf7d92dc41e707e9abc/stubs/defaultConfig.stub.js#L15-L28)). So `amber` is actually the exact same as `yellow`. This shouldn't be an issue for you, just don't get a headache trying to figure out why a color isn't working ^^.*\n\n#### Customizing\n\nYou can simply load any of your own Tailwind configurations by requiring the file inside the `presets`-array in `tailwind.config.js`. Just make sure to add your config *after* the default presets so you don't break any features.\n\n### Troubleshooting\n\n#### Browsersync errors\n\nOn Windows, you need Visual C++ runtime libraries for the installation to work. More info [here](https://www.browsersync.io/docs#windows-users). Once that is fixed, try running `npm i` again.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaphasilor%2Ftailwind-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaphasilor%2Ftailwind-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaphasilor%2Ftailwind-template/lists"}