├── .gitignore ├── 01-setting-up-tailwindcss ├── README.md ├── css │ └── tailwind.css ├── index.html ├── package.json ├── postcss.config.js └── tailwind.config.js ├── 02-the-utility-first-workflow ├── README.md ├── css │ └── tailwind.css ├── img │ ├── beach-work.jpg │ └── logo.svg ├── index.html ├── package.json ├── postcss.config.js └── tailwind.config.js ├── 03-responsive-design ├── README.md ├── css │ └── tailwind.css ├── img │ ├── beach-work.jpg │ └── logo.svg ├── index.html ├── package.json ├── postcss.config.js └── tailwind.config.js ├── 04-hover-focus-and-other-states ├── README.md ├── css │ └── tailwind.css ├── img │ ├── beach-work.jpg │ └── logo.svg ├── index.html ├── package.json ├── postcss.config.js └── tailwind.config.js ├── 05-composing-utilities-with-@apply ├── README.md ├── css │ └── tailwind.css ├── img │ ├── beach-work.jpg │ └── logo.svg ├── index.html ├── package.json ├── postcss.config.js └── tailwind.config.js ├── 06-extracting-reusable-components ├── README.md ├── img │ ├── beach-work.jpg │ ├── chicago.jpg │ ├── colorado.jpg │ ├── logo.svg │ ├── malibu.jpg │ ├── miami.jpg │ ├── seattle.jpg │ └── toronto.jpg ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── App.jsx │ ├── components │ │ └── DestinationCard.jsx │ ├── css │ │ └── tailwind.css │ ├── data │ │ └── popularDestinations.js │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── 07-customizing-your-design-system ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── img │ │ ├── beach-work.jpg │ │ ├── chicago.jpg │ │ ├── colorado.jpg │ │ ├── logo-brand.svg │ │ ├── logo.svg │ │ ├── malibu.jpg │ │ ├── miami.jpg │ │ ├── seattle.jpg │ │ └── toronto.jpg ├── src │ ├── App.jsx │ ├── components │ │ └── DestinationCard.jsx │ ├── css │ │ └── tailwind.css │ ├── data │ │ └── popularDestinations.js │ └── main.jsx ├── tailwind-full.config.js ├── tailwind.config.js ├── vite.config.js └── yarn.lock ├── 08-optimizing-for-production ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── img │ │ ├── beach-work.jpg │ │ ├── chicago.jpg │ │ ├── colorado.jpg │ │ ├── logo-brand.svg │ │ ├── logo.svg │ │ ├── malibu.jpg │ │ ├── miami.jpg │ │ ├── seattle.jpg │ │ └── toronto.jpg ├── src │ ├── App.jsx │ ├── components │ │ └── DestinationCard.jsx │ ├── css │ │ └── tailwind.css │ ├── data │ │ └── popularDestinations.js │ └── main.jsx ├── tailwind-full.config.js ├── tailwind.config.js └── vite.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .DS_Store -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/README.md: -------------------------------------------------------------------------------- 1 | # 01: Setting Up Tailwind CSS – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=qYgogv4R8zg) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello World

12 | 13 | 14 | -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^10.2.3", 14 | "postcss": "^8.2.4", 15 | "tailwindcss": "^2.0.2", 16 | "vite": "^2.0.0-beta.50" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /01-setting-up-tailwindcss/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | }; 12 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/README.md: -------------------------------------------------------------------------------- 1 | # 02: The Utility-First Workflow – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=UvF56fPGVt4) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /02-the-utility-first-workflow/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/02-the-utility-first-workflow/img/beach-work.jpg -------------------------------------------------------------------------------- /02-the-utility-first-workflow/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | Workcation 13 | Woman workcationing on the beach 18 |

19 | You can work from anywhere. 20 | Take advantage of it. 21 |

22 |

23 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some 24 | nice weather even when you're not on vacation. 25 |

26 |
27 | 31 | Book your escape 32 | 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^10.2.3", 14 | "postcss": "^8.2.4", 15 | "tailwindcss": "^2.0.2", 16 | "vite": "^2.0.0-beta.50" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /02-the-utility-first-workflow/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | }; 12 | -------------------------------------------------------------------------------- /03-responsive-design/README.md: -------------------------------------------------------------------------------- 1 | # 03: Responsive Design – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=hX1zUdj4Dw4) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` 16 | -------------------------------------------------------------------------------- /03-responsive-design/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /03-responsive-design/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/03-responsive-design/img/beach-work.jpg -------------------------------------------------------------------------------- /03-responsive-design/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /03-responsive-design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
15 |
16 | Workcation 17 | Woman workcationing on the beach 22 |

25 | You can work from anywhere. 26 | 27 | Take advantage of it. 28 |

29 |

30 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy 31 | some nice weather even when you're not on vacation. 32 |

33 |
34 | 38 | Book your escape 39 | 40 |
41 |
42 |
43 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /03-responsive-design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^10.2.3", 14 | "postcss": "^8.2.4", 15 | "tailwindcss": "^2.0.2", 16 | "vite": "^2.0.0-beta.50" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /03-responsive-design/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /03-responsive-design/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | }; 12 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/README.md: -------------------------------------------------------------------------------- 1 | # 04: Hover, Focus and Other States – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=5_BPDve5-3M) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/04-hover-focus-and-other-states/img/beach-work.jpg -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
15 |
16 | Workcation 17 | Woman workcationing on the beach 22 |

25 | You can work from anywhere. 26 | 27 | Take advantage of it. 28 |

29 |

30 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy 31 | some nice weather even when you're not on vacation. 32 |

33 |
34 | 38 | Book your escape 39 | 40 |
41 |
42 |
43 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^10.2.3", 14 | "postcss": "^8.2.4", 15 | "tailwindcss": "^2.0.2", 16 | "vite": "^2.0.0-beta.50" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /04-hover-focus-and-other-states/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: { 9 | backgroundColor: ["active"], 10 | }, 11 | }, 12 | plugins: [], 13 | }; 14 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/README.md: -------------------------------------------------------------------------------- 1 | # 05: Composing Utilities with @apply – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=TrftauE2Vyk) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer components { 6 | .btn { 7 | @apply inline-block px-5 py-3 rounded-lg focus:outline-none focus:ring focus:ring-offset-2 uppercase tracking-wider font-semibold text-sm sm:text-base; 8 | } 9 | .btn-primary { 10 | @apply bg-indigo-500 text-white hover:bg-indigo-400 focus:ring-indigo-500 focus:ring-opacity-50 active:bg-indigo-600; 11 | } 12 | .btn-secondary { 13 | @apply bg-gray-300 text-gray-800 hover:bg-gray-200 focus:ring-gray-300 focus:ring-opacity-50 active:bg-gray-400; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/05-composing-utilities-with-@apply/img/beach-work.jpg -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
15 |
16 | Workcation 17 | Woman workcationing on the beach 22 |

25 | You can work from anywhere. 26 | 27 | Take advantage of it. 28 |

29 |

30 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy 31 | some nice weather even when you're not on vacation. 32 |

33 |
34 | Book your escape 39 | Learn more 40 |
41 |
42 |
43 | 50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "autoprefixer": "^10.2.3", 14 | "postcss": "^8.2.4", 15 | "tailwindcss": "^2.0.2", 16 | "vite": "^2.0.0-beta.50" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /05-composing-utilities-with-@apply/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: { 9 | backgroundColor: ["active"], 10 | }, 11 | }, 12 | plugins: [], 13 | }; 14 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/README.md: -------------------------------------------------------------------------------- 1 | # 06: Extracting Reusable Components – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=v-mkUxhaFVA) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/beach-work.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/chicago.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/chicago.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/colorado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/colorado.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/malibu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/malibu.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/miami.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/miami.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/seattle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/seattle.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/img/toronto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/06-extracting-reusable-components/img/toronto.jpg -------------------------------------------------------------------------------- /06-extracting-reusable-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@vitejs/plugin-react-refresh": "^1.1.3", 14 | "autoprefixer": "^10.2.3", 15 | "postcss": "^8.2.4", 16 | "tailwindcss": "^2.0.2", 17 | "vite": "^2.0.0-beta.50" 18 | }, 19 | "dependencies": { 20 | "react": "^17.0.1", 21 | "react-dom": "^17.0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import popularDestinations from "./data/popularDestinations"; 4 | import DestinationCard from "./components/DestinationCard"; 5 | 6 | export default function App() { 7 | return ( 8 |
9 |
10 |
11 |
12 | Workcation 13 | Woman workcationing on the beach 18 |

19 | You can work from anywhere. 20 |
Take advantage of it. 21 |

22 |

23 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not 24 | on vacation. 25 |

26 |
27 | 31 | Book your escape 32 | 33 |
34 |
35 |
36 |
37 | Woman workcationing on the beach 42 |
43 |
44 | 45 |
46 |

Popular destinations

47 |

A selection of great work-friendly cities with lots to see and explore.

48 |
49 | {popularDestinations.map((destination) => ( 50 | 51 | ))} 52 |
53 |
54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/src/components/DestinationCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function DestinationCard({ destination }) { 4 | return ( 5 |
6 | {destination.imageAlt} 7 |
8 |

{destination.city}

9 | 10 |

${destination.averagePrice} / night average

11 |
12 | 13 | Explore {destination.propertyCount} properties 14 | 15 |
16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/src/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/src/data/popularDestinations.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | city: "Toronto", 4 | averagePrice: 120, 5 | propertyCount: 76, 6 | imageUrl: "/img/toronto.jpg", 7 | imageAlt: "Toronto skyline", 8 | }, 9 | { 10 | city: "Malibu", 11 | averagePrice: 215, 12 | propertyCount: 43, 13 | imageUrl: "/img/malibu.jpg", 14 | imageAlt: "Cliff in Malibu", 15 | }, 16 | { 17 | city: "Chicago", 18 | averagePrice: 130, 19 | propertyCount: 115, 20 | imageUrl: "/img/chicago.jpg", 21 | imageAlt: "Chicago skyline", 22 | }, 23 | { 24 | city: "Seattle", 25 | averagePrice: 135, 26 | propertyCount: 63, 27 | imageUrl: "/img/seattle.jpg", 28 | imageAlt: "Seattle skyline", 29 | }, 30 | { 31 | city: "Colorado", 32 | averagePrice: 85, 33 | propertyCount: 47, 34 | imageUrl: "/img/colorado.jpg", 35 | imageAlt: "Lake in Colorado", 36 | }, 37 | { 38 | city: "Miami", 39 | averagePrice: 115, 40 | propertyCount: 86, 41 | imageUrl: "/img/miami.jpg", 42 | imageAlt: "Beach in Miami", 43 | }, 44 | ]; 45 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | import "./css/tailwind.css"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: { 9 | backgroundColor: ["active"], 10 | }, 11 | }, 12 | plugins: [], 13 | }; 14 | -------------------------------------------------------------------------------- /06-extracting-reusable-components/vite.config.js: -------------------------------------------------------------------------------- 1 | import reactRefresh from "@vitejs/plugin-react-refresh"; 2 | 3 | /** 4 | * https://vitejs.dev/config/ 5 | * @type { import('vite').UserConfig } 6 | */ 7 | export default { 8 | plugins: [reactRefresh()], 9 | }; 10 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/README.md: -------------------------------------------------------------------------------- 1 | # 07: Customizing Your Design System – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=0l0Gx8gWPHk) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` -------------------------------------------------------------------------------- /07-customizing-your-design-system/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@vitejs/plugin-react-refresh": "^1.1.3", 14 | "autoprefixer": "^10.2.3", 15 | "postcss": "^8.2.4", 16 | "tailwindcss": "^2.0.2", 17 | "vite": "^2.0.0-beta.50" 18 | }, 19 | "dependencies": { 20 | "react": "^17.0.1", 21 | "react-dom": "^17.0.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/beach-work.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/chicago.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/chicago.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/colorado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/colorado.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/logo-brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/malibu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/malibu.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/miami.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/miami.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/seattle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/seattle.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/public/img/toronto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/07-customizing-your-design-system/public/img/toronto.jpg -------------------------------------------------------------------------------- /07-customizing-your-design-system/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import popularDestinations from "./data/popularDestinations"; 4 | import DestinationCard from "./components/DestinationCard"; 5 | 6 | export default function App() { 7 | return ( 8 |
9 |
10 |
11 |
12 | Workcation 13 | Woman workcationing on the beach 18 |

19 | You can work from anywhere. 20 |
Take advantage of it. 21 |

22 |

23 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not 24 | on vacation. 25 |

26 | 34 |
35 |
36 |
37 | Woman workcationing on the beach 42 |
43 |
44 | 45 |
46 |

Popular destinations

47 |

A selection of great work-friendly cities with lots to see and explore.

48 |
49 | {popularDestinations.map((destination) => ( 50 | 51 | ))} 52 |
53 |
54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/src/components/DestinationCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function DestinationCard({ destination }) { 4 | return ( 5 |
6 | {destination.imageAlt} 7 |
8 |

{destination.city}

9 | 10 |

${destination.averagePrice} / night average

11 |
12 | 13 | Explore {destination.propertyCount} properties 14 | 15 |
16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/src/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/src/data/popularDestinations.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | city: "Toronto", 4 | averagePrice: 120, 5 | propertyCount: 76, 6 | imageUrl: "/img/toronto.jpg", 7 | imageAlt: "Toronto skyline", 8 | }, 9 | { 10 | city: "Malibu", 11 | averagePrice: 215, 12 | propertyCount: 43, 13 | imageUrl: "/img/malibu.jpg", 14 | imageAlt: "Cliff in Malibu", 15 | }, 16 | { 17 | city: "Chicago", 18 | averagePrice: 130, 19 | propertyCount: 115, 20 | imageUrl: "/img/chicago.jpg", 21 | imageAlt: "Chicago skyline", 22 | }, 23 | { 24 | city: "Seattle", 25 | averagePrice: 135, 26 | propertyCount: 63, 27 | imageUrl: "/img/seattle.jpg", 28 | imageAlt: "Seattle skyline", 29 | }, 30 | { 31 | city: "Colorado", 32 | averagePrice: 85, 33 | propertyCount: 47, 34 | imageUrl: "/img/colorado.jpg", 35 | imageAlt: "Lake in Colorado", 36 | }, 37 | { 38 | city: "Miami", 39 | averagePrice: 115, 40 | propertyCount: 86, 41 | imageUrl: "/img/miami.jpg", 42 | imageAlt: "Beach in Miami", 43 | }, 44 | ]; 45 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | import "./css/tailwind.css"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/tailwind-full.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | module.exports = { 4 | purge: [], 5 | presets: [], 6 | darkMode: false, // or 'media' or 'class' 7 | theme: { 8 | screens: { 9 | sm: '640px', 10 | md: '768px', 11 | lg: '1024px', 12 | xl: '1280px', 13 | '2xl': '1536px', 14 | }, 15 | colors: { 16 | transparent: 'transparent', 17 | current: 'currentColor', 18 | 19 | black: colors.black, 20 | white: colors.white, 21 | gray: colors.coolGray, 22 | red: colors.red, 23 | yellow: colors.amber, 24 | green: colors.emerald, 25 | blue: colors.blue, 26 | indigo: colors.indigo, 27 | purple: colors.violet, 28 | pink: colors.pink, 29 | }, 30 | spacing: { 31 | px: '1px', 32 | 0: '0px', 33 | 0.5: '0.125rem', 34 | 1: '0.25rem', 35 | 1.5: '0.375rem', 36 | 2: '0.5rem', 37 | 2.5: '0.625rem', 38 | 3: '0.75rem', 39 | 3.5: '0.875rem', 40 | 4: '1rem', 41 | 5: '1.25rem', 42 | 6: '1.5rem', 43 | 7: '1.75rem', 44 | 8: '2rem', 45 | 9: '2.25rem', 46 | 10: '2.5rem', 47 | 11: '2.75rem', 48 | 12: '3rem', 49 | 14: '3.5rem', 50 | 16: '4rem', 51 | 20: '5rem', 52 | 24: '6rem', 53 | 28: '7rem', 54 | 32: '8rem', 55 | 36: '9rem', 56 | 40: '10rem', 57 | 44: '11rem', 58 | 48: '12rem', 59 | 52: '13rem', 60 | 56: '14rem', 61 | 60: '15rem', 62 | 64: '16rem', 63 | 72: '18rem', 64 | 80: '20rem', 65 | 96: '24rem', 66 | }, 67 | animation: { 68 | none: 'none', 69 | spin: 'spin 1s linear infinite', 70 | ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', 71 | pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 72 | bounce: 'bounce 1s infinite', 73 | }, 74 | backgroundColor: (theme) => theme('colors'), 75 | backgroundImage: { 76 | none: 'none', 77 | 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 78 | 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', 79 | 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', 80 | 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', 81 | 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', 82 | 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 83 | 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 84 | 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', 85 | }, 86 | backgroundOpacity: (theme) => theme('opacity'), 87 | backgroundPosition: { 88 | bottom: 'bottom', 89 | center: 'center', 90 | left: 'left', 91 | 'left-bottom': 'left bottom', 92 | 'left-top': 'left top', 93 | right: 'right', 94 | 'right-bottom': 'right bottom', 95 | 'right-top': 'right top', 96 | top: 'top', 97 | }, 98 | backgroundSize: { 99 | auto: 'auto', 100 | cover: 'cover', 101 | contain: 'contain', 102 | }, 103 | borderColor: (theme) => ({ 104 | ...theme('colors'), 105 | DEFAULT: theme('colors.gray.200', 'currentColor'), 106 | }), 107 | borderOpacity: (theme) => theme('opacity'), 108 | borderRadius: { 109 | none: '0px', 110 | sm: '0.125rem', 111 | DEFAULT: '0.25rem', 112 | md: '0.375rem', 113 | lg: '0.5rem', 114 | xl: '0.75rem', 115 | '2xl': '1rem', 116 | '3xl': '1.5rem', 117 | full: '9999px', 118 | }, 119 | borderWidth: { 120 | DEFAULT: '1px', 121 | 0: '0px', 122 | 2: '2px', 123 | 4: '4px', 124 | 8: '8px', 125 | }, 126 | boxShadow: { 127 | sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', 128 | DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 129 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 130 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 131 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 132 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 133 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 134 | none: 'none', 135 | }, 136 | container: {}, 137 | cursor: { 138 | auto: 'auto', 139 | default: 'default', 140 | pointer: 'pointer', 141 | wait: 'wait', 142 | text: 'text', 143 | move: 'move', 144 | 'not-allowed': 'not-allowed', 145 | }, 146 | divideColor: (theme) => theme('borderColor'), 147 | divideOpacity: (theme) => theme('borderOpacity'), 148 | divideWidth: (theme) => theme('borderWidth'), 149 | fill: { current: 'currentColor' }, 150 | flex: { 151 | 1: '1 1 0%', 152 | auto: '1 1 auto', 153 | initial: '0 1 auto', 154 | none: 'none', 155 | }, 156 | flexGrow: { 157 | 0: '0', 158 | DEFAULT: '1', 159 | }, 160 | flexShrink: { 161 | 0: '0', 162 | DEFAULT: '1', 163 | }, 164 | fontFamily: { 165 | sans: [ 166 | 'ui-sans-serif', 167 | 'system-ui', 168 | '-apple-system', 169 | 'BlinkMacSystemFont', 170 | '"Segoe UI"', 171 | 'Roboto', 172 | '"Helvetica Neue"', 173 | 'Arial', 174 | '"Noto Sans"', 175 | 'sans-serif', 176 | '"Apple Color Emoji"', 177 | '"Segoe UI Emoji"', 178 | '"Segoe UI Symbol"', 179 | '"Noto Color Emoji"', 180 | ], 181 | serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], 182 | mono: [ 183 | 'ui-monospace', 184 | 'SFMono-Regular', 185 | 'Menlo', 186 | 'Monaco', 187 | 'Consolas', 188 | '"Liberation Mono"', 189 | '"Courier New"', 190 | 'monospace', 191 | ], 192 | }, 193 | fontSize: { 194 | xs: ['0.75rem', { lineHeight: '1rem' }], 195 | sm: ['0.875rem', { lineHeight: '1.25rem' }], 196 | base: ['1rem', { lineHeight: '1.5rem' }], 197 | lg: ['1.125rem', { lineHeight: '1.75rem' }], 198 | xl: ['1.25rem', { lineHeight: '1.75rem' }], 199 | '2xl': ['1.5rem', { lineHeight: '2rem' }], 200 | '3xl': ['1.875rem', { lineHeight: '2.25rem' }], 201 | '4xl': ['2.25rem', { lineHeight: '2.5rem' }], 202 | '5xl': ['3rem', { lineHeight: '1' }], 203 | '6xl': ['3.75rem', { lineHeight: '1' }], 204 | '7xl': ['4.5rem', { lineHeight: '1' }], 205 | '8xl': ['6rem', { lineHeight: '1' }], 206 | '9xl': ['8rem', { lineHeight: '1' }], 207 | }, 208 | fontWeight: { 209 | thin: '100', 210 | extralight: '200', 211 | light: '300', 212 | normal: '400', 213 | medium: '500', 214 | semibold: '600', 215 | bold: '700', 216 | extrabold: '800', 217 | black: '900', 218 | }, 219 | gap: (theme) => theme('spacing'), 220 | gradientColorStops: (theme) => theme('colors'), 221 | gridAutoColumns: { 222 | auto: 'auto', 223 | min: 'min-content', 224 | max: 'max-content', 225 | fr: 'minmax(0, 1fr)', 226 | }, 227 | gridAutoRows: { 228 | auto: 'auto', 229 | min: 'min-content', 230 | max: 'max-content', 231 | fr: 'minmax(0, 1fr)', 232 | }, 233 | gridColumn: { 234 | auto: 'auto', 235 | 'span-1': 'span 1 / span 1', 236 | 'span-2': 'span 2 / span 2', 237 | 'span-3': 'span 3 / span 3', 238 | 'span-4': 'span 4 / span 4', 239 | 'span-5': 'span 5 / span 5', 240 | 'span-6': 'span 6 / span 6', 241 | 'span-7': 'span 7 / span 7', 242 | 'span-8': 'span 8 / span 8', 243 | 'span-9': 'span 9 / span 9', 244 | 'span-10': 'span 10 / span 10', 245 | 'span-11': 'span 11 / span 11', 246 | 'span-12': 'span 12 / span 12', 247 | 'span-full': '1 / -1', 248 | }, 249 | gridColumnEnd: { 250 | auto: 'auto', 251 | 1: '1', 252 | 2: '2', 253 | 3: '3', 254 | 4: '4', 255 | 5: '5', 256 | 6: '6', 257 | 7: '7', 258 | 8: '8', 259 | 9: '9', 260 | 10: '10', 261 | 11: '11', 262 | 12: '12', 263 | 13: '13', 264 | }, 265 | gridColumnStart: { 266 | auto: 'auto', 267 | 1: '1', 268 | 2: '2', 269 | 3: '3', 270 | 4: '4', 271 | 5: '5', 272 | 6: '6', 273 | 7: '7', 274 | 8: '8', 275 | 9: '9', 276 | 10: '10', 277 | 11: '11', 278 | 12: '12', 279 | 13: '13', 280 | }, 281 | gridRow: { 282 | auto: 'auto', 283 | 'span-1': 'span 1 / span 1', 284 | 'span-2': 'span 2 / span 2', 285 | 'span-3': 'span 3 / span 3', 286 | 'span-4': 'span 4 / span 4', 287 | 'span-5': 'span 5 / span 5', 288 | 'span-6': 'span 6 / span 6', 289 | 'span-full': '1 / -1', 290 | }, 291 | gridRowStart: { 292 | auto: 'auto', 293 | 1: '1', 294 | 2: '2', 295 | 3: '3', 296 | 4: '4', 297 | 5: '5', 298 | 6: '6', 299 | 7: '7', 300 | }, 301 | gridRowEnd: { 302 | auto: 'auto', 303 | 1: '1', 304 | 2: '2', 305 | 3: '3', 306 | 4: '4', 307 | 5: '5', 308 | 6: '6', 309 | 7: '7', 310 | }, 311 | transformOrigin: { 312 | center: 'center', 313 | top: 'top', 314 | 'top-right': 'top right', 315 | right: 'right', 316 | 'bottom-right': 'bottom right', 317 | bottom: 'bottom', 318 | 'bottom-left': 'bottom left', 319 | left: 'left', 320 | 'top-left': 'top left', 321 | }, 322 | gridTemplateColumns: { 323 | none: 'none', 324 | 1: 'repeat(1, minmax(0, 1fr))', 325 | 2: 'repeat(2, minmax(0, 1fr))', 326 | 3: 'repeat(3, minmax(0, 1fr))', 327 | 4: 'repeat(4, minmax(0, 1fr))', 328 | 5: 'repeat(5, minmax(0, 1fr))', 329 | 6: 'repeat(6, minmax(0, 1fr))', 330 | 7: 'repeat(7, minmax(0, 1fr))', 331 | 8: 'repeat(8, minmax(0, 1fr))', 332 | 9: 'repeat(9, minmax(0, 1fr))', 333 | 10: 'repeat(10, minmax(0, 1fr))', 334 | 11: 'repeat(11, minmax(0, 1fr))', 335 | 12: 'repeat(12, minmax(0, 1fr))', 336 | }, 337 | gridTemplateRows: { 338 | none: 'none', 339 | 1: 'repeat(1, minmax(0, 1fr))', 340 | 2: 'repeat(2, minmax(0, 1fr))', 341 | 3: 'repeat(3, minmax(0, 1fr))', 342 | 4: 'repeat(4, minmax(0, 1fr))', 343 | 5: 'repeat(5, minmax(0, 1fr))', 344 | 6: 'repeat(6, minmax(0, 1fr))', 345 | }, 346 | height: (theme) => ({ 347 | auto: 'auto', 348 | ...theme('spacing'), 349 | '1/2': '50%', 350 | '1/3': '33.333333%', 351 | '2/3': '66.666667%', 352 | '1/4': '25%', 353 | '2/4': '50%', 354 | '3/4': '75%', 355 | '1/5': '20%', 356 | '2/5': '40%', 357 | '3/5': '60%', 358 | '4/5': '80%', 359 | '1/6': '16.666667%', 360 | '2/6': '33.333333%', 361 | '3/6': '50%', 362 | '4/6': '66.666667%', 363 | '5/6': '83.333333%', 364 | full: '100%', 365 | screen: '100vh', 366 | }), 367 | inset: (theme, { negative }) => ({ 368 | auto: 'auto', 369 | ...theme('spacing'), 370 | ...negative(theme('spacing')), 371 | '1/2': '50%', 372 | '1/3': '33.333333%', 373 | '2/3': '66.666667%', 374 | '1/4': '25%', 375 | '2/4': '50%', 376 | '3/4': '75%', 377 | full: '100%', 378 | '-1/2': '-50%', 379 | '-1/3': '-33.333333%', 380 | '-2/3': '-66.666667%', 381 | '-1/4': '-25%', 382 | '-2/4': '-50%', 383 | '-3/4': '-75%', 384 | '-full': '-100%', 385 | }), 386 | keyframes: { 387 | spin: { 388 | to: { 389 | transform: 'rotate(360deg)', 390 | }, 391 | }, 392 | ping: { 393 | '75%, 100%': { 394 | transform: 'scale(2)', 395 | opacity: '0', 396 | }, 397 | }, 398 | pulse: { 399 | '50%': { 400 | opacity: '.5', 401 | }, 402 | }, 403 | bounce: { 404 | '0%, 100%': { 405 | transform: 'translateY(-25%)', 406 | animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', 407 | }, 408 | '50%': { 409 | transform: 'none', 410 | animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', 411 | }, 412 | }, 413 | }, 414 | letterSpacing: { 415 | tighter: '-0.05em', 416 | tight: '-0.025em', 417 | normal: '0em', 418 | wide: '0.025em', 419 | wider: '0.05em', 420 | widest: '0.1em', 421 | }, 422 | lineHeight: { 423 | none: '1', 424 | tight: '1.25', 425 | snug: '1.375', 426 | normal: '1.5', 427 | relaxed: '1.625', 428 | loose: '2', 429 | 3: '.75rem', 430 | 4: '1rem', 431 | 5: '1.25rem', 432 | 6: '1.5rem', 433 | 7: '1.75rem', 434 | 8: '2rem', 435 | 9: '2.25rem', 436 | 10: '2.5rem', 437 | }, 438 | listStyleType: { 439 | none: 'none', 440 | disc: 'disc', 441 | decimal: 'decimal', 442 | }, 443 | margin: (theme, { negative }) => ({ 444 | auto: 'auto', 445 | ...theme('spacing'), 446 | ...negative(theme('spacing')), 447 | }), 448 | maxHeight: (theme) => ({ 449 | ...theme('spacing'), 450 | full: '100%', 451 | screen: '100vh', 452 | }), 453 | maxWidth: (theme, { breakpoints }) => ({ 454 | none: 'none', 455 | 0: '0rem', 456 | xs: '20rem', 457 | sm: '24rem', 458 | md: '28rem', 459 | lg: '32rem', 460 | xl: '36rem', 461 | '2xl': '42rem', 462 | '3xl': '48rem', 463 | '4xl': '56rem', 464 | '5xl': '64rem', 465 | '6xl': '72rem', 466 | '7xl': '80rem', 467 | full: '100%', 468 | min: 'min-content', 469 | max: 'max-content', 470 | prose: '65ch', 471 | ...breakpoints(theme('screens')), 472 | }), 473 | minHeight: { 474 | 0: '0px', 475 | full: '100%', 476 | screen: '100vh', 477 | }, 478 | minWidth: { 479 | 0: '0px', 480 | full: '100%', 481 | min: 'min-content', 482 | max: 'max-content', 483 | }, 484 | objectPosition: { 485 | bottom: 'bottom', 486 | center: 'center', 487 | left: 'left', 488 | 'left-bottom': 'left bottom', 489 | 'left-top': 'left top', 490 | right: 'right', 491 | 'right-bottom': 'right bottom', 492 | 'right-top': 'right top', 493 | top: 'top', 494 | }, 495 | opacity: { 496 | 0: '0', 497 | 5: '0.05', 498 | 10: '0.1', 499 | 20: '0.2', 500 | 25: '0.25', 501 | 30: '0.3', 502 | 40: '0.4', 503 | 50: '0.5', 504 | 60: '0.6', 505 | 70: '0.7', 506 | 75: '0.75', 507 | 80: '0.8', 508 | 90: '0.9', 509 | 95: '0.95', 510 | 100: '1', 511 | }, 512 | order: { 513 | first: '-9999', 514 | last: '9999', 515 | none: '0', 516 | 1: '1', 517 | 2: '2', 518 | 3: '3', 519 | 4: '4', 520 | 5: '5', 521 | 6: '6', 522 | 7: '7', 523 | 8: '8', 524 | 9: '9', 525 | 10: '10', 526 | 11: '11', 527 | 12: '12', 528 | }, 529 | outline: { 530 | none: ['2px solid transparent', '2px'], 531 | white: ['2px dotted white', '2px'], 532 | black: ['2px dotted black', '2px'], 533 | }, 534 | padding: (theme) => theme('spacing'), 535 | placeholderColor: (theme) => theme('colors'), 536 | placeholderOpacity: (theme) => theme('opacity'), 537 | ringColor: (theme) => ({ 538 | DEFAULT: theme('colors.blue.500', '#3b82f6'), 539 | ...theme('colors'), 540 | }), 541 | ringOffsetColor: (theme) => theme('colors'), 542 | ringOffsetWidth: { 543 | 0: '0px', 544 | 1: '1px', 545 | 2: '2px', 546 | 4: '4px', 547 | 8: '8px', 548 | }, 549 | ringOpacity: (theme) => ({ 550 | DEFAULT: '0.5', 551 | ...theme('opacity'), 552 | }), 553 | ringWidth: { 554 | DEFAULT: '3px', 555 | 0: '0px', 556 | 1: '1px', 557 | 2: '2px', 558 | 4: '4px', 559 | 8: '8px', 560 | }, 561 | rotate: { 562 | '-180': '-180deg', 563 | '-90': '-90deg', 564 | '-45': '-45deg', 565 | '-12': '-12deg', 566 | '-6': '-6deg', 567 | '-3': '-3deg', 568 | '-2': '-2deg', 569 | '-1': '-1deg', 570 | 0: '0deg', 571 | 1: '1deg', 572 | 2: '2deg', 573 | 3: '3deg', 574 | 6: '6deg', 575 | 12: '12deg', 576 | 45: '45deg', 577 | 90: '90deg', 578 | 180: '180deg', 579 | }, 580 | scale: { 581 | 0: '0', 582 | 50: '.5', 583 | 75: '.75', 584 | 90: '.9', 585 | 95: '.95', 586 | 100: '1', 587 | 105: '1.05', 588 | 110: '1.1', 589 | 125: '1.25', 590 | 150: '1.5', 591 | }, 592 | skew: { 593 | '-12': '-12deg', 594 | '-6': '-6deg', 595 | '-3': '-3deg', 596 | '-2': '-2deg', 597 | '-1': '-1deg', 598 | 0: '0deg', 599 | 1: '1deg', 600 | 2: '2deg', 601 | 3: '3deg', 602 | 6: '6deg', 603 | 12: '12deg', 604 | }, 605 | space: (theme, { negative }) => ({ 606 | ...theme('spacing'), 607 | ...negative(theme('spacing')), 608 | }), 609 | stroke: { 610 | current: 'currentColor', 611 | }, 612 | strokeWidth: { 613 | 0: '0', 614 | 1: '1', 615 | 2: '2', 616 | }, 617 | textColor: (theme) => theme('colors'), 618 | textOpacity: (theme) => theme('opacity'), 619 | transitionDuration: { 620 | DEFAULT: '150ms', 621 | 75: '75ms', 622 | 100: '100ms', 623 | 150: '150ms', 624 | 200: '200ms', 625 | 300: '300ms', 626 | 500: '500ms', 627 | 700: '700ms', 628 | 1000: '1000ms', 629 | }, 630 | transitionDelay: { 631 | 75: '75ms', 632 | 100: '100ms', 633 | 150: '150ms', 634 | 200: '200ms', 635 | 300: '300ms', 636 | 500: '500ms', 637 | 700: '700ms', 638 | 1000: '1000ms', 639 | }, 640 | transitionProperty: { 641 | none: 'none', 642 | all: 'all', 643 | DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', 644 | colors: 'background-color, border-color, color, fill, stroke', 645 | opacity: 'opacity', 646 | shadow: 'box-shadow', 647 | transform: 'transform', 648 | }, 649 | transitionTimingFunction: { 650 | DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', 651 | linear: 'linear', 652 | in: 'cubic-bezier(0.4, 0, 1, 1)', 653 | out: 'cubic-bezier(0, 0, 0.2, 1)', 654 | 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', 655 | }, 656 | translate: (theme, { negative }) => ({ 657 | ...theme('spacing'), 658 | ...negative(theme('spacing')), 659 | '1/2': '50%', 660 | '1/3': '33.333333%', 661 | '2/3': '66.666667%', 662 | '1/4': '25%', 663 | '2/4': '50%', 664 | '3/4': '75%', 665 | full: '100%', 666 | '-1/2': '-50%', 667 | '-1/3': '-33.333333%', 668 | '-2/3': '-66.666667%', 669 | '-1/4': '-25%', 670 | '-2/4': '-50%', 671 | '-3/4': '-75%', 672 | '-full': '-100%', 673 | }), 674 | width: (theme) => ({ 675 | auto: 'auto', 676 | ...theme('spacing'), 677 | '1/2': '50%', 678 | '1/3': '33.333333%', 679 | '2/3': '66.666667%', 680 | '1/4': '25%', 681 | '2/4': '50%', 682 | '3/4': '75%', 683 | '1/5': '20%', 684 | '2/5': '40%', 685 | '3/5': '60%', 686 | '4/5': '80%', 687 | '1/6': '16.666667%', 688 | '2/6': '33.333333%', 689 | '3/6': '50%', 690 | '4/6': '66.666667%', 691 | '5/6': '83.333333%', 692 | '1/12': '8.333333%', 693 | '2/12': '16.666667%', 694 | '3/12': '25%', 695 | '4/12': '33.333333%', 696 | '5/12': '41.666667%', 697 | '6/12': '50%', 698 | '7/12': '58.333333%', 699 | '8/12': '66.666667%', 700 | '9/12': '75%', 701 | '10/12': '83.333333%', 702 | '11/12': '91.666667%', 703 | full: '100%', 704 | screen: '100vw', 705 | min: 'min-content', 706 | max: 'max-content', 707 | }), 708 | zIndex: { 709 | auto: 'auto', 710 | 0: '0', 711 | 10: '10', 712 | 20: '20', 713 | 30: '30', 714 | 40: '40', 715 | 50: '50', 716 | }, 717 | }, 718 | variantOrder: [ 719 | 'first', 720 | 'last', 721 | 'odd', 722 | 'even', 723 | 'visited', 724 | 'checked', 725 | 'group-hover', 726 | 'group-focus', 727 | 'focus-within', 728 | 'hover', 729 | 'focus', 730 | 'focus-visible', 731 | 'active', 732 | 'disabled', 733 | ], 734 | variants: { 735 | accessibility: ['responsive', 'focus-within', 'focus'], 736 | alignContent: ['responsive'], 737 | alignItems: ['responsive'], 738 | alignSelf: ['responsive'], 739 | animation: ['responsive'], 740 | appearance: ['responsive'], 741 | backgroundAttachment: ['responsive'], 742 | backgroundClip: ['responsive'], 743 | backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 744 | backgroundImage: ['responsive'], 745 | backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 746 | backgroundPosition: ['responsive'], 747 | backgroundRepeat: ['responsive'], 748 | backgroundSize: ['responsive'], 749 | borderCollapse: ['responsive'], 750 | borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 751 | borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 752 | borderRadius: ['responsive'], 753 | borderStyle: ['responsive'], 754 | borderWidth: ['responsive'], 755 | boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 756 | boxSizing: ['responsive'], 757 | clear: ['responsive'], 758 | container: ['responsive'], 759 | cursor: ['responsive'], 760 | display: ['responsive'], 761 | divideColor: ['responsive', 'dark'], 762 | divideOpacity: ['responsive'], 763 | divideStyle: ['responsive'], 764 | divideWidth: ['responsive'], 765 | fill: ['responsive'], 766 | flex: ['responsive'], 767 | flexDirection: ['responsive'], 768 | flexGrow: ['responsive'], 769 | flexShrink: ['responsive'], 770 | flexWrap: ['responsive'], 771 | float: ['responsive'], 772 | fontFamily: ['responsive'], 773 | fontSize: ['responsive'], 774 | fontSmoothing: ['responsive'], 775 | fontStyle: ['responsive'], 776 | fontVariantNumeric: ['responsive'], 777 | fontWeight: ['responsive'], 778 | gap: ['responsive'], 779 | gradientColorStops: ['responsive', 'dark', 'hover', 'focus'], 780 | gridAutoColumns: ['responsive'], 781 | gridAutoFlow: ['responsive'], 782 | gridAutoRows: ['responsive'], 783 | gridColumn: ['responsive'], 784 | gridColumnEnd: ['responsive'], 785 | gridColumnStart: ['responsive'], 786 | gridRow: ['responsive'], 787 | gridRowEnd: ['responsive'], 788 | gridRowStart: ['responsive'], 789 | gridTemplateColumns: ['responsive'], 790 | gridTemplateRows: ['responsive'], 791 | height: ['responsive'], 792 | inset: ['responsive'], 793 | justifyContent: ['responsive'], 794 | justifyItems: ['responsive'], 795 | justifySelf: ['responsive'], 796 | letterSpacing: ['responsive'], 797 | lineHeight: ['responsive'], 798 | listStylePosition: ['responsive'], 799 | listStyleType: ['responsive'], 800 | margin: ['responsive'], 801 | maxHeight: ['responsive'], 802 | maxWidth: ['responsive'], 803 | minHeight: ['responsive'], 804 | minWidth: ['responsive'], 805 | objectFit: ['responsive'], 806 | objectPosition: ['responsive'], 807 | opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 808 | order: ['responsive'], 809 | outline: ['responsive', 'focus-within', 'focus'], 810 | overflow: ['responsive'], 811 | overscrollBehavior: ['responsive'], 812 | padding: ['responsive'], 813 | placeContent: ['responsive'], 814 | placeItems: ['responsive'], 815 | placeSelf: ['responsive'], 816 | placeholderColor: ['responsive', 'dark', 'focus'], 817 | placeholderOpacity: ['responsive', 'focus'], 818 | pointerEvents: ['responsive'], 819 | position: ['responsive'], 820 | resize: ['responsive'], 821 | ringColor: ['responsive', 'dark', 'focus-within', 'focus'], 822 | ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'], 823 | ringOffsetWidth: ['responsive', 'focus-within', 'focus'], 824 | ringOpacity: ['responsive', 'focus-within', 'focus'], 825 | ringWidth: ['responsive', 'focus-within', 'focus'], 826 | rotate: ['responsive', 'hover', 'focus'], 827 | scale: ['responsive', 'hover', 'focus'], 828 | skew: ['responsive', 'hover', 'focus'], 829 | space: ['responsive'], 830 | stroke: ['responsive'], 831 | strokeWidth: ['responsive'], 832 | tableLayout: ['responsive'], 833 | textAlign: ['responsive'], 834 | textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 835 | textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 836 | textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 837 | textOverflow: ['responsive'], 838 | textTransform: ['responsive'], 839 | transform: ['responsive'], 840 | transformOrigin: ['responsive'], 841 | transitionDelay: ['responsive'], 842 | transitionDuration: ['responsive'], 843 | transitionProperty: ['responsive'], 844 | transitionTimingFunction: ['responsive'], 845 | translate: ['responsive', 'hover', 'focus'], 846 | userSelect: ['responsive'], 847 | verticalAlign: ['responsive'], 848 | visibility: ['responsive'], 849 | whitespace: ['responsive'], 850 | width: ['responsive'], 851 | wordBreak: ['responsive'], 852 | zIndex: ['responsive', 'focus-within', 'focus'], 853 | }, 854 | plugins: [], 855 | } 856 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: { 6 | colors: { 7 | brand: { 8 | light: "#3fbaeb", 9 | DEFAULT: "#0fa9e6", 10 | dark: "#0c87b8", 11 | }, 12 | }, 13 | fontFamily: { 14 | headline: "Poppins, sans-serif", 15 | }, 16 | }, 17 | }, 18 | variants: { 19 | extend: { 20 | backgroundColor: ["active"], 21 | }, 22 | }, 23 | plugins: [], 24 | }; 25 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/vite.config.js: -------------------------------------------------------------------------------- 1 | import reactRefresh from "@vitejs/plugin-react-refresh"; 2 | 3 | /** 4 | * https://vitejs.dev/config/ 5 | * @type { import('vite').UserConfig } 6 | */ 7 | export default { 8 | plugins: [reactRefresh()], 9 | }; 10 | -------------------------------------------------------------------------------- /07-customizing-your-design-system/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@babel/code-frame@^7.12.13": 6 | version "7.12.13" 7 | resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658" 8 | integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g== 9 | dependencies: 10 | "@babel/highlight" "^7.12.13" 11 | 12 | "@babel/core@^7.12.13": 13 | version "7.12.16" 14 | resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.16.tgz#8c6ba456b23b680a6493ddcfcd9d3c3ad51cab7c" 15 | integrity sha512-t/hHIB504wWceOeaOoONOhu+gX+hpjfeN6YRBT209X/4sibZQfSF1I0HFRRlBe97UZZosGx5XwUg1ZgNbelmNw== 16 | dependencies: 17 | "@babel/code-frame" "^7.12.13" 18 | "@babel/generator" "^7.12.15" 19 | "@babel/helper-module-transforms" "^7.12.13" 20 | "@babel/helpers" "^7.12.13" 21 | "@babel/parser" "^7.12.16" 22 | "@babel/template" "^7.12.13" 23 | "@babel/traverse" "^7.12.13" 24 | "@babel/types" "^7.12.13" 25 | convert-source-map "^1.7.0" 26 | debug "^4.1.0" 27 | gensync "^1.0.0-beta.1" 28 | json5 "^2.1.2" 29 | lodash "^4.17.19" 30 | semver "^5.4.1" 31 | source-map "^0.5.0" 32 | 33 | "@babel/generator@^7.12.13", "@babel/generator@^7.12.15": 34 | version "7.12.15" 35 | resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.15.tgz#4617b5d0b25cc572474cc1aafee1edeaf9b5368f" 36 | integrity sha512-6F2xHxBiFXWNSGb7vyCUTBF8RCLY66rS0zEPcP8t/nQyXjha5EuK4z7H5o7fWG8B4M7y6mqVWq1J+1PuwRhecQ== 37 | dependencies: 38 | "@babel/types" "^7.12.13" 39 | jsesc "^2.5.1" 40 | source-map "^0.5.0" 41 | 42 | "@babel/helper-function-name@^7.12.13": 43 | version "7.12.13" 44 | resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a" 45 | integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA== 46 | dependencies: 47 | "@babel/helper-get-function-arity" "^7.12.13" 48 | "@babel/template" "^7.12.13" 49 | "@babel/types" "^7.12.13" 50 | 51 | "@babel/helper-get-function-arity@^7.12.13": 52 | version "7.12.13" 53 | resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz#bc63451d403a3b3082b97e1d8b3fe5bd4091e583" 54 | integrity sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg== 55 | dependencies: 56 | "@babel/types" "^7.12.13" 57 | 58 | "@babel/helper-member-expression-to-functions@^7.12.13": 59 | version "7.12.16" 60 | resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.16.tgz#41e0916b99f8d5f43da4f05d85f4930fa3d62b22" 61 | integrity sha512-zYoZC1uvebBFmj1wFAlXwt35JLEgecefATtKp20xalwEK8vHAixLBXTGxNrVGEmTT+gzOThUgr8UEdgtalc1BQ== 62 | dependencies: 63 | "@babel/types" "^7.12.13" 64 | 65 | "@babel/helper-module-imports@^7.12.13": 66 | version "7.12.13" 67 | resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0" 68 | integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g== 69 | dependencies: 70 | "@babel/types" "^7.12.13" 71 | 72 | "@babel/helper-module-transforms@^7.12.13": 73 | version "7.12.13" 74 | resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.13.tgz#01afb052dcad2044289b7b20beb3fa8bd0265bea" 75 | integrity sha512-acKF7EjqOR67ASIlDTupwkKM1eUisNAjaSduo5Cz+793ikfnpe7p4Q7B7EWU2PCoSTPWsQkR7hRUWEIZPiVLGA== 76 | dependencies: 77 | "@babel/helper-module-imports" "^7.12.13" 78 | "@babel/helper-replace-supers" "^7.12.13" 79 | "@babel/helper-simple-access" "^7.12.13" 80 | "@babel/helper-split-export-declaration" "^7.12.13" 81 | "@babel/helper-validator-identifier" "^7.12.11" 82 | "@babel/template" "^7.12.13" 83 | "@babel/traverse" "^7.12.13" 84 | "@babel/types" "^7.12.13" 85 | lodash "^4.17.19" 86 | 87 | "@babel/helper-optimise-call-expression@^7.12.13": 88 | version "7.12.13" 89 | resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz#5c02d171b4c8615b1e7163f888c1c81c30a2aaea" 90 | integrity sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA== 91 | dependencies: 92 | "@babel/types" "^7.12.13" 93 | 94 | "@babel/helper-plugin-utils@^7.12.13": 95 | version "7.12.13" 96 | resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz#174254d0f2424d8aefb4dd48057511247b0a9eeb" 97 | integrity sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA== 98 | 99 | "@babel/helper-replace-supers@^7.12.13": 100 | version "7.12.13" 101 | resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.12.13.tgz#00ec4fb6862546bd3d0aff9aac56074277173121" 102 | integrity sha512-pctAOIAMVStI2TMLhozPKbf5yTEXc0OJa0eENheb4w09SrgOWEs+P4nTOZYJQCqs8JlErGLDPDJTiGIp3ygbLg== 103 | dependencies: 104 | "@babel/helper-member-expression-to-functions" "^7.12.13" 105 | "@babel/helper-optimise-call-expression" "^7.12.13" 106 | "@babel/traverse" "^7.12.13" 107 | "@babel/types" "^7.12.13" 108 | 109 | "@babel/helper-simple-access@^7.12.13": 110 | version "7.12.13" 111 | resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz#8478bcc5cacf6aa1672b251c1d2dde5ccd61a6c4" 112 | integrity sha512-0ski5dyYIHEfwpWGx5GPWhH35j342JaflmCeQmsPWcrOQDtCN6C1zKAVRFVbK53lPW2c9TsuLLSUDf0tIGJ5hA== 113 | dependencies: 114 | "@babel/types" "^7.12.13" 115 | 116 | "@babel/helper-split-export-declaration@^7.12.13": 117 | version "7.12.13" 118 | resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05" 119 | integrity sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg== 120 | dependencies: 121 | "@babel/types" "^7.12.13" 122 | 123 | "@babel/helper-validator-identifier@^7.12.11": 124 | version "7.12.11" 125 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" 126 | integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== 127 | 128 | "@babel/helpers@^7.12.13": 129 | version "7.12.13" 130 | resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.13.tgz#3c75e993632e4dadc0274eae219c73eb7645ba47" 131 | integrity sha512-oohVzLRZ3GQEk4Cjhfs9YkJA4TdIDTObdBEZGrd6F/T0GPSnuV6l22eMcxlvcvzVIPH3VTtxbseudM1zIE+rPQ== 132 | dependencies: 133 | "@babel/template" "^7.12.13" 134 | "@babel/traverse" "^7.12.13" 135 | "@babel/types" "^7.12.13" 136 | 137 | "@babel/highlight@^7.12.13": 138 | version "7.12.13" 139 | resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.12.13.tgz#8ab538393e00370b26271b01fa08f7f27f2e795c" 140 | integrity sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww== 141 | dependencies: 142 | "@babel/helper-validator-identifier" "^7.12.11" 143 | chalk "^2.0.0" 144 | js-tokens "^4.0.0" 145 | 146 | "@babel/parser@^7.12.13", "@babel/parser@^7.12.16": 147 | version "7.12.16" 148 | resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4" 149 | integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw== 150 | 151 | "@babel/plugin-transform-react-jsx-self@^7.12.13": 152 | version "7.12.13" 153 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.13.tgz#422d99d122d592acab9c35ea22a6cfd9bf189f60" 154 | integrity sha512-FXYw98TTJ125GVCCkFLZXlZ1qGcsYqNQhVBQcZjyrwf8FEUtVfKIoidnO8S0q+KBQpDYNTmiGo1gn67Vti04lQ== 155 | dependencies: 156 | "@babel/helper-plugin-utils" "^7.12.13" 157 | 158 | "@babel/plugin-transform-react-jsx-source@^7.12.13": 159 | version "7.12.13" 160 | resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.13.tgz#051d76126bee5c9a6aa3ba37be2f6c1698856bcb" 161 | integrity sha512-O5JJi6fyfih0WfDgIJXksSPhGP/G0fQpfxYy87sDc+1sFmsCS6wr3aAn+whbzkhbjtq4VMqLRaSzR6IsshIC0Q== 162 | dependencies: 163 | "@babel/helper-plugin-utils" "^7.12.13" 164 | 165 | "@babel/template@^7.12.13": 166 | version "7.12.13" 167 | resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" 168 | integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA== 169 | dependencies: 170 | "@babel/code-frame" "^7.12.13" 171 | "@babel/parser" "^7.12.13" 172 | "@babel/types" "^7.12.13" 173 | 174 | "@babel/traverse@^7.12.13": 175 | version "7.12.13" 176 | resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.13.tgz#689f0e4b4c08587ad26622832632735fb8c4e0c0" 177 | integrity sha512-3Zb4w7eE/OslI0fTp8c7b286/cQps3+vdLW3UcwC8VSJC6GbKn55aeVVu2QJNuCDoeKyptLOFrPq8WqZZBodyA== 178 | dependencies: 179 | "@babel/code-frame" "^7.12.13" 180 | "@babel/generator" "^7.12.13" 181 | "@babel/helper-function-name" "^7.12.13" 182 | "@babel/helper-split-export-declaration" "^7.12.13" 183 | "@babel/parser" "^7.12.13" 184 | "@babel/types" "^7.12.13" 185 | debug "^4.1.0" 186 | globals "^11.1.0" 187 | lodash "^4.17.19" 188 | 189 | "@babel/types@^7.12.13": 190 | version "7.12.13" 191 | resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.13.tgz#8be1aa8f2c876da11a9cf650c0ecf656913ad611" 192 | integrity sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ== 193 | dependencies: 194 | "@babel/helper-validator-identifier" "^7.12.11" 195 | lodash "^4.17.19" 196 | to-fast-properties "^2.0.0" 197 | 198 | "@fullhuman/postcss-purgecss@^3.1.3": 199 | version "3.1.3" 200 | resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339" 201 | integrity sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA== 202 | dependencies: 203 | purgecss "^3.1.3" 204 | 205 | "@vitejs/plugin-react-refresh@^1.1.3": 206 | version "1.3.1" 207 | resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-refresh/-/plugin-react-refresh-1.3.1.tgz#dfdb17e9924ba57fc4951ac882e39628051a30f4" 208 | integrity sha512-VxHkrvOOTnMGWq9BveEN5ufmfDfaGxfawCymlKdF+X0RApCr0jQFzOyewhmSSCgGHjqnpRj+7TTDebjBkB3qhg== 209 | dependencies: 210 | "@babel/core" "^7.12.13" 211 | "@babel/plugin-transform-react-jsx-self" "^7.12.13" 212 | "@babel/plugin-transform-react-jsx-source" "^7.12.13" 213 | react-refresh "^0.9.0" 214 | 215 | acorn-node@^1.6.1: 216 | version "1.8.2" 217 | resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8" 218 | integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A== 219 | dependencies: 220 | acorn "^7.0.0" 221 | acorn-walk "^7.0.0" 222 | xtend "^4.0.2" 223 | 224 | acorn-walk@^7.0.0: 225 | version "7.2.0" 226 | resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" 227 | integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== 228 | 229 | acorn@^7.0.0: 230 | version "7.4.1" 231 | resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" 232 | integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== 233 | 234 | ansi-styles@^3.2.1: 235 | version "3.2.1" 236 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" 237 | integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== 238 | dependencies: 239 | color-convert "^1.9.0" 240 | 241 | ansi-styles@^4.1.0: 242 | version "4.3.0" 243 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937" 244 | integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg== 245 | dependencies: 246 | color-convert "^2.0.1" 247 | 248 | at-least-node@^1.0.0: 249 | version "1.0.0" 250 | resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" 251 | integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== 252 | 253 | autoprefixer@^10.2.3: 254 | version "10.2.4" 255 | resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.4.tgz#c0e7cf24fcc6a1ae5d6250c623f0cb8beef2f7e1" 256 | integrity sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw== 257 | dependencies: 258 | browserslist "^4.16.1" 259 | caniuse-lite "^1.0.30001181" 260 | colorette "^1.2.1" 261 | fraction.js "^4.0.13" 262 | normalize-range "^0.1.2" 263 | postcss-value-parser "^4.1.0" 264 | 265 | balanced-match@^1.0.0: 266 | version "1.0.0" 267 | resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" 268 | integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= 269 | 270 | brace-expansion@^1.1.7: 271 | version "1.1.11" 272 | resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" 273 | integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== 274 | dependencies: 275 | balanced-match "^1.0.0" 276 | concat-map "0.0.1" 277 | 278 | browserslist@^4.16.1: 279 | version "4.16.3" 280 | resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717" 281 | integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw== 282 | dependencies: 283 | caniuse-lite "^1.0.30001181" 284 | colorette "^1.2.1" 285 | electron-to-chromium "^1.3.649" 286 | escalade "^3.1.1" 287 | node-releases "^1.1.70" 288 | 289 | bytes@^3.0.0: 290 | version "3.1.0" 291 | resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6" 292 | integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== 293 | 294 | camelcase-css@^2.0.1: 295 | version "2.0.1" 296 | resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5" 297 | integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA== 298 | 299 | caniuse-lite@^1.0.30001181: 300 | version "1.0.30001187" 301 | resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz#5706942631f83baa5a0218b7dfa6ced29f845438" 302 | integrity sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA== 303 | 304 | chalk@^2.0.0, chalk@^2.4.1: 305 | version "2.4.2" 306 | resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" 307 | integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== 308 | dependencies: 309 | ansi-styles "^3.2.1" 310 | escape-string-regexp "^1.0.5" 311 | supports-color "^5.3.0" 312 | 313 | chalk@^4.1.0: 314 | version "4.1.0" 315 | resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a" 316 | integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== 317 | dependencies: 318 | ansi-styles "^4.1.0" 319 | supports-color "^7.1.0" 320 | 321 | color-convert@^1.9.0, color-convert@^1.9.1: 322 | version "1.9.3" 323 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" 324 | integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== 325 | dependencies: 326 | color-name "1.1.3" 327 | 328 | color-convert@^2.0.1: 329 | version "2.0.1" 330 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" 331 | integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== 332 | dependencies: 333 | color-name "~1.1.4" 334 | 335 | color-name@1.1.3: 336 | version "1.1.3" 337 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" 338 | integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= 339 | 340 | color-name@^1.0.0, color-name@~1.1.4: 341 | version "1.1.4" 342 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" 343 | integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== 344 | 345 | color-string@^1.5.4: 346 | version "1.5.4" 347 | resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6" 348 | integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw== 349 | dependencies: 350 | color-name "^1.0.0" 351 | simple-swizzle "^0.2.2" 352 | 353 | color@^3.1.3: 354 | version "3.1.3" 355 | resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e" 356 | integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ== 357 | dependencies: 358 | color-convert "^1.9.1" 359 | color-string "^1.5.4" 360 | 361 | colorette@^1.2.1: 362 | version "1.2.1" 363 | resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" 364 | integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== 365 | 366 | commander@^6.0.0: 367 | version "6.2.1" 368 | resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" 369 | integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== 370 | 371 | concat-map@0.0.1: 372 | version "0.0.1" 373 | resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" 374 | integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= 375 | 376 | convert-source-map@^1.7.0: 377 | version "1.7.0" 378 | resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" 379 | integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== 380 | dependencies: 381 | safe-buffer "~5.1.1" 382 | 383 | css-unit-converter@^1.1.1: 384 | version "1.1.2" 385 | resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" 386 | integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== 387 | 388 | cssesc@^3.0.0: 389 | version "3.0.0" 390 | resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" 391 | integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== 392 | 393 | debug@^4.1.0: 394 | version "4.3.1" 395 | resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee" 396 | integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== 397 | dependencies: 398 | ms "2.1.2" 399 | 400 | defined@^1.0.0: 401 | version "1.0.0" 402 | resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" 403 | integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= 404 | 405 | detective@^5.2.0: 406 | version "5.2.0" 407 | resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b" 408 | integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg== 409 | dependencies: 410 | acorn-node "^1.6.1" 411 | defined "^1.0.0" 412 | minimist "^1.1.1" 413 | 414 | didyoumean@^1.2.1: 415 | version "1.2.1" 416 | resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" 417 | integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8= 418 | 419 | electron-to-chromium@^1.3.649: 420 | version "1.3.665" 421 | resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.665.tgz#6d0937376f6a919c0f289202c4be77790a6175e5" 422 | integrity sha512-LIjx1JheOz7LM8DMEQ2tPnbBzJ4nVG1MKutsbEMLnJfwfVdPIsyagqfLp56bOWhdBrYGXWHaTayYkllIU2TauA== 423 | 424 | esbuild@^0.8.34: 425 | version "0.8.46" 426 | resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.46.tgz#8fc7230ce3019b12e2553399f0c03875a729c26b" 427 | integrity sha512-xck9sXNCNmjDHCCfxTCyhKTiFuEBweh+IDAhMLOJI990v1Fzii6MyIkT1LbkvjgoVgPX2SK1kpi5eZVGNrl8yg== 428 | 429 | escalade@^3.1.1: 430 | version "3.1.1" 431 | resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" 432 | integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== 433 | 434 | escape-string-regexp@^1.0.5: 435 | version "1.0.5" 436 | resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" 437 | integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= 438 | 439 | fraction.js@^4.0.13: 440 | version "4.0.13" 441 | resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe" 442 | integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA== 443 | 444 | fs-extra@^9.1.0: 445 | version "9.1.0" 446 | resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" 447 | integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ== 448 | dependencies: 449 | at-least-node "^1.0.0" 450 | graceful-fs "^4.2.0" 451 | jsonfile "^6.0.1" 452 | universalify "^2.0.0" 453 | 454 | fs.realpath@^1.0.0: 455 | version "1.0.0" 456 | resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" 457 | integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= 458 | 459 | fsevents@~2.3.1: 460 | version "2.3.2" 461 | resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" 462 | integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== 463 | 464 | function-bind@^1.1.1: 465 | version "1.1.1" 466 | resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" 467 | integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== 468 | 469 | gensync@^1.0.0-beta.1: 470 | version "1.0.0-beta.2" 471 | resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" 472 | integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== 473 | 474 | glob@^7.0.0, glob@^7.1.2: 475 | version "7.1.6" 476 | resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" 477 | integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== 478 | dependencies: 479 | fs.realpath "^1.0.0" 480 | inflight "^1.0.4" 481 | inherits "2" 482 | minimatch "^3.0.4" 483 | once "^1.3.0" 484 | path-is-absolute "^1.0.0" 485 | 486 | globals@^11.1.0: 487 | version "11.12.0" 488 | resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" 489 | integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== 490 | 491 | graceful-fs@^4.1.6, graceful-fs@^4.2.0: 492 | version "4.2.6" 493 | resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee" 494 | integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ== 495 | 496 | has-flag@^3.0.0: 497 | version "3.0.0" 498 | resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" 499 | integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= 500 | 501 | has-flag@^4.0.0: 502 | version "4.0.0" 503 | resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" 504 | integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== 505 | 506 | has@^1.0.3: 507 | version "1.0.3" 508 | resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" 509 | integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== 510 | dependencies: 511 | function-bind "^1.1.1" 512 | 513 | html-tags@^3.1.0: 514 | version "3.1.0" 515 | resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" 516 | integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg== 517 | 518 | indexes-of@^1.0.1: 519 | version "1.0.1" 520 | resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" 521 | integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc= 522 | 523 | inflight@^1.0.4: 524 | version "1.0.6" 525 | resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" 526 | integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= 527 | dependencies: 528 | once "^1.3.0" 529 | wrappy "1" 530 | 531 | inherits@2: 532 | version "2.0.4" 533 | resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" 534 | integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== 535 | 536 | is-arrayish@^0.3.1: 537 | version "0.3.2" 538 | resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" 539 | integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== 540 | 541 | is-core-module@^2.2.0: 542 | version "2.2.0" 543 | resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a" 544 | integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ== 545 | dependencies: 546 | has "^1.0.3" 547 | 548 | "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: 549 | version "4.0.0" 550 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 551 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 552 | 553 | jsesc@^2.5.1: 554 | version "2.5.2" 555 | resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" 556 | integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== 557 | 558 | json5@^2.1.2: 559 | version "2.2.0" 560 | resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3" 561 | integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA== 562 | dependencies: 563 | minimist "^1.2.5" 564 | 565 | jsonfile@^6.0.1: 566 | version "6.1.0" 567 | resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" 568 | integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ== 569 | dependencies: 570 | universalify "^2.0.0" 571 | optionalDependencies: 572 | graceful-fs "^4.1.6" 573 | 574 | lodash.toarray@^4.4.0: 575 | version "4.4.0" 576 | resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" 577 | integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE= 578 | 579 | lodash@^4.17.19, lodash@^4.17.20: 580 | version "4.17.20" 581 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" 582 | integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== 583 | 584 | loose-envify@^1.1.0: 585 | version "1.4.0" 586 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 587 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 588 | dependencies: 589 | js-tokens "^3.0.0 || ^4.0.0" 590 | 591 | minimatch@^3.0.4: 592 | version "3.0.4" 593 | resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" 594 | integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== 595 | dependencies: 596 | brace-expansion "^1.1.7" 597 | 598 | minimist@^1.1.1, minimist@^1.2.5: 599 | version "1.2.5" 600 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" 601 | integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== 602 | 603 | modern-normalize@^1.0.0: 604 | version "1.0.0" 605 | resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e" 606 | integrity sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw== 607 | 608 | ms@2.1.2: 609 | version "2.1.2" 610 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" 611 | integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== 612 | 613 | nanoid@^3.1.20: 614 | version "3.1.20" 615 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" 616 | integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw== 617 | 618 | node-emoji@^1.8.1: 619 | version "1.10.0" 620 | resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da" 621 | integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw== 622 | dependencies: 623 | lodash.toarray "^4.4.0" 624 | 625 | node-releases@^1.1.70: 626 | version "1.1.70" 627 | resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08" 628 | integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw== 629 | 630 | normalize-range@^0.1.2: 631 | version "0.1.2" 632 | resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" 633 | integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= 634 | 635 | object-assign@^4.1.1: 636 | version "4.1.1" 637 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 638 | integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= 639 | 640 | object-hash@^2.1.1: 641 | version "2.1.1" 642 | resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09" 643 | integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ== 644 | 645 | once@^1.3.0: 646 | version "1.4.0" 647 | resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" 648 | integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= 649 | dependencies: 650 | wrappy "1" 651 | 652 | path-is-absolute@^1.0.0: 653 | version "1.0.1" 654 | resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" 655 | integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= 656 | 657 | path-parse@^1.0.6: 658 | version "1.0.6" 659 | resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" 660 | integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== 661 | 662 | postcss-functions@^3: 663 | version "3.0.0" 664 | resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e" 665 | integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4= 666 | dependencies: 667 | glob "^7.1.2" 668 | object-assign "^4.1.1" 669 | postcss "^6.0.9" 670 | postcss-value-parser "^3.3.0" 671 | 672 | postcss-js@^3.0.3: 673 | version "3.0.3" 674 | resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33" 675 | integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw== 676 | dependencies: 677 | camelcase-css "^2.0.1" 678 | postcss "^8.1.6" 679 | 680 | postcss-nested@^5.0.1: 681 | version "5.0.3" 682 | resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.3.tgz#2f46d77a06fc98d9c22344fd097396f5431386db" 683 | integrity sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g== 684 | dependencies: 685 | postcss-selector-parser "^6.0.4" 686 | 687 | postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: 688 | version "6.0.4" 689 | resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3" 690 | integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw== 691 | dependencies: 692 | cssesc "^3.0.0" 693 | indexes-of "^1.0.1" 694 | uniq "^1.0.1" 695 | util-deprecate "^1.0.2" 696 | 697 | postcss-value-parser@^3.3.0: 698 | version "3.3.1" 699 | resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" 700 | integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== 701 | 702 | postcss-value-parser@^4.1.0: 703 | version "4.1.0" 704 | resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" 705 | integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== 706 | 707 | postcss@^6.0.9: 708 | version "6.0.23" 709 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" 710 | integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== 711 | dependencies: 712 | chalk "^2.4.1" 713 | source-map "^0.6.1" 714 | supports-color "^5.4.0" 715 | 716 | postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.4: 717 | version "8.2.6" 718 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.6.tgz#5d69a974543b45f87e464bc4c3e392a97d6be9fe" 719 | integrity sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg== 720 | dependencies: 721 | colorette "^1.2.1" 722 | nanoid "^3.1.20" 723 | source-map "^0.6.1" 724 | 725 | pretty-hrtime@^1.0.3: 726 | version "1.0.3" 727 | resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" 728 | integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= 729 | 730 | purgecss@^3.1.3: 731 | version "3.1.3" 732 | resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.1.3.tgz#26987ec09d12eeadc318e22f6e5a9eb0be094f41" 733 | integrity sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ== 734 | dependencies: 735 | commander "^6.0.0" 736 | glob "^7.0.0" 737 | postcss "^8.2.1" 738 | postcss-selector-parser "^6.0.2" 739 | 740 | react-dom@^17.0.1: 741 | version "17.0.1" 742 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" 743 | integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== 744 | dependencies: 745 | loose-envify "^1.1.0" 746 | object-assign "^4.1.1" 747 | scheduler "^0.20.1" 748 | 749 | react-refresh@^0.9.0: 750 | version "0.9.0" 751 | resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf" 752 | integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ== 753 | 754 | react@^17.0.1: 755 | version "17.0.1" 756 | resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" 757 | integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== 758 | dependencies: 759 | loose-envify "^1.1.0" 760 | object-assign "^4.1.1" 761 | 762 | reduce-css-calc@^2.1.8: 763 | version "2.1.8" 764 | resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" 765 | integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== 766 | dependencies: 767 | css-unit-converter "^1.1.1" 768 | postcss-value-parser "^3.3.0" 769 | 770 | resolve@^1.19.0: 771 | version "1.20.0" 772 | resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" 773 | integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== 774 | dependencies: 775 | is-core-module "^2.2.0" 776 | path-parse "^1.0.6" 777 | 778 | rollup@^2.38.5: 779 | version "2.39.0" 780 | resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.39.0.tgz#be4f98c9e421793a8fec82c854fb567c35e22ab6" 781 | integrity sha512-+WR3bttcq7zE+BntH09UxaW3bQo3vItuYeLsyk4dL2tuwbeSKJuvwiawyhEnvRdRgrII0Uzk00FpctHO/zB1kw== 782 | optionalDependencies: 783 | fsevents "~2.3.1" 784 | 785 | safe-buffer@~5.1.1: 786 | version "5.1.2" 787 | resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" 788 | integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== 789 | 790 | scheduler@^0.20.1: 791 | version "0.20.1" 792 | resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" 793 | integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== 794 | dependencies: 795 | loose-envify "^1.1.0" 796 | object-assign "^4.1.1" 797 | 798 | semver@^5.4.1: 799 | version "5.7.1" 800 | resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" 801 | integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== 802 | 803 | simple-swizzle@^0.2.2: 804 | version "0.2.2" 805 | resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" 806 | integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= 807 | dependencies: 808 | is-arrayish "^0.3.1" 809 | 810 | source-map@^0.5.0: 811 | version "0.5.7" 812 | resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" 813 | integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= 814 | 815 | source-map@^0.6.1: 816 | version "0.6.1" 817 | resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" 818 | integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== 819 | 820 | supports-color@^5.3.0, supports-color@^5.4.0: 821 | version "5.5.0" 822 | resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" 823 | integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== 824 | dependencies: 825 | has-flag "^3.0.0" 826 | 827 | supports-color@^7.1.0: 828 | version "7.2.0" 829 | resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da" 830 | integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw== 831 | dependencies: 832 | has-flag "^4.0.0" 833 | 834 | tailwindcss@^2.0.2: 835 | version "2.0.3" 836 | resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.0.3.tgz#f8d07797d1f89dc4b171673c26237b58783c2c86" 837 | integrity sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ== 838 | dependencies: 839 | "@fullhuman/postcss-purgecss" "^3.1.3" 840 | bytes "^3.0.0" 841 | chalk "^4.1.0" 842 | color "^3.1.3" 843 | detective "^5.2.0" 844 | didyoumean "^1.2.1" 845 | fs-extra "^9.1.0" 846 | html-tags "^3.1.0" 847 | lodash "^4.17.20" 848 | modern-normalize "^1.0.0" 849 | node-emoji "^1.8.1" 850 | object-hash "^2.1.1" 851 | postcss-functions "^3" 852 | postcss-js "^3.0.3" 853 | postcss-nested "^5.0.1" 854 | postcss-selector-parser "^6.0.4" 855 | postcss-value-parser "^4.1.0" 856 | pretty-hrtime "^1.0.3" 857 | reduce-css-calc "^2.1.8" 858 | resolve "^1.19.0" 859 | 860 | to-fast-properties@^2.0.0: 861 | version "2.0.0" 862 | resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" 863 | integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= 864 | 865 | uniq@^1.0.1: 866 | version "1.0.1" 867 | resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" 868 | integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8= 869 | 870 | universalify@^2.0.0: 871 | version "2.0.0" 872 | resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717" 873 | integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ== 874 | 875 | util-deprecate@^1.0.2: 876 | version "1.0.2" 877 | resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" 878 | integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= 879 | 880 | vite@^2.0.0-beta.50: 881 | version "2.0.0-beta.70" 882 | resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.0-beta.70.tgz#ec0d4f2bfd02f31d2c59aa9760f27c26647f41ce" 883 | integrity sha512-rbuAYZE8T0jNOUykkyfjiiKmz4MpW2KqzHO8++WCCDXyxzIg56ICQ/B6NLZzVpWyk0iSKiUKr2k8NMkmDlZAQQ== 884 | dependencies: 885 | esbuild "^0.8.34" 886 | postcss "^8.2.1" 887 | resolve "^1.19.0" 888 | rollup "^2.38.5" 889 | optionalDependencies: 890 | fsevents "~2.3.1" 891 | 892 | wrappy@1: 893 | version "1.0.2" 894 | resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" 895 | integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= 896 | 897 | xtend@^4.0.2: 898 | version "4.0.2" 899 | resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" 900 | integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== 901 | -------------------------------------------------------------------------------- /08-optimizing-for-production/README.md: -------------------------------------------------------------------------------- 1 | # 08: Optimizing for Production – Tailwind CSS: From Zero to Production 2 | 3 | [Watch the screencast](https://www.youtube.com/watch?v=HZn2LtBT59w) 4 | 5 | Install the required dependencies with `npm`: 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | Then start the dev server: 12 | 13 | ```sh 14 | npm run dev 15 | ``` 16 | 17 | Or build for production to remove unused styles: 18 | 19 | ```sh 20 | npm run build 21 | ``` 22 | -------------------------------------------------------------------------------- /08-optimizing-for-production/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /08-optimizing-for-production/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "up-and-running", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@vitejs/plugin-react-refresh": "^1.1.3", 15 | "autoprefixer": "^10.2.3", 16 | "postcss": "^8.2.4", 17 | "tailwindcss": "^2.0.2", 18 | "vite": "^2.0.0-beta.50" 19 | }, 20 | "dependencies": { 21 | "react": "^17.0.1", 22 | "react-dom": "^17.0.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /08-optimizing-for-production/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/beach-work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/beach-work.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/chicago.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/chicago.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/colorado.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/colorado.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/logo-brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/malibu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/malibu.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/miami.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/miami.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/seattle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/seattle.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/public/img/toronto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tailwindlabs/tailwindcss-from-zero-to-production/98b52c61259c732226c2ec0207ba2246e67a34e6/08-optimizing-for-production/public/img/toronto.jpg -------------------------------------------------------------------------------- /08-optimizing-for-production/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import popularDestinations from "./data/popularDestinations"; 4 | import DestinationCard from "./components/DestinationCard"; 5 | 6 | export default function App() { 7 | return ( 8 |
9 |
10 |
11 |
12 | Workcation 13 | Woman workcationing on the beach 18 |

19 | You can work from anywhere. 20 |
Take advantage of it. 21 |

22 |

23 | Workcation helps you find work-friendly rentals in beautiful locations so you can enjoy some nice weather even when you're not 24 | on vacation. 25 |

26 | 34 |
35 |
36 |
37 | Woman workcationing on the beach 42 |
43 |
44 | 45 |
46 |

Popular destinations

47 |

A selection of great work-friendly cities with lots to see and explore.

48 |
49 | {popularDestinations.map((destination) => ( 50 | 51 | ))} 52 |
53 |
54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /08-optimizing-for-production/src/components/DestinationCard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const sizeClasses = { 4 | height: "h-32", 5 | width: "w-32", 6 | }; 7 | 8 | export default function DestinationCard({ destination }) { 9 | return ( 10 |
11 | {destination.imageAlt} 12 |
13 |

{destination.city}

14 | 15 |

${destination.averagePrice} / night average

16 |
17 | 18 | Explore {destination.propertyCount} properties 19 | 20 |
21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /08-optimizing-for-production/src/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /08-optimizing-for-production/src/data/popularDestinations.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | city: "Toronto", 4 | averagePrice: 120, 5 | propertyCount: 76, 6 | imageUrl: "/img/toronto.jpg", 7 | imageAlt: "Toronto skyline", 8 | }, 9 | { 10 | city: "Malibu", 11 | averagePrice: 215, 12 | propertyCount: 43, 13 | imageUrl: "/img/malibu.jpg", 14 | imageAlt: "Cliff in Malibu", 15 | }, 16 | { 17 | city: "Chicago", 18 | averagePrice: 130, 19 | propertyCount: 115, 20 | imageUrl: "/img/chicago.jpg", 21 | imageAlt: "Chicago skyline", 22 | }, 23 | { 24 | city: "Seattle", 25 | averagePrice: 135, 26 | propertyCount: 63, 27 | imageUrl: "/img/seattle.jpg", 28 | imageAlt: "Seattle skyline", 29 | }, 30 | { 31 | city: "Colorado", 32 | averagePrice: 85, 33 | propertyCount: 47, 34 | imageUrl: "/img/colorado.jpg", 35 | imageAlt: "Lake in Colorado", 36 | }, 37 | { 38 | city: "Miami", 39 | averagePrice: 115, 40 | propertyCount: 86, 41 | imageUrl: "/img/miami.jpg", 42 | imageAlt: "Beach in Miami", 43 | }, 44 | ]; 45 | -------------------------------------------------------------------------------- /08-optimizing-for-production/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | import "./css/tailwind.css"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | -------------------------------------------------------------------------------- /08-optimizing-for-production/tailwind-full.config.js: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | 3 | module.exports = { 4 | purge: [], 5 | presets: [], 6 | darkMode: false, // or 'media' or 'class' 7 | theme: { 8 | screens: { 9 | sm: '640px', 10 | md: '768px', 11 | lg: '1024px', 12 | xl: '1280px', 13 | '2xl': '1536px', 14 | }, 15 | colors: { 16 | transparent: 'transparent', 17 | current: 'currentColor', 18 | 19 | black: colors.black, 20 | white: colors.white, 21 | gray: colors.coolGray, 22 | red: colors.red, 23 | yellow: colors.amber, 24 | green: colors.emerald, 25 | blue: colors.blue, 26 | indigo: colors.indigo, 27 | purple: colors.violet, 28 | pink: colors.pink, 29 | }, 30 | spacing: { 31 | px: '1px', 32 | 0: '0px', 33 | 0.5: '0.125rem', 34 | 1: '0.25rem', 35 | 1.5: '0.375rem', 36 | 2: '0.5rem', 37 | 2.5: '0.625rem', 38 | 3: '0.75rem', 39 | 3.5: '0.875rem', 40 | 4: '1rem', 41 | 5: '1.25rem', 42 | 6: '1.5rem', 43 | 7: '1.75rem', 44 | 8: '2rem', 45 | 9: '2.25rem', 46 | 10: '2.5rem', 47 | 11: '2.75rem', 48 | 12: '3rem', 49 | 14: '3.5rem', 50 | 16: '4rem', 51 | 20: '5rem', 52 | 24: '6rem', 53 | 28: '7rem', 54 | 32: '8rem', 55 | 36: '9rem', 56 | 40: '10rem', 57 | 44: '11rem', 58 | 48: '12rem', 59 | 52: '13rem', 60 | 56: '14rem', 61 | 60: '15rem', 62 | 64: '16rem', 63 | 72: '18rem', 64 | 80: '20rem', 65 | 96: '24rem', 66 | }, 67 | animation: { 68 | none: 'none', 69 | spin: 'spin 1s linear infinite', 70 | ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite', 71 | pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', 72 | bounce: 'bounce 1s infinite', 73 | }, 74 | backgroundColor: (theme) => theme('colors'), 75 | backgroundImage: { 76 | none: 'none', 77 | 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))', 78 | 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))', 79 | 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))', 80 | 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))', 81 | 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))', 82 | 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))', 83 | 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))', 84 | 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))', 85 | }, 86 | backgroundOpacity: (theme) => theme('opacity'), 87 | backgroundPosition: { 88 | bottom: 'bottom', 89 | center: 'center', 90 | left: 'left', 91 | 'left-bottom': 'left bottom', 92 | 'left-top': 'left top', 93 | right: 'right', 94 | 'right-bottom': 'right bottom', 95 | 'right-top': 'right top', 96 | top: 'top', 97 | }, 98 | backgroundSize: { 99 | auto: 'auto', 100 | cover: 'cover', 101 | contain: 'contain', 102 | }, 103 | borderColor: (theme) => ({ 104 | ...theme('colors'), 105 | DEFAULT: theme('colors.gray.200', 'currentColor'), 106 | }), 107 | borderOpacity: (theme) => theme('opacity'), 108 | borderRadius: { 109 | none: '0px', 110 | sm: '0.125rem', 111 | DEFAULT: '0.25rem', 112 | md: '0.375rem', 113 | lg: '0.5rem', 114 | xl: '0.75rem', 115 | '2xl': '1rem', 116 | '3xl': '1.5rem', 117 | full: '9999px', 118 | }, 119 | borderWidth: { 120 | DEFAULT: '1px', 121 | 0: '0px', 122 | 2: '2px', 123 | 4: '4px', 124 | 8: '8px', 125 | }, 126 | boxShadow: { 127 | sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', 128 | DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 129 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 130 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 131 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 132 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 133 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 134 | none: 'none', 135 | }, 136 | container: {}, 137 | cursor: { 138 | auto: 'auto', 139 | default: 'default', 140 | pointer: 'pointer', 141 | wait: 'wait', 142 | text: 'text', 143 | move: 'move', 144 | 'not-allowed': 'not-allowed', 145 | }, 146 | divideColor: (theme) => theme('borderColor'), 147 | divideOpacity: (theme) => theme('borderOpacity'), 148 | divideWidth: (theme) => theme('borderWidth'), 149 | fill: { current: 'currentColor' }, 150 | flex: { 151 | 1: '1 1 0%', 152 | auto: '1 1 auto', 153 | initial: '0 1 auto', 154 | none: 'none', 155 | }, 156 | flexGrow: { 157 | 0: '0', 158 | DEFAULT: '1', 159 | }, 160 | flexShrink: { 161 | 0: '0', 162 | DEFAULT: '1', 163 | }, 164 | fontFamily: { 165 | sans: [ 166 | 'ui-sans-serif', 167 | 'system-ui', 168 | '-apple-system', 169 | 'BlinkMacSystemFont', 170 | '"Segoe UI"', 171 | 'Roboto', 172 | '"Helvetica Neue"', 173 | 'Arial', 174 | '"Noto Sans"', 175 | 'sans-serif', 176 | '"Apple Color Emoji"', 177 | '"Segoe UI Emoji"', 178 | '"Segoe UI Symbol"', 179 | '"Noto Color Emoji"', 180 | ], 181 | serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], 182 | mono: [ 183 | 'ui-monospace', 184 | 'SFMono-Regular', 185 | 'Menlo', 186 | 'Monaco', 187 | 'Consolas', 188 | '"Liberation Mono"', 189 | '"Courier New"', 190 | 'monospace', 191 | ], 192 | }, 193 | fontSize: { 194 | xs: ['0.75rem', { lineHeight: '1rem' }], 195 | sm: ['0.875rem', { lineHeight: '1.25rem' }], 196 | base: ['1rem', { lineHeight: '1.5rem' }], 197 | lg: ['1.125rem', { lineHeight: '1.75rem' }], 198 | xl: ['1.25rem', { lineHeight: '1.75rem' }], 199 | '2xl': ['1.5rem', { lineHeight: '2rem' }], 200 | '3xl': ['1.875rem', { lineHeight: '2.25rem' }], 201 | '4xl': ['2.25rem', { lineHeight: '2.5rem' }], 202 | '5xl': ['3rem', { lineHeight: '1' }], 203 | '6xl': ['3.75rem', { lineHeight: '1' }], 204 | '7xl': ['4.5rem', { lineHeight: '1' }], 205 | '8xl': ['6rem', { lineHeight: '1' }], 206 | '9xl': ['8rem', { lineHeight: '1' }], 207 | }, 208 | fontWeight: { 209 | thin: '100', 210 | extralight: '200', 211 | light: '300', 212 | normal: '400', 213 | medium: '500', 214 | semibold: '600', 215 | bold: '700', 216 | extrabold: '800', 217 | black: '900', 218 | }, 219 | gap: (theme) => theme('spacing'), 220 | gradientColorStops: (theme) => theme('colors'), 221 | gridAutoColumns: { 222 | auto: 'auto', 223 | min: 'min-content', 224 | max: 'max-content', 225 | fr: 'minmax(0, 1fr)', 226 | }, 227 | gridAutoRows: { 228 | auto: 'auto', 229 | min: 'min-content', 230 | max: 'max-content', 231 | fr: 'minmax(0, 1fr)', 232 | }, 233 | gridColumn: { 234 | auto: 'auto', 235 | 'span-1': 'span 1 / span 1', 236 | 'span-2': 'span 2 / span 2', 237 | 'span-3': 'span 3 / span 3', 238 | 'span-4': 'span 4 / span 4', 239 | 'span-5': 'span 5 / span 5', 240 | 'span-6': 'span 6 / span 6', 241 | 'span-7': 'span 7 / span 7', 242 | 'span-8': 'span 8 / span 8', 243 | 'span-9': 'span 9 / span 9', 244 | 'span-10': 'span 10 / span 10', 245 | 'span-11': 'span 11 / span 11', 246 | 'span-12': 'span 12 / span 12', 247 | 'span-full': '1 / -1', 248 | }, 249 | gridColumnEnd: { 250 | auto: 'auto', 251 | 1: '1', 252 | 2: '2', 253 | 3: '3', 254 | 4: '4', 255 | 5: '5', 256 | 6: '6', 257 | 7: '7', 258 | 8: '8', 259 | 9: '9', 260 | 10: '10', 261 | 11: '11', 262 | 12: '12', 263 | 13: '13', 264 | }, 265 | gridColumnStart: { 266 | auto: 'auto', 267 | 1: '1', 268 | 2: '2', 269 | 3: '3', 270 | 4: '4', 271 | 5: '5', 272 | 6: '6', 273 | 7: '7', 274 | 8: '8', 275 | 9: '9', 276 | 10: '10', 277 | 11: '11', 278 | 12: '12', 279 | 13: '13', 280 | }, 281 | gridRow: { 282 | auto: 'auto', 283 | 'span-1': 'span 1 / span 1', 284 | 'span-2': 'span 2 / span 2', 285 | 'span-3': 'span 3 / span 3', 286 | 'span-4': 'span 4 / span 4', 287 | 'span-5': 'span 5 / span 5', 288 | 'span-6': 'span 6 / span 6', 289 | 'span-full': '1 / -1', 290 | }, 291 | gridRowStart: { 292 | auto: 'auto', 293 | 1: '1', 294 | 2: '2', 295 | 3: '3', 296 | 4: '4', 297 | 5: '5', 298 | 6: '6', 299 | 7: '7', 300 | }, 301 | gridRowEnd: { 302 | auto: 'auto', 303 | 1: '1', 304 | 2: '2', 305 | 3: '3', 306 | 4: '4', 307 | 5: '5', 308 | 6: '6', 309 | 7: '7', 310 | }, 311 | transformOrigin: { 312 | center: 'center', 313 | top: 'top', 314 | 'top-right': 'top right', 315 | right: 'right', 316 | 'bottom-right': 'bottom right', 317 | bottom: 'bottom', 318 | 'bottom-left': 'bottom left', 319 | left: 'left', 320 | 'top-left': 'top left', 321 | }, 322 | gridTemplateColumns: { 323 | none: 'none', 324 | 1: 'repeat(1, minmax(0, 1fr))', 325 | 2: 'repeat(2, minmax(0, 1fr))', 326 | 3: 'repeat(3, minmax(0, 1fr))', 327 | 4: 'repeat(4, minmax(0, 1fr))', 328 | 5: 'repeat(5, minmax(0, 1fr))', 329 | 6: 'repeat(6, minmax(0, 1fr))', 330 | 7: 'repeat(7, minmax(0, 1fr))', 331 | 8: 'repeat(8, minmax(0, 1fr))', 332 | 9: 'repeat(9, minmax(0, 1fr))', 333 | 10: 'repeat(10, minmax(0, 1fr))', 334 | 11: 'repeat(11, minmax(0, 1fr))', 335 | 12: 'repeat(12, minmax(0, 1fr))', 336 | }, 337 | gridTemplateRows: { 338 | none: 'none', 339 | 1: 'repeat(1, minmax(0, 1fr))', 340 | 2: 'repeat(2, minmax(0, 1fr))', 341 | 3: 'repeat(3, minmax(0, 1fr))', 342 | 4: 'repeat(4, minmax(0, 1fr))', 343 | 5: 'repeat(5, minmax(0, 1fr))', 344 | 6: 'repeat(6, minmax(0, 1fr))', 345 | }, 346 | height: (theme) => ({ 347 | auto: 'auto', 348 | ...theme('spacing'), 349 | '1/2': '50%', 350 | '1/3': '33.333333%', 351 | '2/3': '66.666667%', 352 | '1/4': '25%', 353 | '2/4': '50%', 354 | '3/4': '75%', 355 | '1/5': '20%', 356 | '2/5': '40%', 357 | '3/5': '60%', 358 | '4/5': '80%', 359 | '1/6': '16.666667%', 360 | '2/6': '33.333333%', 361 | '3/6': '50%', 362 | '4/6': '66.666667%', 363 | '5/6': '83.333333%', 364 | full: '100%', 365 | screen: '100vh', 366 | }), 367 | inset: (theme, { negative }) => ({ 368 | auto: 'auto', 369 | ...theme('spacing'), 370 | ...negative(theme('spacing')), 371 | '1/2': '50%', 372 | '1/3': '33.333333%', 373 | '2/3': '66.666667%', 374 | '1/4': '25%', 375 | '2/4': '50%', 376 | '3/4': '75%', 377 | full: '100%', 378 | '-1/2': '-50%', 379 | '-1/3': '-33.333333%', 380 | '-2/3': '-66.666667%', 381 | '-1/4': '-25%', 382 | '-2/4': '-50%', 383 | '-3/4': '-75%', 384 | '-full': '-100%', 385 | }), 386 | keyframes: { 387 | spin: { 388 | to: { 389 | transform: 'rotate(360deg)', 390 | }, 391 | }, 392 | ping: { 393 | '75%, 100%': { 394 | transform: 'scale(2)', 395 | opacity: '0', 396 | }, 397 | }, 398 | pulse: { 399 | '50%': { 400 | opacity: '.5', 401 | }, 402 | }, 403 | bounce: { 404 | '0%, 100%': { 405 | transform: 'translateY(-25%)', 406 | animationTimingFunction: 'cubic-bezier(0.8,0,1,1)', 407 | }, 408 | '50%': { 409 | transform: 'none', 410 | animationTimingFunction: 'cubic-bezier(0,0,0.2,1)', 411 | }, 412 | }, 413 | }, 414 | letterSpacing: { 415 | tighter: '-0.05em', 416 | tight: '-0.025em', 417 | normal: '0em', 418 | wide: '0.025em', 419 | wider: '0.05em', 420 | widest: '0.1em', 421 | }, 422 | lineHeight: { 423 | none: '1', 424 | tight: '1.25', 425 | snug: '1.375', 426 | normal: '1.5', 427 | relaxed: '1.625', 428 | loose: '2', 429 | 3: '.75rem', 430 | 4: '1rem', 431 | 5: '1.25rem', 432 | 6: '1.5rem', 433 | 7: '1.75rem', 434 | 8: '2rem', 435 | 9: '2.25rem', 436 | 10: '2.5rem', 437 | }, 438 | listStyleType: { 439 | none: 'none', 440 | disc: 'disc', 441 | decimal: 'decimal', 442 | }, 443 | margin: (theme, { negative }) => ({ 444 | auto: 'auto', 445 | ...theme('spacing'), 446 | ...negative(theme('spacing')), 447 | }), 448 | maxHeight: (theme) => ({ 449 | ...theme('spacing'), 450 | full: '100%', 451 | screen: '100vh', 452 | }), 453 | maxWidth: (theme, { breakpoints }) => ({ 454 | none: 'none', 455 | 0: '0rem', 456 | xs: '20rem', 457 | sm: '24rem', 458 | md: '28rem', 459 | lg: '32rem', 460 | xl: '36rem', 461 | '2xl': '42rem', 462 | '3xl': '48rem', 463 | '4xl': '56rem', 464 | '5xl': '64rem', 465 | '6xl': '72rem', 466 | '7xl': '80rem', 467 | full: '100%', 468 | min: 'min-content', 469 | max: 'max-content', 470 | prose: '65ch', 471 | ...breakpoints(theme('screens')), 472 | }), 473 | minHeight: { 474 | 0: '0px', 475 | full: '100%', 476 | screen: '100vh', 477 | }, 478 | minWidth: { 479 | 0: '0px', 480 | full: '100%', 481 | min: 'min-content', 482 | max: 'max-content', 483 | }, 484 | objectPosition: { 485 | bottom: 'bottom', 486 | center: 'center', 487 | left: 'left', 488 | 'left-bottom': 'left bottom', 489 | 'left-top': 'left top', 490 | right: 'right', 491 | 'right-bottom': 'right bottom', 492 | 'right-top': 'right top', 493 | top: 'top', 494 | }, 495 | opacity: { 496 | 0: '0', 497 | 5: '0.05', 498 | 10: '0.1', 499 | 20: '0.2', 500 | 25: '0.25', 501 | 30: '0.3', 502 | 40: '0.4', 503 | 50: '0.5', 504 | 60: '0.6', 505 | 70: '0.7', 506 | 75: '0.75', 507 | 80: '0.8', 508 | 90: '0.9', 509 | 95: '0.95', 510 | 100: '1', 511 | }, 512 | order: { 513 | first: '-9999', 514 | last: '9999', 515 | none: '0', 516 | 1: '1', 517 | 2: '2', 518 | 3: '3', 519 | 4: '4', 520 | 5: '5', 521 | 6: '6', 522 | 7: '7', 523 | 8: '8', 524 | 9: '9', 525 | 10: '10', 526 | 11: '11', 527 | 12: '12', 528 | }, 529 | outline: { 530 | none: ['2px solid transparent', '2px'], 531 | white: ['2px dotted white', '2px'], 532 | black: ['2px dotted black', '2px'], 533 | }, 534 | padding: (theme) => theme('spacing'), 535 | placeholderColor: (theme) => theme('colors'), 536 | placeholderOpacity: (theme) => theme('opacity'), 537 | ringColor: (theme) => ({ 538 | DEFAULT: theme('colors.blue.500', '#3b82f6'), 539 | ...theme('colors'), 540 | }), 541 | ringOffsetColor: (theme) => theme('colors'), 542 | ringOffsetWidth: { 543 | 0: '0px', 544 | 1: '1px', 545 | 2: '2px', 546 | 4: '4px', 547 | 8: '8px', 548 | }, 549 | ringOpacity: (theme) => ({ 550 | DEFAULT: '0.5', 551 | ...theme('opacity'), 552 | }), 553 | ringWidth: { 554 | DEFAULT: '3px', 555 | 0: '0px', 556 | 1: '1px', 557 | 2: '2px', 558 | 4: '4px', 559 | 8: '8px', 560 | }, 561 | rotate: { 562 | '-180': '-180deg', 563 | '-90': '-90deg', 564 | '-45': '-45deg', 565 | '-12': '-12deg', 566 | '-6': '-6deg', 567 | '-3': '-3deg', 568 | '-2': '-2deg', 569 | '-1': '-1deg', 570 | 0: '0deg', 571 | 1: '1deg', 572 | 2: '2deg', 573 | 3: '3deg', 574 | 6: '6deg', 575 | 12: '12deg', 576 | 45: '45deg', 577 | 90: '90deg', 578 | 180: '180deg', 579 | }, 580 | scale: { 581 | 0: '0', 582 | 50: '.5', 583 | 75: '.75', 584 | 90: '.9', 585 | 95: '.95', 586 | 100: '1', 587 | 105: '1.05', 588 | 110: '1.1', 589 | 125: '1.25', 590 | 150: '1.5', 591 | }, 592 | skew: { 593 | '-12': '-12deg', 594 | '-6': '-6deg', 595 | '-3': '-3deg', 596 | '-2': '-2deg', 597 | '-1': '-1deg', 598 | 0: '0deg', 599 | 1: '1deg', 600 | 2: '2deg', 601 | 3: '3deg', 602 | 6: '6deg', 603 | 12: '12deg', 604 | }, 605 | space: (theme, { negative }) => ({ 606 | ...theme('spacing'), 607 | ...negative(theme('spacing')), 608 | }), 609 | stroke: { 610 | current: 'currentColor', 611 | }, 612 | strokeWidth: { 613 | 0: '0', 614 | 1: '1', 615 | 2: '2', 616 | }, 617 | textColor: (theme) => theme('colors'), 618 | textOpacity: (theme) => theme('opacity'), 619 | transitionDuration: { 620 | DEFAULT: '150ms', 621 | 75: '75ms', 622 | 100: '100ms', 623 | 150: '150ms', 624 | 200: '200ms', 625 | 300: '300ms', 626 | 500: '500ms', 627 | 700: '700ms', 628 | 1000: '1000ms', 629 | }, 630 | transitionDelay: { 631 | 75: '75ms', 632 | 100: '100ms', 633 | 150: '150ms', 634 | 200: '200ms', 635 | 300: '300ms', 636 | 500: '500ms', 637 | 700: '700ms', 638 | 1000: '1000ms', 639 | }, 640 | transitionProperty: { 641 | none: 'none', 642 | all: 'all', 643 | DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', 644 | colors: 'background-color, border-color, color, fill, stroke', 645 | opacity: 'opacity', 646 | shadow: 'box-shadow', 647 | transform: 'transform', 648 | }, 649 | transitionTimingFunction: { 650 | DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', 651 | linear: 'linear', 652 | in: 'cubic-bezier(0.4, 0, 1, 1)', 653 | out: 'cubic-bezier(0, 0, 0.2, 1)', 654 | 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', 655 | }, 656 | translate: (theme, { negative }) => ({ 657 | ...theme('spacing'), 658 | ...negative(theme('spacing')), 659 | '1/2': '50%', 660 | '1/3': '33.333333%', 661 | '2/3': '66.666667%', 662 | '1/4': '25%', 663 | '2/4': '50%', 664 | '3/4': '75%', 665 | full: '100%', 666 | '-1/2': '-50%', 667 | '-1/3': '-33.333333%', 668 | '-2/3': '-66.666667%', 669 | '-1/4': '-25%', 670 | '-2/4': '-50%', 671 | '-3/4': '-75%', 672 | '-full': '-100%', 673 | }), 674 | width: (theme) => ({ 675 | auto: 'auto', 676 | ...theme('spacing'), 677 | '1/2': '50%', 678 | '1/3': '33.333333%', 679 | '2/3': '66.666667%', 680 | '1/4': '25%', 681 | '2/4': '50%', 682 | '3/4': '75%', 683 | '1/5': '20%', 684 | '2/5': '40%', 685 | '3/5': '60%', 686 | '4/5': '80%', 687 | '1/6': '16.666667%', 688 | '2/6': '33.333333%', 689 | '3/6': '50%', 690 | '4/6': '66.666667%', 691 | '5/6': '83.333333%', 692 | '1/12': '8.333333%', 693 | '2/12': '16.666667%', 694 | '3/12': '25%', 695 | '4/12': '33.333333%', 696 | '5/12': '41.666667%', 697 | '6/12': '50%', 698 | '7/12': '58.333333%', 699 | '8/12': '66.666667%', 700 | '9/12': '75%', 701 | '10/12': '83.333333%', 702 | '11/12': '91.666667%', 703 | full: '100%', 704 | screen: '100vw', 705 | min: 'min-content', 706 | max: 'max-content', 707 | }), 708 | zIndex: { 709 | auto: 'auto', 710 | 0: '0', 711 | 10: '10', 712 | 20: '20', 713 | 30: '30', 714 | 40: '40', 715 | 50: '50', 716 | }, 717 | }, 718 | variantOrder: [ 719 | 'first', 720 | 'last', 721 | 'odd', 722 | 'even', 723 | 'visited', 724 | 'checked', 725 | 'group-hover', 726 | 'group-focus', 727 | 'focus-within', 728 | 'hover', 729 | 'focus', 730 | 'focus-visible', 731 | 'active', 732 | 'disabled', 733 | ], 734 | variants: { 735 | accessibility: ['responsive', 'focus-within', 'focus'], 736 | alignContent: ['responsive'], 737 | alignItems: ['responsive'], 738 | alignSelf: ['responsive'], 739 | animation: ['responsive'], 740 | appearance: ['responsive'], 741 | backgroundAttachment: ['responsive'], 742 | backgroundClip: ['responsive'], 743 | backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 744 | backgroundImage: ['responsive'], 745 | backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 746 | backgroundPosition: ['responsive'], 747 | backgroundRepeat: ['responsive'], 748 | backgroundSize: ['responsive'], 749 | borderCollapse: ['responsive'], 750 | borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 751 | borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 752 | borderRadius: ['responsive'], 753 | borderStyle: ['responsive'], 754 | borderWidth: ['responsive'], 755 | boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 756 | boxSizing: ['responsive'], 757 | clear: ['responsive'], 758 | container: ['responsive'], 759 | cursor: ['responsive'], 760 | display: ['responsive'], 761 | divideColor: ['responsive', 'dark'], 762 | divideOpacity: ['responsive'], 763 | divideStyle: ['responsive'], 764 | divideWidth: ['responsive'], 765 | fill: ['responsive'], 766 | flex: ['responsive'], 767 | flexDirection: ['responsive'], 768 | flexGrow: ['responsive'], 769 | flexShrink: ['responsive'], 770 | flexWrap: ['responsive'], 771 | float: ['responsive'], 772 | fontFamily: ['responsive'], 773 | fontSize: ['responsive'], 774 | fontSmoothing: ['responsive'], 775 | fontStyle: ['responsive'], 776 | fontVariantNumeric: ['responsive'], 777 | fontWeight: ['responsive'], 778 | gap: ['responsive'], 779 | gradientColorStops: ['responsive', 'dark', 'hover', 'focus'], 780 | gridAutoColumns: ['responsive'], 781 | gridAutoFlow: ['responsive'], 782 | gridAutoRows: ['responsive'], 783 | gridColumn: ['responsive'], 784 | gridColumnEnd: ['responsive'], 785 | gridColumnStart: ['responsive'], 786 | gridRow: ['responsive'], 787 | gridRowEnd: ['responsive'], 788 | gridRowStart: ['responsive'], 789 | gridTemplateColumns: ['responsive'], 790 | gridTemplateRows: ['responsive'], 791 | height: ['responsive'], 792 | inset: ['responsive'], 793 | justifyContent: ['responsive'], 794 | justifyItems: ['responsive'], 795 | justifySelf: ['responsive'], 796 | letterSpacing: ['responsive'], 797 | lineHeight: ['responsive'], 798 | listStylePosition: ['responsive'], 799 | listStyleType: ['responsive'], 800 | margin: ['responsive'], 801 | maxHeight: ['responsive'], 802 | maxWidth: ['responsive'], 803 | minHeight: ['responsive'], 804 | minWidth: ['responsive'], 805 | objectFit: ['responsive'], 806 | objectPosition: ['responsive'], 807 | opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 808 | order: ['responsive'], 809 | outline: ['responsive', 'focus-within', 'focus'], 810 | overflow: ['responsive'], 811 | overscrollBehavior: ['responsive'], 812 | padding: ['responsive'], 813 | placeContent: ['responsive'], 814 | placeItems: ['responsive'], 815 | placeSelf: ['responsive'], 816 | placeholderColor: ['responsive', 'dark', 'focus'], 817 | placeholderOpacity: ['responsive', 'focus'], 818 | pointerEvents: ['responsive'], 819 | position: ['responsive'], 820 | resize: ['responsive'], 821 | ringColor: ['responsive', 'dark', 'focus-within', 'focus'], 822 | ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'], 823 | ringOffsetWidth: ['responsive', 'focus-within', 'focus'], 824 | ringOpacity: ['responsive', 'focus-within', 'focus'], 825 | ringWidth: ['responsive', 'focus-within', 'focus'], 826 | rotate: ['responsive', 'hover', 'focus'], 827 | scale: ['responsive', 'hover', 'focus'], 828 | skew: ['responsive', 'hover', 'focus'], 829 | space: ['responsive'], 830 | stroke: ['responsive'], 831 | strokeWidth: ['responsive'], 832 | tableLayout: ['responsive'], 833 | textAlign: ['responsive'], 834 | textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], 835 | textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 836 | textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], 837 | textOverflow: ['responsive'], 838 | textTransform: ['responsive'], 839 | transform: ['responsive'], 840 | transformOrigin: ['responsive'], 841 | transitionDelay: ['responsive'], 842 | transitionDuration: ['responsive'], 843 | transitionProperty: ['responsive'], 844 | transitionTimingFunction: ['responsive'], 845 | translate: ['responsive', 'hover', 'focus'], 846 | userSelect: ['responsive'], 847 | verticalAlign: ['responsive'], 848 | visibility: ['responsive'], 849 | whitespace: ['responsive'], 850 | width: ['responsive'], 851 | wordBreak: ['responsive'], 852 | zIndex: ['responsive', 'focus-within', 'focus'], 853 | }, 854 | plugins: [], 855 | } 856 | -------------------------------------------------------------------------------- /08-optimizing-for-production/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: { 3 | content: ["./src/**/*.jsx", "./index.html"], 4 | }, 5 | darkMode: false, // or 'media' or 'class' 6 | theme: { 7 | extend: { 8 | colors: { 9 | brand: { 10 | light: "#3fbaeb", 11 | DEFAULT: "#0fa9e6", 12 | dark: "#0c87b8", 13 | }, 14 | }, 15 | fontFamily: { 16 | headline: "Poppins, sans-serif", 17 | }, 18 | }, 19 | }, 20 | variants: { 21 | extend: { 22 | backgroundColor: ["active"], 23 | }, 24 | }, 25 | plugins: [], 26 | }; 27 | -------------------------------------------------------------------------------- /08-optimizing-for-production/vite.config.js: -------------------------------------------------------------------------------- 1 | import reactRefresh from "@vitejs/plugin-react-refresh"; 2 | 3 | /** 4 | * https://vitejs.dev/config/ 5 | * @type { import('vite').UserConfig } 6 | */ 7 | export default { 8 | plugins: [reactRefresh()], 9 | }; 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tailwind CSS: From Zero to Production 2 | 3 | This repository contains the source code for each lesson in the ["Tailwind CSS: From Zero to Production"](https://www.youtube.com/watch?v=elgqxmdVms8&list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0&index=1) screencast series. 4 | 5 | 6 | 1. **Setting Up Tailwind CSS**
7 | [Screencast](https://www.youtube.com/watch?v=qYgogv4R8zg) · [Source code](01-setting-up-tailwindcss) 8 | 9 | 2. **The Utility-First Workflow**
10 | [Screencast](https://www.youtube.com/watch?v=UvF56fPGVt4) · [Source code](02-the-utility-first-workflow) 11 | 12 | 3. **Responsive Design**
13 | [Screencast](https://www.youtube.com/watch?v=hX1zUdj4Dw4) · [Source code](03-responsive-design) 14 | 15 | 4. **Hover, Focus and Other States**
16 | [Screencast](https://www.youtube.com/watch?v=5_BPDve5-3M) · [Source code](04-hover-focus-and-other-states) 17 | 18 | 5. **Composing Utilities with @apply**
19 | [Screencast](https://www.youtube.com/watch?v=TrftauE2Vyk) · [Source code](05-composing-utilities-with-@apply) 20 | 21 | 6. **Extracting Reusable Components**
22 | [Screencast](https://www.youtube.com/watch?v=v-mkUxhaFVA) · [Source code](06-extracting-reusable-components) 23 | 24 | 7. **Customizing Your Design System**
25 | [Screencast](https://www.youtube.com/watch?v=0l0Gx8gWPHk) · [Source code](07-customizing-your-design-system) 26 | 27 | 8. **Optimizing for Production**
28 | [Screencast](https://www.youtube.com/watch?v=HZn2LtBT59w) · [Source code](08-optimizing-for-production) 29 | --------------------------------------------------------------------------------