{"id":20709596,"url":"https://github.com/crowdstrike/tailwind-toucan-base","last_synced_at":"2025-04-03T02:10:47.542Z","repository":{"id":36987889,"uuid":"406459575","full_name":"CrowdStrike/tailwind-toucan-base","owner":"CrowdStrike","description":"Base Tailwind config for the Toucan design system.","archived":false,"fork":false,"pushed_at":"2025-03-19T02:39:26.000Z","size":1536,"stargazers_count":15,"open_issues_count":14,"forks_count":12,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-21T10:53:42.879Z","etag":null,"topics":["tailwind"],"latest_commit_sha":null,"homepage":"https://tailwind-toucan-base.pages.dev/","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/CrowdStrike.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"publiccode":null,"codemeta":null}},"created_at":"2021-09-14T17:19:23.000Z","updated_at":"2025-03-19T02:37:48.000Z","dependencies_parsed_at":"2023-09-22T02:58:39.817Z","dependency_job_id":"bcd0287b-fb60-419c-9934-49eb3cf427f6","html_url":"https://github.com/CrowdStrike/tailwind-toucan-base","commit_stats":{"total_commits":234,"total_committers":7,"mean_commits":33.42857142857143,"dds":"0.45299145299145294","last_synced_commit":"5fa45df4d987766c589a959f75782a3dfb60c34c"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrowdStrike%2Ftailwind-toucan-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrowdStrike%2Ftailwind-toucan-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrowdStrike%2Ftailwind-toucan-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrowdStrike%2Ftailwind-toucan-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrowdStrike","download_url":"https://codeload.github.com/CrowdStrike/tailwind-toucan-base/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922247,"owners_count":20855345,"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":["tailwind"],"created_at":"2024-11-17T02:07:07.134Z","updated_at":"2025-04-03T02:10:47.516Z","avatar_url":"https://github.com/CrowdStrike.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @crowdstrike/tailwind-toucan-base\n\nA Tailwind preset that provides the base styles for CrowdStrike's Toucan design system.\n\n## Usage\n\n```bash\nyarn add @crowdstrike/tailwind-toucan-base\n#\nnpm install @crowdstrike/tailwind-toucan-base\n#\npnpm add @crowdstrike/tailwind-toucan-base\n```\n\n### Tailwind\n\n_Note_: This preset is presently only tested with Tailwind v2\n\n```js\n// tailwind.config.js\n\nmodule.exports = {\n  presets: [require('@crowdstrike/tailwind-toucan-base')],\n  extends: {\n    // your customizations here\n  }\n};\n```\n\n### CSS `@import`\n\nIf your packager supports importing styles directly from an npm package, the Toucan styles are pre-built and can be imported at:\n\n```css\n@import \"@crowdstrike/tailwind-toucan-base\";\n```\n\n### CDN Usage\n\nMany JS CDNs scrape NPM and automatically serve and cache assets\ndeployed to NPM.\n\nHere as an example with JSDelivr\n```\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@crowdstrike/tailwind-toucan-base/toucan.css\"\u003e\n```\n\n## Previewing the config locally\n\n```bash\npnpm start\n```\nwhich is an alias for:\n\n```bash\npnpm run build:preview\nnpx http-server ./dist\n```\n\nNote that changes to `src` or `build` scripts will require re-running `pnpm start`.\n\n## Previewing manual tests locally\n\n```bash\npnpm build\n```\n\nthen, open the `manual-test.html`\n```bash\nfirefox ./manual-test.html\n```\n\nOr, along with the tailwind-preview\n```bash\npnpm start\n```\n\nand visit `http://localhost:8080/manual`\n\n## Importing colors and shadows from Figma\n\nThis addon provides the ability to pull our palette information directly from Figma files and store them in\n`themes.json` which is used by the Tailwind configuration to set up our CSS.\n\nTo import the colors run:\n\n```bash\nFIGMA_TOKEN=some-key \\\nLIGHT_ID=fileId \\\nDARK_ID=fileId \\\nMEZZANINE_ID=fileId \\\n  pnpm run figma:export-styles\n```\n\n- `FIGMA_TOKEN` here is figma [Personal Access Token](https://www.figma.com/developers/api#access-tokens).\n- `LIGHT_ID`, `DARK_ID`, and `MEZZANINE_ID` are `fileId`s that can be obtained from the URL of the figma project containing the color tokens.\n\n...and commit the changes to `themes.json`.\n\nIf you see any errors reported then you _may_ need to ensure that the Figma file is set up correctly (and e.g.\nthere are corresponding colors across each of the palettes).\n\nIf there are resulting changes to the output, you'll need to update the test snapshots.\nThat can be done via `pnpm exec vitest --update`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrowdstrike%2Ftailwind-toucan-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrowdstrike%2Ftailwind-toucan-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrowdstrike%2Ftailwind-toucan-base/lists"}