├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── elon.jpg
    ├── favicon.ico
    ├── index.html
    ├── kevin.jpg
    ├── monk.jpg
    └── profile.png
├── src
    ├── App.vue
    ├── assets
    │   └── styles
    │   │   └── index.css
    ├── components
    │   └── HelloWorld.vue
    └── main.js
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nodeal
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nodeal",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@tailwindcss/ui": "^0.1.3",
12 |     "core-js": "^2.6.5",
13 |     "tailwindcss": "^1.2.0",
14 |     "vue": "^2.6.10",
15 |     "vue-router": "^3.1.6"
16 |   },
17 |   "devDependencies": {
18 |     "@fullhuman/postcss-purgecss": "^2.1.0",
19 |     "@vue/cli-plugin-babel": "^3.12.0",
20 |     "@vue/cli-plugin-eslint": "^3.12.0",
21 |     "@vue/cli-service": "^3.12.0",
22 |     "babel-eslint": "^10.0.1",
23 |     "eslint": "^5.16.0",
24 |     "eslint-plugin-vue": "^5.0.0",
25 |     "vue-template-compiler": "^2.6.10"
26 |   },
27 |   "eslintConfig": {
28 |     "root": true,
29 |     "env": {
30 |       "node": true
31 |     },
32 |     "extends": [
33 |       "plugin:vue/essential",
34 |       "eslint:recommended"
35 |     ],
36 |     "rules": {},
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     }
40 |   },
41 |   "browserslist": [
42 |     "> 1%",
43 |     "last 2 versions"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const purgecss = require('@fullhuman/postcss-purgecss')({
 2 |   // Specify the paths to all of the template files in your project
 3 |   content: [
 4 |     './src/**/*.html',
 5 |     './src/**/*.vue',
 6 |     './src/**/*.jsx',
 7 |     // etc.
 8 |   ],
 9 |   // Include any special characters you're using in this regular expression
10 |   defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
11 | });
12 | 
13 | module.exports = {
14 |   plugins: [
15 |     require('tailwindcss'),
16 |     require('autoprefixer'),
17 |     ...process.env.NODE_ENV == 'production'
18 |       ? [purgecss]
19 |       : []
20 |   ]
21 | };
22 | 


--------------------------------------------------------------------------------
/public/elon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephDietz/twitter-clone/30fd31b5bf7bccb16f26dbfd6138591241d2177d/public/elon.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephDietz/twitter-clone/30fd31b5bf7bccb16f26dbfd6138591241d2177d/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>twitter</title>
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
10 |     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but nodeal doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/public/kevin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephDietz/twitter-clone/30fd31b5bf7bccb16f26dbfd6138591241d2177d/public/kevin.jpg


--------------------------------------------------------------------------------
/public/monk.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephDietz/twitter-clone/30fd31b5bf7bccb16f26dbfd6138591241d2177d/public/monk.jpg


--------------------------------------------------------------------------------
/public/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StephDietz/twitter-clone/30fd31b5bf7bccb16f26dbfd6138591241d2177d/public/profile.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app" class="flex container h-screen w-full">
  3 |     <!-- side nav -->
  4 |     <div class="lg:w-1/5 border-r border-lighter px-2 lg:px-6 py-2 flex flex-col justify-between">
  5 |       <div>
  6 |         <button class="h-12 w-12 hover:bg-lightblue text-3xl rounded-full text-blue">
  7 |           <i class="fab fa-twitter"></i>
  8 |         </button>
  9 |         <div>
 10 |           <button v-for="tab in tabs" @click="id = tab.id" :class="`focus:outline-none hover:text-blue flex items-center py-2 px-4 hover:bg-lightblue rounded-full mr-auto mb-3 ${ id === tab.id ? 'text-blue' : ''}`">
 11 |             <i :class="`${ tab.icon } text-2xl mr-4 text-left`"></i>
 12 |             <p class="text-lg font-semibold text-left hidden lg:block"> {{ tab.title }} </p>
 13 |           </button>
 14 |         </div>
 15 |         <button class="text-white bg-blue rounded-full font-semibold focus:outline-none w-12 h-12 lg:h-auto lg:w-full p-3 hover:bg-darkblue">
 16 |           <p class="hidden lg:block">Tweet</p>
 17 |           <i class="fas fa-plus lg:hidden"></i>
 18 |         </button>
 19 |       </div>
 20 |       <div class="lg:w-full relative">
 21 |         <button @click="dropdown = true" class="flex items-center w-full hover:bg-lightblue rounded-full p-2 focus:outline-none">
 22 |           <img src="profile.png" class="w-10 h-10 rounded-full border border-lighter" />
 23 |           <div class="hidden lg:block ml-4">
 24 |             <p class="text-sm font-bold leading-tight"> Steph Dietz </p>
 25 |             <p class="text-sm leading-tight"> @SaaSyEth </p>
 26 |           </div>
 27 |           <i class="hidden lg:block fas fa-angle-down ml-auto text-lg"></i>
 28 |         </button>
 29 |         <div v-if="dropdown === true" class="absolute bottom-0 left-0 w-64 rounded-lg shadow-md border-lightest bg-white mb-16">
 30 |           <button @click="dropdown = false" class="p-3 flex items-center w-full hover:bg-lightest p-2 focus:outline-none">
 31 |             <img src="profile.png" class="w-10 h-10 rounded-full border border-lighter" />
 32 |             <div class="ml-4">
 33 |               <p class="text-sm font-bold leading-tight"> Steph Dietz </p>
 34 |               <p class="text-sm leading-tight"> @SaaSyEth </p>
 35 |             </div>
 36 |             <i class="fas fa-check ml-auto test-blue"></i>
 37 |           </button>
 38 |           <button @click="dropdown = false" class="w-full text-left hover:bg-lightest border-t border-lighter p-3 test-sm focus:outline-none">
 39 |             Add an existing account
 40 |           </button>
 41 |           <button @click="dropdown = false" class="w-full text-left hover:bg-lightest border-t border-lighter p-3 test-sm focus:outline-none">
 42 |             Log out @SaaSyEth
 43 |           </button>
 44 |         </div>
 45 |       </div>
 46 |     </div>
 47 |     <!-- tweets -->
 48 |     <div class="w-full md:w-1/2 h-full overflow-y-scroll">
 49 |       <div class="px-5 py-3 border-b border-lighter flex items-center justify-between">
 50 |         <h1 class="text-xl font-bold">Home</h1>
 51 |         <i class="far fa-star text-xl text-blue"></i>
 52 |       </div>
 53 |       <div class="px-5 py-3 border-b-8 border-lighter flex">
 54 |         <div class="flex-none">
 55 |           <img src="profile.png" class="flex-none w-12 h-12 rounded-full border border-lighter"/>
 56 |         </div>
 57 |         <form v-on:submit.prevent = "addNewTweet" class="w-full px-4 relative">
 58 |           <textarea v-model="tweet.content" placeholder="What's up?" class="mt-3 pb-3 w-full focus:outline-none"/>
 59 |           <div class="flex items-center">
 60 |             <i class="text-lg text-blue mr-4 far fa-image"></i>
 61 |             <i class="text-lg text-blue mr-4 fas fa-film"></i>
 62 |             <i class="text-lg text-blue mr-4 far fa-chart-bar"></i>
 63 |             <i class="text-lg text-blue mr-4 far fa-smile"></i>
 64 |           </div>
 65 |           <button type="submit" class="h-10 px-4 text-white font-semibold bg-blue hover:bg-darkblue focus:outline-none rounded-full absolute bottom-0 right-0">
 66 |             Tweet
 67 |           </button>
 68 |         </form>
 69 |       </div>
 70 |       <div class="flex flex-col-reverse">
 71 |         <div v-for="tweet in tweets" class="w-full p-4 border-b hover:bg-lighter flex">
 72 |           <div class="flex-none mr-4">
 73 |             <img src="profile.png" class="h-12 w-12 rounded-full flex-none"/>
 74 |           </div>
 75 |           <div class="w-full">
 76 |             <div class="flex items-center w-full">
 77 |               <p class="font-semibold"> Steph Dietz </p>
 78 |               <p class="text-sm text-dark ml-2"> @SaaSyEth </p>
 79 |               <p class="text-sm text-dark ml-2"> 1 sec </p>
 80 |               <i class="fas fa-angle-down text-dark ml-auto"></i>
 81 |             </div>
 82 |             <p class="py-2">
 83 |               {{ tweet.content }}
 84 |             </p>
 85 |             <div class="flex items-center justify-between w-full">
 86 |               <div class="flex items-center text-sm text-dark">
 87 |                 <i class="far fa-comment mr-3"></i>
 88 |                 <p> 0 </p>
 89 |               </div>
 90 |               <div class="flex items-center text-sm text-dark">
 91 |                 <i class="fas fa-retweet mr-3"></i>
 92 |                 <p> 0 </p>
 93 |               </div>
 94 |               <div class="flex items-center text-sm text-dark">
 95 |                 <i class="fas fa-heart mr-3"></i>
 96 |                 <p> 1 </p>
 97 |               </div>
 98 |               <div class="flex items-center text-sm text-dark">
 99 |                 <i class="fas fa-share-square mr-3"></i>
100 |               </div>
101 |             </div>
102 |           </div>
103 |         </div>
104 |       </div>
105 |       <div v-for="follow in following" class="w-full p-4 border-b hover:bg-lighter flex">
106 |         <div class="flex-none mr-4">
107 |           <img :src="`${follow.src}`" class="h-12 w-12 rounded-full flex-none"/>
108 |         </div>
109 |         <div class="w-full">
110 |           <div class="flex items-center w-full">
111 |             <p class="font-semibold"> {{ follow.name }} </p>
112 |             <p class="text-sm text-dark ml-2"> {{ follow.handle }} </p>
113 |             <p class="text-sm text-dark ml-2"> {{ follow.time }} </p>
114 |             <i class="fas fa-angle-down text-dark ml-auto"></i>
115 |           </div>
116 |           <p class="py-2">
117 |             {{ follow.tweet }}
118 |           </p>
119 |           <div class="flex items-center justify-between w-full">
120 |             <div class="flex items-center text-sm text-dark">
121 |               <i class="far fa-comment mr-3"></i>
122 |               <p> {{ follow.comments }} </p>
123 |             </div>
124 |             <div class="flex items-center text-sm text-dark">
125 |               <i class="fas fa-retweet mr-3"></i>
126 |               <p> {{ follow.retweets }} </p>
127 |             </div>
128 |             <div class="flex items-center text-sm text-dark">
129 |               <i class="fas fa-heart mr-3"></i>
130 |               <p> {{ follow.like }} </p>
131 |             </div>
132 |             <div class="flex items-center text-sm text-dark">
133 |               <i class="fas fa-share-square mr-3"></i>
134 |             </div>
135 |           </div>
136 |         </div>
137 |       </div>
138 |     </div>
139 |     <!-- trending -->
140 |     <div class="md:block hidden w-1/3 h-full border-l border-lighter py-2 px-6 overflow-y-scroll relative">
141 |       <input class="pl-12 rounded-full w-full p-2 bg-lighter text-sm mb-4" placeholder="Search Twitter" />
142 |       <i class="fas fa-search absolute left-0 top-0 mt-5 ml-12 text-sm text-light"></i>
143 |       <div class="w-full rounded-lg bg-lightest">
144 |         <div class="flex items-center justify-between p-3">
145 |           <p class="text-lg font-bold">Trends for You</p>
146 |           <i class="fas fa-cog text-lg text-blue"></i>
147 |         </div>
148 |         <button v-for="trend in trending" class="w-full flex justify-between hover:bg-lighter p-3 border-t border-lighter">
149 |           <div>
150 |             <p class="text-xs text-left leading-tight text-dark"> {{ trend.top}} </p>
151 |             <p class="font-semibold text-sm text-left leading-tight"> {{ trend.title}} </p>
152 |             <p class="text-left text-sm leading-tight text-dark"> {{ trend.bottom}} </p>
153 |           </div>
154 |           <i class="fas fa-angle-down text-lg text-dark"></i>
155 |         </button>
156 |         <button class="p-3 w-full hover:bg-lighter text-left text-blue border-t border-lighter">
157 |           Show More
158 |         </button>
159 |       </div>
160 |       <div class="w-full rounded-lg bg-lightest my-4">
161 |         <div class=" p-3">
162 |           <p class="text-lg font-bold">Who to Follow</p>
163 |         </div>
164 |         <button v-for="friend in friends" class="w-full flex hover:bg-lighter p-3 border-t border-lighter">
165 |           <img :src="`${ friend.src }`" class="w-12 h-12 rounded-full border border-lighter" />
166 |           <div class="hidden lg:block ml-4">
167 |             <p class="text-sm font-bold leading-tight"> {{ friend.name }} </p>
168 |             <p class="text-sm leading-tight"> {{ friend.handle }} </p>
169 |           </div>
170 |           <button class="ml-auto text-sm text-blue py-1 px-4 rounded-full border-2 border-blue">
171 |             Follow
172 |           </button>
173 |         </button>
174 |         <button class="p-3 w-full hover:bg-lighter text-left text-blue border-t border-lighter">
175 |           Show More
176 |         </button>
177 |       </div>
178 |     </div>
179 |   </div>
180 | </template>
181 | 
182 | <script>
183 | 
184 | export default {
185 |   name: 'app',
186 |   components: {
187 |   },
188 |   data() {
189 |     return {
190 |       tabs: [
191 |         {icon: 'fas fa-home', title: 'Home', id:'home'},
192 |         {icon: 'fas fa-hashtag', title: 'Explore', id: 'explore'},
193 |         {icon: 'far fa-bell', title: 'Notifications', id: 'notifications'},
194 |         {icon: 'far fa-envelope', title: 'Messages', id: 'messages'},
195 |         {icon: 'far fa-bookmark', title: 'Bookmarks', id: 'bookmarks'},
196 |         {icon: 'fas fa-clipboard-list', title: 'Lists', id: 'lists'},
197 |         {icon: 'far fa-user', title: 'Profile', id: 'profile'},
198 |         {icon: 'fas fa-ellipsis-h', title: 'More', id: 'more'}
199 |       ],
200 |       id: 'home',
201 |       dropdown: false,
202 |       trending: [
203 |         {top: 'Trending in TX', title: 'Gigi', bottom: 'Trending with: Rip Gigi'},
204 |         {top: 'Music', title: 'We Won', bottom: '135K Tweets'},
205 |         {top: 'Pop', title: 'Blue Ivy', bottom: '40k tweets'},
206 |         {top: 'Trending in US', title: 'Denim Day', bottom: '40k tweets'},
207 |         {top: 'Trending', title: 'When Beyonce', bottom: '25.4k tweets'},
208 |       ],
209 |       friends: [
210 |         {src: 'elon.jpg', name: 'Elon Musk', handle: '@teslaBoy'},
211 |         {src: 'monk.jpg', name: 'Adrian Monk', handle: '@detective:)'},
212 |         {src: 'kevin.jpg', name: 'Kevin Hart', handle: '@miniRock'}
213 |       ],
214 |       following: [
215 |         {src: 'elon.jpg', name: 'Elon Musk', handle: '@teslaBoy', time: '20 min', tweet: 'Should I just quarantine on mars??', comments: '1,000', retweets: '550', like: '1,000,003'},
216 |         {src: 'kevin.jpg', name: 'Kevin Hart', handle: '@miniRock', time: '55 min', tweet: 'Should me and the rock do another sub-par movie together????', comments: '2,030', retweets: '50', like: '20,003'},
217 |         {src: 'elon.jpg', name: 'Elon Musk', handle: '@teslaBoy', time: '1.4 hr', tweet: 'Haha just made a flame thrower. Shld I sell them?', comments: '100,000', retweets: '1,000,002', like: '5,000,003'},
218 |         {src: 'elon.jpg', name: 'Elon Musk', handle: '@teslaBoy', time: '1.4 hr', tweet: 'Just did something crazyyyyyyy', comments: '100,500', retweets: '1,000,032', like: '5,000,103'}
219 |       ],
220 |       tweets: [
221 |         {content: 'It is so nice outside!'}
222 |       ],
223 |       tweet: {content: ''}
224 |     }
225 |   },
226 |   methods: {
227 |     addNewTweet () {
228 |       let newTweet = {
229 |         content: this.tweet.content
230 |       };
231 |       this.tweets.push (newTweet)
232 |     }
233 |   }
234 | }
235 | </script>
236 | 


--------------------------------------------------------------------------------
/src/assets/styles/index.css:
--------------------------------------------------------------------------------
1 | /* purgecss start ignore */
2 | @tailwind  base;
3 | @tailwind  components;
4 | /* purgecss end ignore */
5 | 
6 | @tailwind  utilities;
7 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | import App from './App.vue';
 4 | 
 5 | import './assets/styles/index.css';
 6 | 
 7 | Vue.config.productionTip = true;
 8 | 
 9 | Vue.use(VueRouter);
10 | 
11 | const router = new VueRouter({
12 |   routes: [
13 |     // { path: '/page', component: App },
14 |   ],
15 | });
16 | 
17 | new Vue({
18 |   render: h => h(App),
19 |   router
20 | }).$mount('#app');
21 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme');
 2 | 
 3 | module.exports = {
 4 |   theme: {
 5 |     container: {
 6 |       center: true
 7 |     },
 8 |     extend: {
 9 |       fontFamily: {
10 |         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
11 |       },
12 |       colors: {
13 |         'blue': '#1DA1F2',
14 |         'darkblue': '#2795D9',
15 |         'lightblue': '#EFF9FF',
16 |         'dark': '#657786',
17 |         'light': '#AAB8C2',
18 |         'lighter': '#E1E8ED',
19 |         'lightest': '#F5F8FA',
20 |       }
21 |     },
22 |   },
23 |   plugins: [
24 |     require('@tailwindcss/ui'),
25 |   ]
26 | };
27 | 


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