{"html":"\n

\n \n 29th June 2019\n \n\n \n

\n Next.js crash course by KhateykoBan\n

\n \n Snippet\n \n\n \n JavaScript\n \n

\n","css":".mt-0\\.5 {\n margin-top: 0.125rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.block {\n display: block;\n}\n.flex {\n display: flex;\n}\n.w-60 {\n width: 15rem;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-\\[10px\\] {\n border-radius: 10px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.bg-purple-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(243 232 255 / var(--tw-bg-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n.from-green-300 {\n --tw-gradient-from: #86efac var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n}\n.via-blue-500 {\n --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from),\n #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);\n}\n.to-purple-600 {\n --tw-gradient-to: #9333ea var(--tw-gradient-to-position);\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.px-2\\.5 {\n padding-left: 0.625rem;\n padding-right: 0.625rem;\n}\n.py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.\\!pt-20 {\n padding-top: 5rem !important;\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.text-gray-500 {\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.text-purple-600 {\n --tw-text-opacity: 1;\n color: rgb(147 51 234 / var(--tw-text-opacity));\n}\n.shadow-xl {\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),\n 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),\n 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, fill, stroke,\n opacity, box-shadow, transform, filter, -webkit-text-decoration-color,\n -webkit-backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,\n backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.hover\\:bg-\\[length\\:400\\%_400\\%\\]:hover {\n background-size: 400% 400%;\n}\n.hover\\:shadow-sm:hover {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.hover\\:\\[animation-duration\\:_4s\\]:hover {\n animation-duration: 4s;\n}\n@media (min-width: 640px) {\n .sm\\:p-6 {\n padding: 1.5rem;\n }\n}\n"}

smooth-quail-65

👁 实时预览

📝 源代码