├── .gitignore
├── .tool-versions
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── package.json
├── postcss.config.js
├── public
├── banner-root-ui-ux-book.png
├── favicon.ico
├── index.html
└── robots.txt
├── src
├── components
│ ├── categories.tsx
│ ├── category.tsx
│ ├── footer.tsx
│ ├── infoTable.tsx
│ ├── searchBar.tsx
│ ├── subcategory.tsx
│ ├── tagline.tsx
│ └── toast.tsx
├── crawler.js
├── css
│ └── index.css
├── images
│ ├── cheatsheet.png
│ └── logo.svg
├── index.tsx
├── modules
│ ├── cheatsheet.json
│ ├── index.tsx
│ └── models
│ │ ├── category.tsx
│ │ └── subcategory.tsx
├── react-app-env.d.ts
├── serviceWorker.ts
├── setupTests.ts
├── store.tsx
├── utils
│ ├── copyTextToClipboard.ts
│ ├── googleAnalytics.tsx
│ └── modules.d.ts
└── views
│ ├── app.tsx
│ ├── home.tsx
│ └── no_match.tsx
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | /public/cheatsheet
4 | # dependencies
5 | /node_modules
6 | /.pnp
7 | .pnp.js
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
--------------------------------------------------------------------------------
/.tool-versions:
--------------------------------------------------------------------------------
1 | nodejs 20.10.0
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "cSpell.words": [
3 | "cheatsheet"
4 | ]
5 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Tailwindcomponents
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 | ## Tailwindcomponents Cheatsheet]
5 | This repo content a cheatsheet page from [tailwindcomponents.com](https://tailwindcomponents.com/cheatsheet/), it's a react base app build with typescript.
6 |
7 |
8 | 
9 |
10 |
11 |
12 | 
13 |
14 |
15 |
16 | 
17 |
18 |
19 | ## Project setup
20 | ```
21 | yarn install
22 | ```
23 |
24 | ### Compiles and hot-reloads for development
25 | ```
26 | yarn start
27 | ```
28 |
29 | ### Compiles and minifies for production
30 | ```
31 | yarn build
32 | ```
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwind-cheatsheet",
3 | "version": "1.0.0",
4 | "private": true,
5 | "dependencies": {
6 | "@babel/compat-data": "^7.16.4",
7 | "@babel/preset-env": "^7.16.7",
8 | "@tailwindcss/forms": "^0.4.0",
9 | "@testing-library/jest-dom": "^5.16.1",
10 | "@testing-library/react": "^9.5.0",
11 | "@testing-library/user-event": "^10.0.0",
12 | "@types/classnames": "^2.3.1",
13 | "@types/jest": "^25.1.3",
14 | "@types/node": "^13.7.7",
15 | "@types/react": "^16.9.23",
16 | "@types/react-dom": "^16.9.0",
17 | "@types/react-redux": "^7.1.21",
18 | "@types/react-router-dom": "^5.3.2",
19 | "autoprefixer": "^10.4.1",
20 | "classnames": "^2.3.1",
21 | "connected-react-router": "^6.9.2",
22 | "postcss": "^8.4.5",
23 | "react": "^17.0.2",
24 | "react-dom": "^17.0.2",
25 | "react-ga": "^3.3.1",
26 | "react-masonry-css": "^1.0.16",
27 | "react-redux": "^7.2.6",
28 | "react-router": "^5.1.2",
29 | "react-router-dom": "^5.1.2",
30 | "redux": "^4.1.2",
31 | "tailwindcss": "^3.1.8",
32 | "typescript": "~3.8.3",
33 | "use-bus": "1.1.1"
34 | },
35 | "devDependencies": {
36 | "react-scripts": "^5.0.0"
37 | },
38 | "scripts": {
39 | "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
40 | "build": "PUBLIC_URL=\"/cheatsheet/\" SKIP_PREFLIGHT_CHECK=true react-scripts build",
41 | "postbuild": "rm -rf ../public/cheatsheet && mv build ../public/cheatsheet",
42 | "test": "react-scripts test"
43 | },
44 | "eslintConfig": {
45 | "extends": "react-app"
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 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/banner-root-ui-ux-book.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tailwindcomponents/cheatsheet/5e024b3e7fd8f8385c9fd4a83726cf06dc4b6254/public/banner-root-ui-ux-book.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tailwindcomponents/cheatsheet/5e024b3e7fd8f8385c9fd4a83726cf06dc4b6254/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
13 |
14 | Tailwind CSS Cheat Sheet
15 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
32 |
33 |
37 |
38 |
39 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/src/components/categories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Masonry from 'react-masonry-css';
3 | import Category from '../modules/models/category';
4 | import CategoryComponent from './category';
5 |
6 | const Categories = ({ cheatsheet } : { cheatsheet: Category[] }) => {
7 | return (
8 |
18 | {
19 | cheatsheet.map((category: Category) => )
20 | }
21 |
22 | );
23 | }
24 |
25 | export default Categories;
26 |
--------------------------------------------------------------------------------
/src/components/category.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import CategoryType from "../modules/models/category";
3 | import Subcategory from "../modules/models/subcategory";
4 | import SubcategoryComponent from "./subcategory";
5 |
6 | const ChevronDown = () => {
7 | return (
8 |
22 | );
23 | };
24 |
25 | const ArrowDown = ({
26 | action,
27 | value,
28 | 'aria-label': ariaLabel,
29 | }: {
30 | action: () => void;
31 | value: boolean;
32 | 'aria-label'?: string;
33 | }) => {
34 | return (
35 |
42 | );
43 | };
44 |
45 | const Category = ({ category }: { category: CategoryType }) => {
46 | const [isOpen, setIsOpen] = useState(true);
47 | const toggle = () => {
48 | setIsOpen((p) => !p);
49 | };
50 | return (
51 |
56 |
61 |
{category.title}
62 |
63 |
64 | {
65 | category.content.map((subcategory: Subcategory, index: Number) => {
66 | return (
67 | subcategory.table.length > 0 && (
68 |
73 | )
74 | );
75 | })}
76 |
{subtext}
);
22 | };
23 |
24 | function handleClick(td: string) {
25 | setToastText(td)
26 | setShowToast(true)
27 | setTimeout(() => {
28 | setShowToast(false)
29 | }, 5000)
30 | }
31 |
32 | return (
33 | <>
34 | {showToast && }
35 |
36 |
37 | {
38 | table.map((tr: string[], index: Number) => {
39 | return (
40 |
43 | {
44 | tr.map((td: string, index: Number) => {
45 | return (
46 | | {
48 | await copyTextToClipboard(td).then(() => {
49 | handleClick(td)
50 | }
51 | );
52 | }}
53 | key={'td-' + index}
54 | className={classNames('cursor-copy font-mono text-xs hover:underline p-2', {
55 | 'text-purple-700 dark:text-purple-300 whitespace-nowrap': index === 0,
56 | 'text-blue-700 dark:text-blue-300': index === 1,
57 | 'text-gray-500 dark:text-gray-300 text-xs': index === 2,
58 | })}>{parseText(td)} |
59 | );
60 | })
61 | }
62 |
63 | );
64 | })
65 | }
66 |
67 |
68 |
69 | );
70 | }
71 |
72 | export default InfoTable;
73 |
--------------------------------------------------------------------------------
/src/components/searchBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect } from 'react';
2 | import { ReactComponent as Logo } from '../images/logo.svg';
3 | import { dispatch } from 'use-bus';
4 | import { useLocation } from 'react-router-dom';
5 |
6 | let searchTimeout: number | null = null
7 | function clearSearch() {
8 | if (searchTimeout !== null) {
9 | clearTimeout(searchTimeout)
10 | }
11 | }
12 |
13 | const useSearchParams = () => {
14 | return new URLSearchParams(useLocation().search);
15 | }
16 |
17 | const SearchBar = ({ searchFilter }: { searchFilter : ( text:string ) => void }) => {
18 | const query = useSearchParams().get('q') ?? undefined;
19 |
20 | useEffect(() => {
21 | searchFilter(query || '');
22 | // eslint-disable-next-line react-hooks/exhaustive-deps
23 | }, []);
24 |
25 | const tailwindVersion = "3.0.24";
26 | const searchInputRef = useRef(null);
27 |
28 | const handleFocus = (e: KeyboardEvent) => {
29 | if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
30 | //preventDefault if ctrl + k is already binded to any browser function
31 | e.preventDefault();
32 | searchInputRef?.current?.focus();
33 | }
34 |
35 | if (e.key === "Escape") {
36 | searchInputRef?.current?.blur();
37 | }
38 | };
39 |
40 | useEffect(() => {
41 | document.addEventListener("keydown", handleFocus);
42 | return () => {
43 | document.removeEventListener("keydown", handleFocus);
44 | };
45 | }, []);
46 |
47 | // The search is currently very expensive, as it redraws many elements on
48 | // the screen. This little wrapper adds an artificial delay so that the
49 | // app doesn't block user input.
50 | const search = (event: any) => {
51 | const text: string = event.target.value.toLowerCase();
52 | if (text.length < 5) {
53 | clearSearch()
54 | searchTimeout = window.setTimeout(() => searchFilter(text), 300)
55 | } else {
56 | clearSearch()
57 | searchFilter(text)
58 | }
59 | }
60 |
61 | const clearInput = () => {
62 | const inputElement = searchInputRef?.current
63 | if (inputElement) {
64 | inputElement.value = ''
65 | clearSearch()
66 | searchFilter('')
67 | }
68 | }
69 |
70 | let shouldRenderClearBtn = false
71 | const length = searchInputRef?.current?.value?.length
72 | if (length !== undefined && length > 0) {
73 | shouldRenderClearBtn = true
74 | }
75 |
76 | return (
77 |
78 |
79 |
80 |
81 |
82 |
Cheatsheet {tailwindVersion}
83 |
84 |
85 |
86 |
95 | {shouldRenderClearBtn ? (
96 |
101 | ) : (
102 |
103 | Ctrl k
104 |
105 | )}
106 |
107 |
108 |
109 |
110 |
111 |
Back to components
112 |
113 |
117 | Source Code On
118 |
119 |
120 |
121 |
122 |
31 |
46 |
49 |
{subcategory.description}
50 |
51 |
52 |
6 | Tailwind CSS Cheat Sheet
7 |
8 |
9 |
10 | Find quickly all the class names and CSS properties with this interactive cheat sheet. The only Tailwind CheatSheet you will ever need!
11 |
12 |
17 |
18 |
19 | “Never memorize something that you can look up.” - Albert Einstein
20 |
21 |
22 | );
23 |
24 | export default Tagline;
25 |
--------------------------------------------------------------------------------
/src/components/toast.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const Toast = ({ text }: { text: string }) => {
4 |
5 | return (
6 |
10 |
"{text}" copied into your clipboard
11 |
2 |
3 |
tailwindcomponents
4 |
6 |
Error 404
7 | Go to home
8 |
9 | );
10 |
11 | export default NoMatch;
12 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ["./src/**/*.{js,jsx,ts,tsx,svg}"],
3 | darkMode: "class",
4 | theme: {
5 | extend: {
6 | colors: {
7 | primary: "#0ED3CF",
8 | },
9 | fontFamily: {
10 | roboto: ["Roboto", "sans-serif"],
11 | },
12 | },
13 | },
14 | plugins: [require("@tailwindcss/forms")],
15 | };
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "noEmit": true,
20 | "jsx": "react"
21 | },
22 | "include": [
23 | "src"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
15 |