├── .circleci └── config.yml ├── .editorconfig ├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── PULL_REQUEST_TEMPLATE.md ├── renovate.json └── tailwind-intellisense.jpg ├── .gitignore ├── .husky ├── post-checkout ├── post-merge └── pre-commit ├── .markdownlintrc ├── .npmrc ├── .nvmrc ├── .prettierrc ├── .versionrc.json ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── example ├── .gitignore ├── README.md ├── eslint.config.mjs ├── index.html ├── package.json ├── postcss.config.js ├── public │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon.ico │ ├── robots.txt │ ├── tile-wide.png │ └── tile.png ├── scripts │ └── deploy.mjs ├── src │ ├── App.tsx │ ├── app.module.css │ ├── components │ │ ├── ConversationLog │ │ │ ├── conversationlog.module.css │ │ │ └── index.tsx │ │ ├── Message │ │ │ ├── index.tsx │ │ │ └── message.module.css │ │ ├── MessageGroup │ │ │ ├── index.tsx │ │ │ └── messagegroup.module.css │ │ ├── Textarea │ │ │ ├── index.tsx │ │ │ └── textarea.module.css │ │ └── Widget │ │ │ ├── index.tsx │ │ │ └── widget.module.css │ ├── index.css │ ├── index.tsx │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts ├── package-lock.json ├── package.json ├── plugin ├── eslint.config.mjs ├── jest.config.js ├── package.json ├── postcss.config.js ├── rollup.config.js ├── src │ ├── __snapshots__ │ │ ├── index.spec.ts.snap │ │ └── theme.spec.ts.snap │ ├── index.spec.ts │ ├── index.ts │ ├── styles.css │ ├── theme.spec.ts │ ├── theme.ts │ └── types │ │ └── tailwindcss.d.ts ├── tailwind.config.js └── tsconfig.json └── utils └── example-package-updater.js /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | orbs: 3 | node: circleci/node@6.3.0 4 | 5 | references: 6 | executor: &executor 7 | executor: 8 | name: node/default 9 | tag: lts 10 | 11 | workspace_root: &workspace_root ~/project 12 | 13 | attach_workspace: &attach_workspace 14 | attach_workspace: 15 | at: *workspace_root 16 | 17 | filters_tags: &filters_tags 18 | filters: 19 | tags: 20 | only: /.*/ 21 | 22 | jobs: 23 | build: 24 | <<: *executor 25 | steps: 26 | - checkout 27 | - node/install-packages: 28 | cache-version: '{{ .Environment.CACHE_VERSION }}' 29 | - persist_to_workspace: 30 | root: *workspace_root 31 | paths: . 32 | 33 | test: 34 | <<: *executor 35 | steps: 36 | - *attach_workspace 37 | - run: npm run test:ci --workspaces 38 | 39 | deploy: 40 | <<: *executor 41 | environment: 42 | NODE_DEBUG: gh-pages 43 | steps: 44 | - *attach_workspace 45 | - run: example/scripts/deploy.mjs 46 | 47 | publish: 48 | <<: *executor 49 | steps: 50 | - *attach_workspace 51 | - run: npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN 52 | - run: npm publish --workspace=@zendeskgarden/tailwindcss 53 | 54 | workflows: 55 | main: 56 | jobs: 57 | - build: 58 | <<: *filters_tags 59 | - test: 60 | requires: 61 | - build 62 | <<: *filters_tags 63 | - deploy: 64 | requires: 65 | - test 66 | context: writer 67 | - publish: 68 | requires: 69 | - test 70 | context: maintainer 71 | filters: 72 | tags: 73 | only: /^v\d+\.\d+\.\d+(-\S*)?$/ 74 | branches: 75 | ignore: /.*/ 76 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @zendeskgarden/maintainers 2 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic 9 | status, nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards 42 | of acceptable behavior and will take appropriate and fair corrective action 43 | in response to any behavior that they deem inappropriate, threatening, 44 | offensive, or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or 47 | reject comments, commits, code, wiki edits, issues, and other contributions 48 | that are not aligned to this Code of Conduct, and will communicate reasons 49 | for moderation decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies 54 | when an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail 56 | address, posting via an official social media account, or acting as an 57 | appointed representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | garden@zendesk.com. All complaints will be reviewed and investigated promptly 64 | and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of 67 | the reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in 72 | determining the consequences for any action they deem in violation of this 73 | Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series 87 | of actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external 93 | channels like social media. Violating these terms may lead to a temporary or 94 | permanent ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited 104 | interaction with those enforcing the Code of Conduct, is allowed during this 105 | period. Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within 114 | the community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.0, available at 120 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 121 | 122 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 123 | enforcement ladder](https://github.com/mozilla/diversity). 124 | 125 | [homepage]: https://www.contributor-covenant.org 126 | 127 | For answers to common questions about this code of conduct, see the FAQ at 128 | https://www.contributor-covenant.org/faq. Translations are available at 129 | https://www.contributor-covenant.org/translations. 130 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Garden 2 | 3 | Keen to contribute to Garden? We're stoked to have you join us. You may 4 | find that opening an 5 | [issue](https://github.com/zendeskgarden/tailwindcss/issues) is the 6 | best way to get a conversation started. When you're ready to submit a 7 | pull request, follow the [steps](#pull-request-workflow) below. We 8 | follow a [code of conduct](CODE_OF_CONDUCT.md) as our guide for 9 | community behavior. 10 | 11 | ## Versioning Workflow 12 | 13 | Garden follows [semantic versioning](https://semver.org/). We release 14 | patch versions for bugfixes, minor versions for new features, and major 15 | versions for any breaking changes. 16 | 17 | The [pull request workflow](#pull-request-workflow) along with the [PR 18 | template](PULL_REQUEST_TEMPLATE.md) will help us determine how to 19 | version your contributions. 20 | 21 | All changes are recorded in the [changelog](../CHANGELOG.md) file. 22 | 23 | ## Development Workflow 24 | 25 | Before you start, be sure [npm](https://www.npmjs.com/package/npm) is installed 26 | on your system. After you clone this repo, run `npm install` to install 27 | dependencies needed for development. After installation, the following commands 28 | are available: 29 | 30 | - `npm test` to run package tests. 31 | - `npm run lint` to enforce consistent code conventions. Note this is run 32 | as a git `pre-commit` hook. 33 | - `npm run format` to enforce code style with opinionated formats. Note 34 | this is run as a git `pre-commit` hook. 35 | 36 | ## Pull Request Workflow 37 | 38 | 1. Fork the repo and create a branch. Format your branch name as 39 | `username/verb-noun`. 40 | 1. If you haven't yet, get comfortable with the [development 41 | environment](#development-workflow). 42 | 1. Regularly `git commit` locally and `git push` to the remote branch. 43 | Use whatever casual commit messaging you find suitable. We'll help 44 | you apply an appropriate squashed [conventional 45 | commit](https://conventionalcommits.org/) message when it's time to 46 | merge to the main branch. 47 | 1. If your changes result in a major modification, be sure all 48 | documentation is up-to-date. 49 | 1. When your branch is ready, open a new pull request via GitHub. 50 | The repo [PR template](PULL_REQUEST_TEMPLATE.md) will guide you 51 | toward describing your contribution in a format that is ultimately 52 | suitable for a structured conventional commit (used to automatically 53 | advance the published package version). 54 | 1. Every PR must pass CI checks and receive at least one :+1: to be 55 | considered for merge. 56 | 1. Garden 57 | [maintainers](https://github.com/orgs/zendeskgarden/teams/maintainers) 58 | will manage the squashed merge to the main branch, using your PR title and 59 | description as the scope, description, and body for a conventional 60 | commit. 61 | 62 | ## License 63 | 64 | By contributing to Garden, you agree that your contributions will be 65 | licensed under the [Apache License, Version 2.0](../LICENSE.md). 66 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | - [ ] **BREAKING CHANGE?** 7 | 8 | ## Description 9 | 10 | 13 | 14 | ## Detail 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:recommended", "group:allNonMajor"], 3 | "rebaseWhen": "behind-base-branch", 4 | "schedule": ["on Monday every 9 weeks of the year starting on the 3rd week"], 5 | "postUpdateOptions": ["npmDedupe"] 6 | } 7 | -------------------------------------------------------------------------------- /.github/tailwind-intellisense.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/tailwindcss/18df9fc1757de39b50c99ed1b378cea3d905af02/.github/tailwind-intellisense.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | dist 3 | node_modules 4 | yarn.lock 5 | *.log 6 | -------------------------------------------------------------------------------- /.husky/post-checkout: -------------------------------------------------------------------------------- 1 | if [[ $GIT_PARAMS == *1 ]]; then npm ci --ignore-scripts; fi 2 | -------------------------------------------------------------------------------- /.husky/post-merge: -------------------------------------------------------------------------------- 1 | npm ci --ignore-scripts 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm run lint && npm run format 2 | -------------------------------------------------------------------------------- /.markdownlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "first-line-h1": false, 4 | "first-header-h1": false, 5 | "MD013": { 6 | "line_length": 100, 7 | "tables": false 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/* 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.versionrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "packageFiles": [ 3 | { 4 | "filename": "./plugin/package.json", 5 | "type": "json" 6 | } 7 | ], 8 | "bumpFiles": [ 9 | { 10 | "filename": "./plugin/package.json", 11 | "type": "json" 12 | }, 13 | { 14 | "filename": "./example/package.json", 15 | "updater": "utils/example-package-updater.js" 16 | }, 17 | { 18 | "filename": "./package-lock.json", 19 | "type": "json" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. 4 | 5 | ## [4.0.2](https://github.com/zendeskgarden/tailwindcss/compare/v4.0.1...v4.0.2) (2024-10-30) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * **deps:** update dependency @zendeskgarden/css-bedrock to v10 ([#250](https://github.com/zendeskgarden/tailwindcss/issues/250)) ([e17d70b](https://github.com/zendeskgarden/tailwindcss/commit/e17d70b960a1ce9eba6bed920b62ca1efa4953b7)) 11 | 12 | ## [4.0.1](https://github.com/zendeskgarden/tailwindcss/compare/v4.0.0...v4.0.1) (2024-10-08) 13 | 14 | 15 | ### Bug Fixes 16 | 17 | * dark mode shadows ([#243](https://github.com/zendeskgarden/tailwindcss/issues/243)) ([e0ce600](https://github.com/zendeskgarden/tailwindcss/commit/e0ce60099e2d871069b291333f026dbfd156ff4e)) 18 | 19 | ## [4.0.0](https://github.com/zendeskgarden/tailwindcss/compare/v3.1.1...v4.0.0) (2024-10-03) 20 | 21 | 22 | ### ⚠ BREAKING CHANGES 23 | 24 | * Utility colors now map to the new v9 [color](https://garden.zendesk.com/design/color) palette 25 | - Expanded to support light & dark modes. See [theme colors](https://garden.zendesk.com/components/theme-object#colors) for details. 26 | - No longer offers secondary color muted (i.e. `royal-M400`) variants 27 | - Adds new `opacity` utilities that correspond to v9 [theme opacity](https://garden.zendesk.com/components/theme-object#opacity) 28 | 29 | ### Features 30 | 31 | * upgrade to Garden theming v9 ([#242](https://github.com/zendeskgarden/tailwindcss/issues/242)) ([b54e338](https://github.com/zendeskgarden/tailwindcss/commit/b54e33850599fef8c331328e3ada03630433ea65)) 32 | 33 | 34 | ### Bug Fixes 35 | 36 | * **deps:** update dependency postcss to v8.4.31 [security] ([#181](https://github.com/zendeskgarden/tailwindcss/issues/181)) ([1c76ffd](https://github.com/zendeskgarden/tailwindcss/commit/1c76ffdb512f3d4027d1324a7f5b9efa0c38b276)) 37 | * **deps:** update dependency styled-components to v6 ([#179](https://github.com/zendeskgarden/tailwindcss/issues/179)) ([4a1f89e](https://github.com/zendeskgarden/tailwindcss/commit/4a1f89e9617b033dd1889a43fca5033d3960d5e1)) 38 | 39 | ## [4.0.0-next.0](https://github.com/zendeskgarden/tailwindcss/compare/v3.1.1...v4.0.0-next.0) (2024-04-29) 40 | 41 | 42 | ### ⚠ BREAKING CHANGES 43 | 44 | * upgrade to Garden theming v9 (pre-release) (#223) 45 | 46 | ### Features 47 | 48 | * upgrade to Garden theming v9 (pre-release) ([#223](https://github.com/zendeskgarden/tailwindcss/issues/223)) ([0e91f68](https://github.com/zendeskgarden/tailwindcss/commit/0e91f687b6fe84344d622c6cbfda411d86d515ff)) 49 | 50 | 51 | ### Bug Fixes 52 | 53 | * **deps:** update dependency postcss to v8.4.31 [security] ([#181](https://github.com/zendeskgarden/tailwindcss/issues/181)) ([1c76ffd](https://github.com/zendeskgarden/tailwindcss/commit/1c76ffdb512f3d4027d1324a7f5b9efa0c38b276)) 54 | * **deps:** update dependency styled-components to v6 ([#179](https://github.com/zendeskgarden/tailwindcss/issues/179)) ([4a1f89e](https://github.com/zendeskgarden/tailwindcss/commit/4a1f89e9617b033dd1889a43fca5033d3960d5e1)) 55 | 56 | ### [3.1.1](https://github.com/zendeskgarden/tailwindcss/compare/v3.1.0...v3.1.1) (2023-07-20) 57 | 58 | ## [3.1.0](https://github.com/zendeskgarden/tailwindcss/compare/v3.0.1...v3.1.0) (2023-06-16) 59 | 60 | 61 | ### Features 62 | 63 | * **plugin:** update focus ring styles ([#164](https://github.com/zendeskgarden/tailwindcss/issues/164)) ([143a0fe](https://github.com/zendeskgarden/tailwindcss/commit/143a0fe4a8c562d54c904cb76e0e1a4983e57354)) 64 | 65 | 66 | ### Bug Fixes 67 | 68 | * **deps:** update dependency @testing-library/react to v13 ([#124](https://github.com/zendeskgarden/tailwindcss/issues/124)) ([37b2ec1](https://github.com/zendeskgarden/tailwindcss/commit/37b2ec1170255841ea3d50675cfebcd6052b1bbf)) 69 | * **deps:** update dependency @testing-library/user-event to v14 ([#123](https://github.com/zendeskgarden/tailwindcss/issues/123)) ([a97a617](https://github.com/zendeskgarden/tailwindcss/commit/a97a617eded2962492e74eafc5d3fbc5d12f60c1)) 70 | * **deps:** update dependency @types/react to v18 ([#125](https://github.com/zendeskgarden/tailwindcss/issues/125)) ([59d1d1d](https://github.com/zendeskgarden/tailwindcss/commit/59d1d1d6dedefbd6e806ca1074898f7fcfb6b295)) 71 | * **deps:** update dependency @types/react-dom to v18 ([#126](https://github.com/zendeskgarden/tailwindcss/issues/126)) ([903279c](https://github.com/zendeskgarden/tailwindcss/commit/903279cca5a086ef7e0501c916f1189c99ec8222)) 72 | * **deps:** update dependency postcss-focus-visible to v7 ([#136](https://github.com/zendeskgarden/tailwindcss/issues/136)) ([a016135](https://github.com/zendeskgarden/tailwindcss/commit/a016135e7d005ea8334ceb55d9bc445ab4819353)) 73 | * **deps:** update react monorepo to v18 ([#127](https://github.com/zendeskgarden/tailwindcss/issues/127)) ([9563c8c](https://github.com/zendeskgarden/tailwindcss/commit/9563c8cb2c7d6e6f675a92966f794b414911a34c)) 74 | * **postcss-focus-visible:** correct breaking focus ([#163](https://github.com/zendeskgarden/tailwindcss/issues/163)) ([8e99cdb](https://github.com/zendeskgarden/tailwindcss/commit/8e99cdb19c8d6e60fe27a03fded3057b552babf1)) 75 | 76 | ### [3.0.1](https://github.com/zendeskgarden/tailwindcss/compare/v3.0.0...v3.0.1) (2022-02-10) 77 | 78 | 79 | ### Bug Fixes 80 | 81 | * restore styles.css package dist ([#114](https://github.com/zendeskgarden/tailwindcss/issues/114)) ([34c6019](https://github.com/zendeskgarden/tailwindcss/commit/34c60192e76ee318de7a7b08e44ce0c74c79d1f7)) 82 | 83 | ## [3.0.0](https://github.com/zendeskgarden/tailwindcss/compare/v2.0.0...v3.0.0) (2021-12-28) 84 | 85 | 86 | ### ⚠ BREAKING CHANGES 87 | 88 | * **deps:** bumps `tailwindcss` peer dependency from v2.0 to 3.0. 89 | 90 | Co-authored-by: Renovate Bot 91 | Co-authored-by: Jonathan Zempel 92 | 93 | ### Bug Fixes 94 | 95 | * **deps:** update all non-major dependencies ([#68](https://github.com/zendeskgarden/tailwindcss/issues/68)) ([e79ac63](https://github.com/zendeskgarden/tailwindcss/commit/e79ac639a93badcb28fa7808569323c84c599748)) 96 | * **deps:** update all non-major dependencies ([#77](https://github.com/zendeskgarden/tailwindcss/issues/77)) ([5288eeb](https://github.com/zendeskgarden/tailwindcss/commit/5288eeb1debc3b2ebfb445b9c38d1a84d3e7a029)) 97 | * **deps:** update all non-major dependencies ([#78](https://github.com/zendeskgarden/tailwindcss/issues/78)) ([85f528e](https://github.com/zendeskgarden/tailwindcss/commit/85f528e281aaecafc2192f2a87afa0b1ac2f81d5)) 98 | * **deps:** update all non-major dependencies ([#84](https://github.com/zendeskgarden/tailwindcss/issues/84)) ([b4a39ad](https://github.com/zendeskgarden/tailwindcss/commit/b4a39ada856286d9e1188bc1817fbabf99fe02ef)) 99 | * **deps:** update all non-major dependencies ([#93](https://github.com/zendeskgarden/tailwindcss/issues/93)) ([ff5d401](https://github.com/zendeskgarden/tailwindcss/commit/ff5d40193cdf775cd63c3b9f0531fc067fe2ef36)) 100 | * **deps:** update dependency @testing-library/react to v12 ([#81](https://github.com/zendeskgarden/tailwindcss/issues/81)) ([c5d4fad](https://github.com/zendeskgarden/tailwindcss/commit/c5d4fad73c301c09e79acc26ad45c38c8810ddc3)) 101 | * **deps:** update dependency @testing-library/user-event to v13 ([#65](https://github.com/zendeskgarden/tailwindcss/issues/65)) ([98a9482](https://github.com/zendeskgarden/tailwindcss/commit/98a9482fffe787dd4afbf9e0ba8efb075e3140e2)) 102 | * **deps:** update dependency @types/node to v14 ([#74](https://github.com/zendeskgarden/tailwindcss/issues/74)) ([9b4d6db](https://github.com/zendeskgarden/tailwindcss/commit/9b4d6db8d78fb49c1b48642de949eb962709dc5a)) 103 | * **deps:** update dependency @zendeskgarden/css-bedrock to v9 ([#75](https://github.com/zendeskgarden/tailwindcss/issues/75)) ([865a6c6](https://github.com/zendeskgarden/tailwindcss/commit/865a6c68e77c615aabf990400c25f5a17ec5d0f7)) 104 | * **deps:** update dependency postcss to v7.0.36 [security] ([#67](https://github.com/zendeskgarden/tailwindcss/issues/67)) ([4d86e6d](https://github.com/zendeskgarden/tailwindcss/commit/4d86e6db4f2ad39d34c931d98b54c3fdec1e21f3)) 105 | 106 | 107 | * **deps:** update dependency tailwindcss to v3 ([#100](https://github.com/zendeskgarden/tailwindcss/issues/100)) ([287dfca](https://github.com/zendeskgarden/tailwindcss/commit/287dfcaa21c7a7a8e012cc41817681dbf5467887)) 108 | 109 | ## [2.0.0](https://github.com/zendeskgarden/tailwindcss/compare/v1.1.0...v2.0.0) (2021-03-29) 110 | 111 | 112 | ### ⚠ BREAKING CHANGES 113 | 114 | * upgrade to Tailwind CSS 2.0 (#60) 115 | 116 | ### Features 117 | 118 | * upgrade to Tailwind CSS 2.0 ([#60](https://github.com/zendeskgarden/tailwindcss/issues/60)) ([8918401](https://github.com/zendeskgarden/tailwindcss/commit/8918401140ba1ba0e811d70d42bc4bc83f16efbd)) 119 | 120 | 121 | ### Bug Fixes 122 | 123 | * **deps:** update all non-major dependencies ([#40](https://github.com/zendeskgarden/tailwindcss/issues/40)) ([83278a3](https://github.com/zendeskgarden/tailwindcss/commit/83278a310acfa4607c608c46d693fc42351f789c)) 124 | * **deps:** update all non-major dependencies ([#50](https://github.com/zendeskgarden/tailwindcss/issues/50)) ([566ad2f](https://github.com/zendeskgarden/tailwindcss/commit/566ad2ff3ac27366e4369fd3097e37719c22b38f)) 125 | * **deps:** update dependency @craco/craco to v6 ([#56](https://github.com/zendeskgarden/tailwindcss/issues/56)) ([94160bd](https://github.com/zendeskgarden/tailwindcss/commit/94160bde519bc144502ed5a4f930bccc93bdffe5)) 126 | * **deps:** update dependency @types/react to v17 ([#57](https://github.com/zendeskgarden/tailwindcss/issues/57)) ([48c416f](https://github.com/zendeskgarden/tailwindcss/commit/48c416f6542e6ce96f2d275bd62e8eefac584664)) 127 | * **deps:** update dependency @types/react-dom to v17 ([#58](https://github.com/zendeskgarden/tailwindcss/issues/58)) ([8edcaa7](https://github.com/zendeskgarden/tailwindcss/commit/8edcaa7587b61161b990606a72ee0a4665b2a7b2)) 128 | * **deps:** update dependency envalid to v7 ([#59](https://github.com/zendeskgarden/tailwindcss/issues/59)) ([f69abfb](https://github.com/zendeskgarden/tailwindcss/commit/f69abfb1c71a7d75125fc9294c71275c5b2a4c2a)) 129 | * **deps:** update dependency polished to v4 ([#44](https://github.com/zendeskgarden/tailwindcss/issues/44)) ([8237a17](https://github.com/zendeskgarden/tailwindcss/commit/8237a17b190ce1c36fd30b08a9755f8096746b8a)) 130 | * **deps:** update dependency react-scripts to v4 ([#45](https://github.com/zendeskgarden/tailwindcss/issues/45)) ([a1fae04](https://github.com/zendeskgarden/tailwindcss/commit/a1fae04869062335144b8cf5209ff224e6e3949f)) 131 | * **deps:** update react monorepo to v17 ([#46](https://github.com/zendeskgarden/tailwindcss/issues/46)) ([61f237e](https://github.com/zendeskgarden/tailwindcss/commit/61f237e0311bfe2adc8323cb5ec94e7102812dc7)) 132 | 133 | ## [1.1.0](https://github.com/zendeskgarden/tailwindcss/compare/v1.0.2...v1.1.0) (2020-10-20) 134 | 135 | 136 | ### Features 137 | 138 | * include pre-built utility styles ([#39](https://github.com/zendeskgarden/tailwindcss/issues/39)) ([ad2d164](https://github.com/zendeskgarden/tailwindcss/commit/ad2d164678aa8ebbc2ba25c85d76271bbb88e8e8)) 139 | 140 | 141 | ### Bug Fixes 142 | 143 | * npm publish ([#38](https://github.com/zendeskgarden/tailwindcss/issues/38)) ([c6884a1](https://github.com/zendeskgarden/tailwindcss/commit/c6884a1037eb40be1feafbc7aab178b1e7365f56)) 144 | 145 | ### [1.0.2](https://github.com/zendeskgarden/tailwindcss/compare/v1.0.1...v1.0.2) (2020-09-30) 146 | 147 | 148 | ### Bug Fixes 149 | 150 | * remove unintended product colors ([#37](https://github.com/zendeskgarden/tailwindcss/issues/37)) ([6ffefe1](https://github.com/zendeskgarden/tailwindcss/commit/6ffefe10453eea9455c94901a1b969c5dd385a6a)) 151 | 152 | ### [1.0.1](https://github.com/zendeskgarden/tailwindcss/compare/v1.0.0...v1.0.1) (2020-09-22) 153 | 154 | 155 | ### Bug Fixes 156 | 157 | * ensure preflight styles are removed when Garden bedrock is applied ([#36](https://github.com/zendeskgarden/tailwindcss/issues/36)) ([f23ec2d](https://github.com/zendeskgarden/tailwindcss/commit/f23ec2d17d5e950570522096e5dcce01e350ff95)) 158 | * **deps:** update all non-major dependencies ([#23](https://github.com/zendeskgarden/tailwindcss/issues/23)) ([191f007](https://github.com/zendeskgarden/tailwindcss/commit/191f007cbb735bdd27900b5dc2bdbd0181662ba8)) 159 | * **deps:** update dependency @testing-library/react to v11 ([#32](https://github.com/zendeskgarden/tailwindcss/issues/32)) ([8b6ba1d](https://github.com/zendeskgarden/tailwindcss/commit/8b6ba1d159bb79c39308cc91bde939762677c9ba)) 160 | * **deps:** update dependency @testing-library/user-event to v12.1.6 ([#35](https://github.com/zendeskgarden/tailwindcss/issues/35)) ([76c7cd5](https://github.com/zendeskgarden/tailwindcss/commit/76c7cd5e93716373de44809bf82592f664605c3b)) 161 | * **deps:** update dependency autoprefixer to v10 ([#33](https://github.com/zendeskgarden/tailwindcss/issues/33)) ([5e0659a](https://github.com/zendeskgarden/tailwindcss/commit/5e0659a4b56e017ea8419ea004fd5b6c84d2713e)) 162 | 163 | ## [1.0.0](https://github.com/zendeskgarden/tailwindcss/compare/v0.1.1...v1.0.0) (2020-09-03) 164 | 165 | 166 | ### Bug Fixes 167 | 168 | * **build:** allow standard-version deployments to update all yarn workspaces ([#21](https://github.com/zendeskgarden/tailwindcss/issues/21)) ([ce53c88](https://github.com/zendeskgarden/tailwindcss/commit/ce53c88f26b3bcd822323d5b685e4eca9395f4ea)) 169 | * **deps:** pin dependencies ([#10](https://github.com/zendeskgarden/tailwindcss/issues/10)) ([4d57c13](https://github.com/zendeskgarden/tailwindcss/commit/4d57c136e191e6c1ec8a09ac1d613a3240f05422)) 170 | * **deps:** update dependency @testing-library/jest-dom to v5 ([#14](https://github.com/zendeskgarden/tailwindcss/issues/14)) ([dcf3a16](https://github.com/zendeskgarden/tailwindcss/commit/dcf3a167b2940c40aecd6f26906e3c86923513ca)) 171 | * **deps:** update dependency @testing-library/react to v10 ([#15](https://github.com/zendeskgarden/tailwindcss/issues/15)) ([625de36](https://github.com/zendeskgarden/tailwindcss/commit/625de3628f07c256db79e43690b31df6e582719d)) 172 | * **deps:** update dependency @testing-library/user-event to v12 ([#16](https://github.com/zendeskgarden/tailwindcss/issues/16)) ([ed344a2](https://github.com/zendeskgarden/tailwindcss/commit/ed344a2cf0a241421fa0e71a2244105d88d8f37f)) 173 | * **deps:** update dependency @types/jest to v26 ([#17](https://github.com/zendeskgarden/tailwindcss/issues/17)) ([c5b61fa](https://github.com/zendeskgarden/tailwindcss/commit/c5b61fa36ca943baaae48c18eaa11d1342bf07ff)) 174 | 175 | ### [0.1.1](https://github.com/zendeskgarden/tailwindcss/compare/v0.1.0...v0.1.1) (2020-07-22) 176 | 177 | ## 0.1.0 (2020-07-22) 178 | 179 | 180 | ### Features 181 | 182 | * implement initial plugin ([#3](https://github.com/zendeskgarden/tailwindcss/issues/3)) ([1fc116e](https://github.com/zendeskgarden/tailwindcss/commit/1fc116e8a7533e2bc31a7f3afd7adf6126ea18c1)) 183 | * introduce create-react-app example with mock web widget implementation ([#7](https://github.com/zendeskgarden/tailwindcss/issues/7)) ([6bf3187](https://github.com/zendeskgarden/tailwindcss/commit/6bf3187649cd2246b6dcc257856175e291bea204)) 184 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Garden Design Tokens [![npm version][npm version badge]][npm version link] [![Build Status][build status badge]][build status link] 2 | 3 | 4 | 5 | [npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/tailwindcss 6 | [npm version link]: https://www.npmjs.com/package/@zendeskgarden/tailwindcss 7 | [build status badge]: https://flat.badgen.net/circleci/github/zendeskgarden/tailwindcss/main?label=build 8 | [build status link]: https://circleci.com/gh/zendeskgarden/tailwindcss/tree/main 9 | 10 | > :seedling: Garden is the design system by Zendesk 11 | 12 | A [Tailwind CSS](https://tailwindcss.com/) plugin for generating CSS based on the 13 | [Garden theme object](https://garden.zendesk.com/components/theme-object). 14 | 15 | ## Installation 16 | 17 | ```sh 18 | npm install @zendeskgarden/tailwindcss 19 | ``` 20 | 21 | ## Usage 22 | 23 | Add the plugin to your `tailwind.config.js`: 24 | 25 | ```js 26 | // tailwind.config.js 27 | module.exports = { 28 | plugins: [require('@zendeskgarden/tailwindcss')] 29 | }; 30 | ``` 31 | 32 | ### Utility Classes 33 | 34 | Apply Garden design tokens using 35 | [Tailwind utility classes](https://tailwindcss.com/docs/utility-first). 36 | 37 | ```html 38 | Avatar 43 | ``` 44 | 45 | ### Class Composition with `@apply` 46 | 47 | Tailwind provides several [PostCSS directives](https://tailwindcss.com/docs/functions-and-directives/) 48 | for inserting utility styles into CSS. The [@apply directive](https://tailwindcss.com/docs/functions-and-directives/#apply) 49 | allows consumers to reference a specific utility value. This enables support 50 | for more advanced functionality like [CSS modules](https://github.com/css-modules/css-modules). 51 | 52 | ```css 53 | .title { 54 | @apply text-grey-900; 55 | @apply dark:text-grey-300; 56 | @apply text-sm; 57 | @apply px-4; 58 | @apply font-light; 59 | } 60 | ``` 61 | 62 | ### Configuration 63 | 64 | The plugin provides an optional `includeBedrock` setting which 65 | can be used to disable Garden's [css-bedrock](https://github.com/zendeskgarden/css-components/tree/main/packages/bedrock#readme) 66 | reset. 67 | 68 | ```js 69 | // tailwind.config.js 70 | module.exports = { 71 | plugins: [ 72 | require('@zendeskgarden/tailwindcss')({ 73 | includeBedrock: false // defaults to true 74 | }) 75 | ] 76 | }; 77 | ``` 78 | 79 | ### Tooling 80 | 81 | The [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) 82 | VS Code plugin provides autocomplete, syntax highlighting, and linting 83 | based on your Tailwind config. It is very helpful as the Garden-provided 84 | utilities differ slightly from those shown in the Tailwind documentation. 85 | 86 | ![Tailwind CSS IntelliSense plugin example](.github/tailwind-intellisense.jpg) 87 | 88 | ## Contribution 89 | 90 | Thanks for your interest in Garden! Community involvement helps make our 91 | design system fresh and tasty for everyone. 92 | 93 | Got issues with what you find here? Please feel free to create an 94 | [issue](https://github.com/zendeskgarden/tailwindcss/issues/new). 95 | 96 | Community behavior is benevolently ruled by a [code of 97 | conduct](.github/CODE_OF_CONDUCT.md). Please participate accordingly. 98 | 99 | ## License 100 | 101 | Copyright 2025 Zendesk 102 | 103 | Licensed under the [Apache License, Version 2.0](LICENSE.md) 104 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | # dependencies 11 | node_modules 12 | 13 | # testing 14 | coverage 15 | 16 | # production 17 | build 18 | 19 | # misc 20 | .DS_Store 21 | .eslintcache 22 | .env.local 23 | .env.development.local 24 | .env.test.local 25 | .env.production.local 26 | .vscode/* 27 | !.vscode/extensions.json 28 | .idea 29 | *.suo 30 | *.ntvs* 31 | *.njsproj 32 | *.sln 33 | *.sw? 34 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Garden Tailwind CSS Example 2 | 3 | This is a mock implementation of a Zendesk-styled product using 4 | [Tailwind CSS](https://tailwindcss.com/) and the 5 | [@zendeskgarden/tailwindcss](https://github.com/zendeskgarden/tailwindcss) 6 | plugin. It includes no custom styling, with all styles being provided 7 | by Garden design tokens. 8 | 9 | This is not a fully functioning prototype. It is a showcase for different 10 | technologies and techniques to apply Garden design tokens with Tailwind. 11 | 12 | ## Technologies 13 | 14 | - [vite](https://vitejs.dev/) with TypeScript as the starter project 15 | - [Tailwind CSS](https://tailwindcss.com/) and the 16 | [@zendeskgarden/tailwindcss](https://github.com/zendeskgarden/tailwindcss) plugin 17 | - [CSS Modules](https://github.com/css-modules/css-modules) for component scoped styles 18 | -------------------------------------------------------------------------------- /example/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | import config from '@zendeskgarden/eslint-config'; 9 | import noticePlugin from '@zendeskgarden/eslint-config/plugins/notice.js'; 10 | import prettierConfig from 'eslint-config-prettier'; 11 | import typescriptPlugin from '@zendeskgarden/eslint-config/plugins/typescript.js'; 12 | import typescriptTypeCheckedPlugin from '@zendeskgarden/eslint-config/plugins/typescript-type-checked.js'; 13 | 14 | export default [ 15 | ...config, 16 | prettierConfig, 17 | noticePlugin, 18 | { 19 | ignores: ['build/**', '*.d.ts'] 20 | }, 21 | { 22 | files: ['**/*.{ts,tsx}'], 23 | ...typescriptPlugin, 24 | ...typescriptTypeCheckedPlugin 25 | }, 26 | { 27 | languageOptions: { 28 | parserOptions: { 29 | requireConfigFile: false 30 | } 31 | } 32 | }, 33 | { 34 | rules: { 35 | 'sort-imports': [1, { allowSeparatedGroups: true }], 36 | 'n/no-missing-import': 'off', 37 | '@typescript-eslint/strict-boolean-expressions': 'off' 38 | } 39 | } 40 | ]; 41 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | Zendesk Garden Tailwind CSS Example 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "example", 4 | "version": "0.1.0", 5 | "homepage": "./", 6 | "scripts": { 7 | "prebuild": "tsc", 8 | "build": "vite build", 9 | "format": "prettier-package-json --write && prettier --log-level warn '**/*.{ts,tsx,js,cjs,mjs,json,md}' '!build/**' --write", 10 | "lint": "npm run lint:js && npm run lint:md", 11 | "lint:js": "eslint . --max-warnings 0", 12 | "lint:md": "markdownlint README.md", 13 | "start": "vite --open", 14 | "test:ci": "npm run -- format --check && npm run lint" 15 | }, 16 | "dependencies": { 17 | "@zendeskgarden/react-forms": "9.3.0", 18 | "@zendeskgarden/react-theming": "9.3.0", 19 | "@zendeskgarden/react-typography": "9.3.0", 20 | "@zendeskgarden/tailwindcss": "4.0.2", 21 | "classnames": "2.5.1", 22 | "react": "18.3.1", 23 | "react-dom": "18.3.1", 24 | "styled-components": "6.1.13" 25 | }, 26 | "devDependencies": { 27 | "@types/react": "18.3.14", 28 | "@types/react-dom": "18.3.2", 29 | "@vitejs/plugin-react-swc": "3.7.2", 30 | "@zendeskgarden/eslint-config": "44.0.1", 31 | "@zendeskgarden/scripts": "2.4.3", 32 | "@zendeskgarden/svg-icons": "7.5.0", 33 | "@zendeskgarden/tailwindcss": "4.0.2", 34 | "autoprefixer": "10.4.20", 35 | "envalid": "8.0.0", 36 | "eslint": "9.13.0", 37 | "eslint-config-prettier": "9.1.0", 38 | "markdownlint-cli": "0.43.0", 39 | "postcss": "8.4.49", 40 | "prettier": "3.4.2", 41 | "prettier-package-json": "2.8.0", 42 | "tailwindcss": "3.4.16", 43 | "typescript": "5.7.2", 44 | "vite": "5.4.11", 45 | "vite-plugin-svgr": "4.3.0" 46 | }, 47 | "browserslist": { 48 | "production": [ 49 | ">0.2%", 50 | "not dead", 51 | "not op_mini all" 52 | ], 53 | "development": [ 54 | "last 1 chrome version", 55 | "last 1 firefox version", 56 | "last 1 safari version" 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /example/postcss.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | module.exports = { 9 | plugins: { 10 | tailwindcss: {}, 11 | autoprefixer: {} 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /example/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/tailwindcss/18df9fc1757de39b50c99ed1b378cea3d905af02/example/public/apple-touch-icon.png -------------------------------------------------------------------------------- /example/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #03363D 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/tailwindcss/18df9fc1757de39b50c99ed1b378cea3d905af02/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /example/public/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/tailwindcss/18df9fc1757de39b50c99ed1b378cea3d905af02/example/public/tile-wide.png -------------------------------------------------------------------------------- /example/public/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zendeskgarden/tailwindcss/18df9fc1757de39b50c99ed1b378cea3d905af02/example/public/tile.png -------------------------------------------------------------------------------- /example/scripts/deploy.mjs: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Copyright Zendesk, Inc. 5 | * 6 | * Use of this source code is governed under the Apache License, Version 2.0 7 | * found at http://www.apache.org/licenses/LICENSE-2.0. 8 | */ 9 | 10 | import { 11 | cmdDu, 12 | githubBranch, 13 | githubCommit, 14 | githubDeploy, 15 | githubPages, 16 | githubRepository, 17 | netlifyBandwidth, 18 | netlifyDeploy 19 | } from '@zendeskgarden/scripts'; 20 | import { dirname, resolve } from 'node:path'; 21 | import envalid from 'envalid'; 22 | import { fileURLToPath } from 'node:url'; 23 | 24 | envalid.cleanEnv(process.env, { 25 | GITHUB_TOKEN: envalid.str(), 26 | NETLIFY_SITE_ID: envalid.str(), 27 | NETLIFY_TOKEN: envalid.str() 28 | }); 29 | 30 | (async () => { 31 | try { 32 | const branch = await githubBranch(); 33 | const currentDir = dirname(fileURLToPath(import.meta.url)); 34 | const dir = resolve(currentDir, '..', 'build'); 35 | let url; 36 | 37 | if (branch === 'main') { 38 | url = await githubPages({ dir }); 39 | } else { 40 | const bandwidth = await netlifyBandwidth(); 41 | const usage = await cmdDu(dir); 42 | 43 | if (bandwidth.available > usage) { 44 | const repository = await githubRepository(); 45 | const commit = await githubCommit(); 46 | const message = `https://github.com/${repository.owner}/${repository.repo}/commit/${commit}`; 47 | const command = async () => { 48 | const result = await netlifyDeploy({ 49 | dir, 50 | message 51 | }); 52 | 53 | return result; 54 | }; 55 | 56 | url = await githubDeploy({ command }); 57 | } else { 58 | throw new Error( 59 | `Insufficient Netlify bandwidth: ${bandwidth.available} bytes available, ${usage} bytes required.` 60 | ); 61 | } 62 | } 63 | 64 | /* eslint-disable-next-line no-console */ 65 | console.log(`Deployed to ${url}`); 66 | } catch (error) { 67 | /* eslint-disable-next-line no-console */ 68 | console.error(error); 69 | process.exitCode = 1; 70 | } 71 | })(); 72 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright Zendesk, Inc. 3 | * 4 | * Use of this source code is governed under the Apache License, Version 2.0 5 | * found at http://www.apache.org/licenses/LICENSE-2.0. 6 | */ 7 | 8 | import { DEFAULT_THEME, IGardenTheme, ThemeProvider } from '@zendeskgarden/react-theming'; 9 | import { Field, Toggle } from '@zendeskgarden/react-forms'; 10 | import React, { useLayoutEffect, useState } from 'react'; 11 | import IconDark from '@zendeskgarden/svg-icons/src/16/moon-stroke.svg?react'; 12 | import IconLight from '@zendeskgarden/svg-icons/src/16/sun-stroke.svg?react'; 13 | import { Span } from '@zendeskgarden/react-typography'; 14 | import WordmarkAnswerBot from '@zendeskgarden/svg-icons/src/26/answer-bot.svg?react'; 15 | 16 | import { Action, Message } from './components/Message'; 17 | import { ConversationLog } from './components/ConversationLog'; 18 | import { MessageGroup } from './components/MessageGroup'; 19 | import { Textarea } from './components/Textarea'; 20 | import { Widget } from './components/Widget'; 21 | 22 | import styles from './app.module.css'; 23 | 24 | const ColorSchemeToggle: React.FC = () => { 25 | const [checked, setChecked] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches); 26 | const theme = { 27 | ...DEFAULT_THEME, 28 | colors: { 29 | ...DEFAULT_THEME.colors, 30 | base: checked ? 'dark' : 'light' 31 | } 32 | } as IGardenTheme; 33 | 34 | useLayoutEffect(() => { 35 | if (checked) { 36 | document.documentElement.dataset.scheme = 'dark'; 37 | } else { 38 | document.documentElement.dataset.scheme = 'light'; 39 | } 40 | }, [checked]); 41 | 42 | return ( 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | { 53 | setChecked(!checked); 54 | }} 55 | > 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | ); 66 | }; 67 | 68 | const App: React.FC = () => ( 69 |
70 | 71 | 72 | } 76 | > 77 | Hi, how can I help you today? 78 | Ask me a question and I’ll find you the answer. 79 | Or you can get in touch. 80 | 81 | 82 | Hours 83 | 84 | } 87 | > 88 | Our shop is open today from 10am to 8pm. 89 | Is there anything else I can help you with? 90 | 91 | 92 | Get in touch 93 | 94 | } 98 | > 99 | 102 | Chat with a team member 103 | Leave a message 104 | Request a callback 105 | 106 | } 107 | > 108 | Here are some ways to get in touch. 109 | 110 | 111 | 112 |