├── src
    ├── profile.jpg
    ├── assets
    │   └── tailwind.css
    ├── setupTests.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── App.css
    ├── App.js
    ├── logo.svg
    └── serviceWorker.js
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── README.md
├── .gitignore
├── package.json
└── tailwind.js


/src/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krofax/React-TailwindCSS/HEAD/src/profile.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krofax/React-TailwindCSS/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krofax/React-TailwindCSS/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krofax/React-TailwindCSS/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | 
2 | @tailwind base;
3 | 
4 | @tailwind components;
5 | 
6 | @tailwind utilities;


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | 
2 | const tailwindcss = require('tailwindcss');
3 | module.exports = {
4 |     plugins: [
5 |         tailwindcss('./tailwind.js'),
6 |         require('autoprefixer')
7 |     ],
8 | };


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## TailwindCSS React Setup
 2 | 
 3 | ## Profile Card Project
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `npm start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | Made with 😍 by Blessing Krofegha


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import './assets/main.css';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | function App() {
 4 |   return (
 5 |       
 6 |     <div className="max-w-sm rounded overflow-hidden shadow-lg">
 7 |       <img className="w-full" src={require('./profile.jpg')} alt="Display" />
 8 |       <div className="px-6 py-4">
 9 |         <div className="font-bold text-purple-500 text-xl mb-2">
10 |           Blessing Krofegha
11 |         </div>
12 |         <p className="text-gray-700 text-base">
13 |           When i'm not coding i switch to netflix with biscuits and cold tea as my companion. <span></span>😜
14 |         </p>
15 |       </div> 
16 |       <div className="px-6 py-4">
17 |         <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Software Engineer</span>
18 |         <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Writter</span>
19 |         <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mt-2 ml-20">#Public Speaker</span>
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | export default App;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-tailwindcss",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.4.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "react": "^16.12.0",
10 |     "react-dom": "^16.12.0",
11 |     "react-scripts": "3.4.0"
12 |   },
13 |   "scripts": {
14 |     "start": "npm run watch:css && react-scripts start",
15 |     "build": "npm run build:css && react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject",
18 |     "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", 
19 |     "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": "react-app"
23 |   },
24 |   "browserslist": {
25 |     "production": [
26 |       ">0.2%",
27 |       "not dead",
28 |       "not op_mini all"
29 |     ],
30 |     "development": [
31 |       "last 1 chrome version",
32 |       "last 1 firefox version",
33 |       "last 1 safari version"
34 |     ]
35 |   },
36 |   "devDependencies": {
37 |     "autoprefixer": "^9.7.4",
38 |     "postcss-cli": "^7.1.0",
39 |     "tailwindcss": "^1.2.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' }
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   prefix: '',
  3 |   important: false,
  4 |   separator: ':',
  5 |   theme: {
  6 |     screens: {
  7 |       sm: '640px',
  8 |       md: '768px',
  9 |       lg: '1024px',
 10 |       xl: '1280px',
 11 |     },
 12 |     colors: {
 13 |       transparent: 'transparent',
 14 | 
 15 |       black: '#000',
 16 |       white: '#fff',
 17 | 
 18 |       gray: {
 19 |         100: '#f7fafc',
 20 |         200: '#edf2f7',
 21 |         300: '#e2e8f0',
 22 |         400: '#cbd5e0',
 23 |         500: '#a0aec0',
 24 |         600: '#718096',
 25 |         700: '#4a5568',
 26 |         800: '#2d3748',
 27 |         900: '#1a202c',
 28 |       },
 29 |       red: {
 30 |         100: '#fff5f5',
 31 |         200: '#fed7d7',
 32 |         300: '#feb2b2',
 33 |         400: '#fc8181',
 34 |         500: '#f56565',
 35 |         600: '#e53e3e',
 36 |         700: '#c53030',
 37 |         800: '#9b2c2c',
 38 |         900: '#742a2a',
 39 |       },
 40 |       orange: {
 41 |         100: '#fffaf0',
 42 |         200: '#feebc8',
 43 |         300: '#fbd38d',
 44 |         400: '#f6ad55',
 45 |         500: '#ed8936',
 46 |         600: '#dd6b20',
 47 |         700: '#c05621',
 48 |         800: '#9c4221',
 49 |         900: '#7b341e',
 50 |       },
 51 |       yellow: {
 52 |         100: '#fffff0',
 53 |         200: '#fefcbf',
 54 |         300: '#faf089',
 55 |         400: '#f6e05e',
 56 |         500: '#ecc94b',
 57 |         600: '#d69e2e',
 58 |         700: '#b7791f',
 59 |         800: '#975a16',
 60 |         900: '#744210',
 61 |       },
 62 |       green: {
 63 |         100: '#f0fff4',
 64 |         200: '#c6f6d5',
 65 |         300: '#9ae6b4',
 66 |         400: '#68d391',
 67 |         500: '#48bb78',
 68 |         600: '#38a169',
 69 |         700: '#2f855a',
 70 |         800: '#276749',
 71 |         900: '#22543d',
 72 |       },
 73 |       teal: {
 74 |         100: '#e6fffa',
 75 |         200: '#b2f5ea',
 76 |         300: '#81e6d9',
 77 |         400: '#4fd1c5',
 78 |         500: '#38b2ac',
 79 |         600: '#319795',
 80 |         700: '#2c7a7b',
 81 |         800: '#285e61',
 82 |         900: '#234e52',
 83 |       },
 84 |       blue: {
 85 |         100: '#ebf8ff',
 86 |         200: '#bee3f8',
 87 |         300: '#90cdf4',
 88 |         400: '#63b3ed',
 89 |         500: '#4299e1',
 90 |         600: '#3182ce',
 91 |         700: '#2b6cb0',
 92 |         800: '#2c5282',
 93 |         900: '#2a4365',
 94 |       },
 95 |       indigo: {
 96 |         100: '#ebf4ff',
 97 |         200: '#c3dafe',
 98 |         300: '#a3bffa',
 99 |         400: '#7f9cf5',
100 |         500: '#667eea',
101 |         600: '#5a67d8',
102 |         700: '#4c51bf',
103 |         800: '#434190',
104 |         900: '#3c366b',
105 |       },
106 |       purple: {
107 |         100: '#faf5ff',
108 |         200: '#e9d8fd',
109 |         300: '#d6bcfa',
110 |         400: '#b794f4',
111 |         500: '#9f7aea',
112 |         600: '#805ad5',
113 |         700: '#6b46c1',
114 |         800: '#553c9a',
115 |         900: '#44337a',
116 |       },
117 |       pink: {
118 |         100: '#fff5f7',
119 |         200: '#fed7e2',
120 |         300: '#fbb6ce',
121 |         400: '#f687b3',
122 |         500: '#ed64a6',
123 |         600: '#d53f8c',
124 |         700: '#b83280',
125 |         800: '#97266d',
126 |         900: '#702459',
127 |       },
128 |     },
129 |     spacing: {
130 |       px: '1px',
131 |       '0': '0',
132 |       '1': '0.25rem',
133 |       '2': '0.5rem',
134 |       '3': '0.75rem',
135 |       '4': '1rem',
136 |       '5': '1.25rem',
137 |       '6': '1.5rem',
138 |       '8': '2rem',
139 |       '10': '2.5rem',
140 |       '12': '3rem',
141 |       '16': '4rem',
142 |       '20': '5rem',
143 |       '24': '6rem',
144 |       '32': '8rem',
145 |       '40': '10rem',
146 |       '48': '12rem',
147 |       '56': '14rem',
148 |       '64': '16rem',
149 |     },
150 |     backgroundColor: theme => theme('colors'),
151 |     backgroundPosition: {
152 |       bottom: 'bottom',
153 |       center: 'center',
154 |       left: 'left',
155 |       'left-bottom': 'left bottom',
156 |       'left-top': 'left top',
157 |       right: 'right',
158 |       'right-bottom': 'right bottom',
159 |       'right-top': 'right top',
160 |       top: 'top',
161 |     },
162 |     backgroundSize: {
163 |       auto: 'auto',
164 |       cover: 'cover',
165 |       contain: 'contain',
166 |     },
167 |     borderColor: theme => ({
168 |       ...theme('colors'),
169 |       default: theme('colors.gray.300', 'currentColor'),
170 |     }),
171 |     borderRadius: {
172 |       none: '0',
173 |       sm: '0.125rem',
174 |       default: '0.25rem',
175 |       md: '0.375rem',
176 |       lg: '0.5rem',
177 |       full: '9999px',
178 |     },
179 |     borderWidth: {
180 |       default: '1px',
181 |       '0': '0',
182 |       '2': '2px',
183 |       '4': '4px',
184 |       '8': '8px',
185 |     },
186 |     boxShadow: {
187 |       xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
188 |       sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
189 |       default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
190 |       md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
191 |       lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
192 |       xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
193 |       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
194 |       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
195 |       outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
196 |       none: 'none',
197 |     },
198 |     container: {},
199 |     cursor: {
200 |       auto: 'auto',
201 |       default: 'default',
202 |       pointer: 'pointer',
203 |       wait: 'wait',
204 |       text: 'text',
205 |       move: 'move',
206 |       'not-allowed': 'not-allowed',
207 |     },
208 |     fill: {
209 |       current: 'currentColor',
210 |     },
211 |     flex: {
212 |       '1': '1 1 0%',
213 |       auto: '1 1 auto',
214 |       initial: '0 1 auto',
215 |       none: 'none',
216 |     },
217 |     flexGrow: {
218 |       '0': '0',
219 |       default: '1',
220 |     },
221 |     flexShrink: {
222 |       '0': '0',
223 |       default: '1',
224 |     },
225 |     fontFamily: {
226 |       sans: [
227 |         'system-ui',
228 |         '-apple-system',
229 |         'BlinkMacSystemFont',
230 |         '"Segoe UI"',
231 |         'Roboto',
232 |         '"Helvetica Neue"',
233 |         'Arial',
234 |         '"Noto Sans"',
235 |         'sans-serif',
236 |         '"Apple Color Emoji"',
237 |         '"Segoe UI Emoji"',
238 |         '"Segoe UI Symbol"',
239 |         '"Noto Color Emoji"',
240 |       ],
241 |       serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
242 |       mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
243 |     },
244 |     fontSize: {
245 |       xs: '0.75rem',
246 |       sm: '0.875rem',
247 |       base: '1rem',
248 |       lg: '1.125rem',
249 |       xl: '1.25rem',
250 |       '2xl': '1.5rem',
251 |       '3xl': '1.875rem',
252 |       '4xl': '2.25rem',
253 |       '5xl': '3rem',
254 |       '6xl': '4rem',
255 |     },
256 |     fontWeight: {
257 |       hairline: '100',
258 |       thin: '200',
259 |       light: '300',
260 |       normal: '400',
261 |       medium: '500',
262 |       semibold: '600',
263 |       bold: '700',
264 |       extrabold: '800',
265 |       black: '900',
266 |     },
267 |     height: theme => ({
268 |       auto: 'auto',
269 |       ...theme('spacing'),
270 |       full: '100%',
271 |       screen: '100vh',
272 |     }),
273 |     inset: {
274 |       '0': '0',
275 |       auto: 'auto',
276 |     },
277 |     letterSpacing: {
278 |       tighter: '-0.05em',
279 |       tight: '-0.025em',
280 |       normal: '0',
281 |       wide: '0.025em',
282 |       wider: '0.05em',
283 |       widest: '0.1em',
284 |     },
285 |     lineHeight: {
286 |       none: '1',
287 |       tight: '1.25',
288 |       snug: '1.375',
289 |       normal: '1.5',
290 |       relaxed: '1.625',
291 |       loose: '2',
292 |       '3': '.75rem',
293 |       '4': '1rem',
294 |       '5': '1.25rem',
295 |       '6': '1.5rem',
296 |       '7': '1.75rem',
297 |       '8': '2rem',
298 |       '9': '2.25rem',
299 |       '10': '2.5rem',
300 |     },
301 |     listStyleType: {
302 |       none: 'none',
303 |       disc: 'disc',
304 |       decimal: 'decimal',
305 |     },
306 |     margin: (theme, { negative }) => ({
307 |       auto: 'auto',
308 |       ...theme('spacing'),
309 |       ...negative(theme('spacing')),
310 |     }),
311 |     maxHeight: {
312 |       full: '100%',
313 |       screen: '100vh',
314 |     },
315 |     maxWidth: (theme, { breakpoints }) => ({
316 |       none: 'none',
317 |       xs: '20rem',
318 |       sm: '24rem',
319 |       md: '28rem',
320 |       lg: '32rem',
321 |       xl: '36rem',
322 |       '2xl': '42rem',
323 |       '3xl': '48rem',
324 |       '4xl': '56rem',
325 |       '5xl': '64rem',
326 |       '6xl': '72rem',
327 |       full: '100%',
328 |       ...breakpoints(theme('screens')),
329 |     }),
330 |     minHeight: {
331 |       '0': '0',
332 |       full: '100%',
333 |       screen: '100vh',
334 |     },
335 |     minWidth: {
336 |       '0': '0',
337 |       full: '100%',
338 |     },
339 |     objectPosition: {
340 |       bottom: 'bottom',
341 |       center: 'center',
342 |       left: 'left',
343 |       'left-bottom': 'left bottom',
344 |       'left-top': 'left top',
345 |       right: 'right',
346 |       'right-bottom': 'right bottom',
347 |       'right-top': 'right top',
348 |       top: 'top',
349 |     },
350 |     opacity: {
351 |       '0': '0',
352 |       '25': '0.25',
353 |       '50': '0.5',
354 |       '75': '0.75',
355 |       '100': '1',
356 |     },
357 |     order: {
358 |       first: '-9999',
359 |       last: '9999',
360 |       none: '0',
361 |       '1': '1',
362 |       '2': '2',
363 |       '3': '3',
364 |       '4': '4',
365 |       '5': '5',
366 |       '6': '6',
367 |       '7': '7',
368 |       '8': '8',
369 |       '9': '9',
370 |       '10': '10',
371 |       '11': '11',
372 |       '12': '12',
373 |     },
374 |     padding: theme => theme('spacing'),
375 |     placeholderColor: theme => theme('colors'),
376 |     stroke: {
377 |       current: 'currentColor',
378 |     },
379 |     strokeWidth: {
380 |       '0': '0',
381 |       '1': '1',
382 |       '2': '2',
383 |     },
384 |     textColor: theme => theme('colors'),
385 |     width: theme => ({
386 |       auto: 'auto',
387 |       ...theme('spacing'),
388 |       '1/2': '50%',
389 |       '1/3': '33.333333%',
390 |       '2/3': '66.666667%',
391 |       '1/4': '25%',
392 |       '2/4': '50%',
393 |       '3/4': '75%',
394 |       '1/5': '20%',
395 |       '2/5': '40%',
396 |       '3/5': '60%',
397 |       '4/5': '80%',
398 |       '1/6': '16.666667%',
399 |       '2/6': '33.333333%',
400 |       '3/6': '50%',
401 |       '4/6': '66.666667%',
402 |       '5/6': '83.333333%',
403 |       '1/12': '8.333333%',
404 |       '2/12': '16.666667%',
405 |       '3/12': '25%',
406 |       '4/12': '33.333333%',
407 |       '5/12': '41.666667%',
408 |       '6/12': '50%',
409 |       '7/12': '58.333333%',
410 |       '8/12': '66.666667%',
411 |       '9/12': '75%',
412 |       '10/12': '83.333333%',
413 |       '11/12': '91.666667%',
414 |       full: '100%',
415 |       screen: '100vw',
416 |     }),
417 |     zIndex: {
418 |       auto: 'auto',
419 |       '0': '0',
420 |       '10': '10',
421 |       '20': '20',
422 |       '30': '30',
423 |       '40': '40',
424 |       '50': '50',
425 |     },
426 |     gap: theme => theme('spacing'),
427 |     gridTemplateColumns: {
428 |       none: 'none',
429 |       '1': 'repeat(1, minmax(0, 1fr))',
430 |       '2': 'repeat(2, minmax(0, 1fr))',
431 |       '3': 'repeat(3, minmax(0, 1fr))',
432 |       '4': 'repeat(4, minmax(0, 1fr))',
433 |       '5': 'repeat(5, minmax(0, 1fr))',
434 |       '6': 'repeat(6, minmax(0, 1fr))',
435 |       '7': 'repeat(7, minmax(0, 1fr))',
436 |       '8': 'repeat(8, minmax(0, 1fr))',
437 |       '9': 'repeat(9, minmax(0, 1fr))',
438 |       '10': 'repeat(10, minmax(0, 1fr))',
439 |       '11': 'repeat(11, minmax(0, 1fr))',
440 |       '12': 'repeat(12, minmax(0, 1fr))',
441 |     },
442 |     gridColumn: {
443 |       auto: 'auto',
444 |       'span-1': 'span 1 / span 1',
445 |       'span-2': 'span 2 / span 2',
446 |       'span-3': 'span 3 / span 3',
447 |       'span-4': 'span 4 / span 4',
448 |       'span-5': 'span 5 / span 5',
449 |       'span-6': 'span 6 / span 6',
450 |       'span-7': 'span 7 / span 7',
451 |       'span-8': 'span 8 / span 8',
452 |       'span-9': 'span 9 / span 9',
453 |       'span-10': 'span 10 / span 10',
454 |       'span-11': 'span 11 / span 11',
455 |       'span-12': 'span 12 / span 12',
456 |     },
457 |     gridColumnStart: {
458 |       auto: 'auto',
459 |       '1': '1',
460 |       '2': '2',
461 |       '3': '3',
462 |       '4': '4',
463 |       '5': '5',
464 |       '6': '6',
465 |       '7': '7',
466 |       '8': '8',
467 |       '9': '9',
468 |       '10': '10',
469 |       '11': '11',
470 |       '12': '12',
471 |       '13': '13',
472 |     },
473 |     gridColumnEnd: {
474 |       auto: 'auto',
475 |       '1': '1',
476 |       '2': '2',
477 |       '3': '3',
478 |       '4': '4',
479 |       '5': '5',
480 |       '6': '6',
481 |       '7': '7',
482 |       '8': '8',
483 |       '9': '9',
484 |       '10': '10',
485 |       '11': '11',
486 |       '12': '12',
487 |       '13': '13',
488 |     },
489 |     gridTemplateRows: {
490 |       none: 'none',
491 |       '1': 'repeat(1, minmax(0, 1fr))',
492 |       '2': 'repeat(2, minmax(0, 1fr))',
493 |       '3': 'repeat(3, minmax(0, 1fr))',
494 |       '4': 'repeat(4, minmax(0, 1fr))',
495 |       '5': 'repeat(5, minmax(0, 1fr))',
496 |       '6': 'repeat(6, minmax(0, 1fr))',
497 |     },
498 |     gridRow: {
499 |       auto: 'auto',
500 |       'span-1': 'span 1 / span 1',
501 |       'span-2': 'span 2 / span 2',
502 |       'span-3': 'span 3 / span 3',
503 |       'span-4': 'span 4 / span 4',
504 |       'span-5': 'span 5 / span 5',
505 |       'span-6': 'span 6 / span 6',
506 |     },
507 |     gridRowStart: {
508 |       auto: 'auto',
509 |       '1': '1',
510 |       '2': '2',
511 |       '3': '3',
512 |       '4': '4',
513 |       '5': '5',
514 |       '6': '6',
515 |       '7': '7',
516 |     },
517 |     gridRowEnd: {
518 |       auto: 'auto',
519 |       '1': '1',
520 |       '2': '2',
521 |       '3': '3',
522 |       '4': '4',
523 |       '5': '5',
524 |       '6': '6',
525 |       '7': '7',
526 |     },
527 |     transformOrigin: {
528 |       center: 'center',
529 |       top: 'top',
530 |       'top-right': 'top right',
531 |       right: 'right',
532 |       'bottom-right': 'bottom right',
533 |       bottom: 'bottom',
534 |       'bottom-left': 'bottom left',
535 |       left: 'left',
536 |       'top-left': 'top left',
537 |     },
538 |     scale: {
539 |       '0': '0',
540 |       '50': '.5',
541 |       '75': '.75',
542 |       '90': '.9',
543 |       '95': '.95',
544 |       '100': '1',
545 |       '105': '1.05',
546 |       '110': '1.1',
547 |       '125': '1.25',
548 |       '150': '1.5',
549 |     },
550 |     rotate: {
551 |       '-180': '-180deg',
552 |       '-90': '-90deg',
553 |       '-45': '-45deg',
554 |       '0': '0',
555 |       '45': '45deg',
556 |       '90': '90deg',
557 |       '180': '180deg',
558 |     },
559 |     translate: (theme, { negative }) => ({
560 |       ...theme('spacing'),
561 |       ...negative(theme('spacing')),
562 |       '-full': '-100%',
563 |       '-1/2': '-50%',
564 |       '1/2': '50%',
565 |       full: '100%',
566 |     }),
567 |     skew: {
568 |       '-12': '-12deg',
569 |       '-6': '-6deg',
570 |       '-3': '-3deg',
571 |       '0': '0',
572 |       '3': '3deg',
573 |       '6': '6deg',
574 |       '12': '12deg',
575 |     },
576 |     transitionProperty: {
577 |       none: 'none',
578 |       all: 'all',
579 |       default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
580 |       colors: 'background-color, border-color, color, fill, stroke',
581 |       opacity: 'opacity',
582 |       shadow: 'box-shadow',
583 |       transform: 'transform',
584 |     },
585 |     transitionTimingFunction: {
586 |       linear: 'linear',
587 |       in: 'cubic-bezier(0.4, 0, 1, 1)',
588 |       out: 'cubic-bezier(0, 0, 0.2, 1)',
589 |       'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
590 |     },
591 |     transitionDuration: {
592 |       '75': '75ms',
593 |       '100': '100ms',
594 |       '150': '150ms',
595 |       '200': '200ms',
596 |       '300': '300ms',
597 |       '500': '500ms',
598 |       '700': '700ms',
599 |       '1000': '1000ms',
600 |     },
601 |   },
602 |   variants: {
603 |     accessibility: ['responsive', 'focus'],
604 |     alignContent: ['responsive'],
605 |     alignItems: ['responsive'],
606 |     alignSelf: ['responsive'],
607 |     appearance: ['responsive'],
608 |     backgroundAttachment: ['responsive'],
609 |     backgroundColor: ['responsive', 'hover', 'focus'],
610 |     backgroundPosition: ['responsive'],
611 |     backgroundRepeat: ['responsive'],
612 |     backgroundSize: ['responsive'],
613 |     borderCollapse: ['responsive'],
614 |     borderColor: ['responsive', 'hover', 'focus'],
615 |     borderRadius: ['responsive'],
616 |     borderStyle: ['responsive'],
617 |     borderWidth: ['responsive'],
618 |     boxShadow: ['responsive', 'hover', 'focus'],
619 |     boxSizing: ['responsive'],
620 |     cursor: ['responsive'],
621 |     display: ['responsive'],
622 |     fill: ['responsive'],
623 |     flex: ['responsive'],
624 |     flexDirection: ['responsive'],
625 |     flexGrow: ['responsive'],
626 |     flexShrink: ['responsive'],
627 |     flexWrap: ['responsive'],
628 |     float: ['responsive'],
629 |     clear: ['responsive'],
630 |     fontFamily: ['responsive'],
631 |     fontSize: ['responsive'],
632 |     fontSmoothing: ['responsive'],
633 |     fontStyle: ['responsive'],
634 |     fontWeight: ['responsive', 'hover', 'focus'],
635 |     height: ['responsive'],
636 |     inset: ['responsive'],
637 |     justifyContent: ['responsive'],
638 |     letterSpacing: ['responsive'],
639 |     lineHeight: ['responsive'],
640 |     listStylePosition: ['responsive'],
641 |     listStyleType: ['responsive'],
642 |     margin: ['responsive'],
643 |     maxHeight: ['responsive'],
644 |     maxWidth: ['responsive'],
645 |     minHeight: ['responsive'],
646 |     minWidth: ['responsive'],
647 |     objectFit: ['responsive'],
648 |     objectPosition: ['responsive'],
649 |     opacity: ['responsive', 'hover', 'focus'],
650 |     order: ['responsive'],
651 |     outline: ['responsive', 'focus'],
652 |     overflow: ['responsive'],
653 |     padding: ['responsive'],
654 |     placeholderColor: ['responsive', 'focus'],
655 |     pointerEvents: ['responsive'],
656 |     position: ['responsive'],
657 |     resize: ['responsive'],
658 |     stroke: ['responsive'],
659 |     strokeWidth: ['responsive'],
660 |     tableLayout: ['responsive'],
661 |     textAlign: ['responsive'],
662 |     textColor: ['responsive', 'hover', 'focus'],
663 |     textDecoration: ['responsive', 'hover', 'focus'],
664 |     textTransform: ['responsive'],
665 |     userSelect: ['responsive'],
666 |     verticalAlign: ['responsive'],
667 |     visibility: ['responsive'],
668 |     whitespace: ['responsive'],
669 |     width: ['responsive'],
670 |     wordBreak: ['responsive'],
671 |     zIndex: ['responsive'],
672 |     gap: ['responsive'],
673 |     gridAutoFlow: ['responsive'],
674 |     gridTemplateColumns: ['responsive'],
675 |     gridColumn: ['responsive'],
676 |     gridColumnStart: ['responsive'],
677 |     gridColumnEnd: ['responsive'],
678 |     gridTemplateRows: ['responsive'],
679 |     gridRow: ['responsive'],
680 |     gridRowStart: ['responsive'],
681 |     gridRowEnd: ['responsive'],
682 |     transform: ['responsive'],
683 |     transformOrigin: ['responsive'],
684 |     scale: ['responsive', 'hover', 'focus'],
685 |     rotate: ['responsive', 'hover', 'focus'],
686 |     translate: ['responsive', 'hover', 'focus'],
687 |     skew: ['responsive', 'hover', 'focus'],
688 |     transitionProperty: ['responsive'],
689 |     transitionTimingFunction: ['responsive'],
690 |     transitionDuration: ['responsive'],
691 |   },
692 |   corePlugins: {},
693 |   plugins: [],
694 | }
695 | 


--------------------------------------------------------------------------------