ts-nextjs-tailwind-starter
theodorusclarence.com
ts-nextjs-tailwind-starter | theodorusclarence.com | |
---|---|---|
5 | 6 | |
2,662 | 622 | |
- | - | |
7.5 | 8.1 | |
5 days ago | 11 days ago | |
TypeScript | MDX | |
- | GNU General Public License v3.0 only |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
ts-nextjs-tailwind-starter
- I Remake My Personal Site using Tailwind CSS
-
react-native issues.
What I'm thinking is its a TypeScript issue. Or something with compatibility. Here is the code I'm basing my website off of: https://github.com/theodorusclarence/ts-nextjs-tailwind-starter
-
One-stop Starter to Maximize Efficiency on Next.js & Tailwind CSS Projects
I made the ts-nextjs-tailwind-starter after I got tired of setting up a new project and have to initialize Tailwind CSS every single time. After some months, this starter has grown and is filled with a lot of development automation and tools that help me when I'm developing.
-
Step by step: How to setup Storybook with Next.js and Tailwind CSS
Check out the ts-nextjs-tailwind-starter!
- Next.js + Tailwind CSS + TypeScript Starter Template
theodorusclarence.com
- I Remake My Personal Site using Tailwind CSS
-
7 Powerful Mac Applications that You Must Install
If you are questioning what is raynaldo.me Quicklinks is, here is the answer. My brother, Thedorus Clarence created a Next.js project called notiolink, so we can create short links in notion. If you are interested, you can install it by yourself. I will give some demo videos below.
-
React Loading State Pattern using Toast & SWR
It is open source if you want to check the source code
-
How to show Now Playing in Spotify with Next.js
On my personal website, I use Spotify API to show what song is currently playing. Now, I will try to explain on how do I do that.
-
Next.js + Tailwind CSS + TypeScript Starter Template
// src/components/Seo.tsx import Head from 'next/head'; import { useRouter } from 'next/router'; const defaultMeta = { title: 'Next.js Tailwind Starter', site_name: 'Next.js Tailwind Starter', description: 'A template for Next.js and Tailwindcss by Theodorus Clarence', url: 'https://theodorusclarence.com', image: 'https://theodorusclarence.com/favicon/large-og.jpg', type: 'website', robots: 'follow, index', }; type SeoProps = { date?: string; templateTitle?: string; } & Partial; export default function Seo(props: SeoProps) { const router = useRouter(); const meta = { ...defaultMeta, ...props, }; meta['title'] = props.templateTitle ? `${props.templateTitle} | ${meta.site_name}` : meta.title; return ( {meta.title}title> <meta name='robots' content={meta.robots} /> <meta content={meta.description} name='description' /> <meta property='og:url' content={`${meta.url}${router.asPath}`} /> <link rel='canonical' href={`${meta.url}${router.asPath}`} /> {/* Open Graph */} <meta property='og:type' content={meta.type} /> <meta property='og:site_name' content={meta.site_name} /> <meta property='og:description' content={meta.description} /> <meta property='og:title' content={meta.title} /> <meta name='image' property='og:image' content={meta.image} /> {/* Twitter */} <meta name='twitter:card' content='summary_large_image' /> <meta name='twitter:site' content='@th_clarence' /> <meta name='twitter:title' content={meta.title} /> <meta name='twitter:description' content={meta.description} /> <meta name='twitter:image' content={meta.image} /> {meta.date && ( <> <meta property='article:published_time' content={meta.date} /> <meta name='publish_date' property='og:publish_date' content={meta.date} /> <meta name='author' property='article:author' content='Theodorus Clarence' /> </> )} Head> ); }
-
Styling Best Practices I Use With Tailwindcss
Notice the use of space between to reduce class too. The code example is taken from this website and available on github. Kindly star it if it helps!
What are some alternatives?
Next-js-Boilerplate - 🚀🎉📚 Boilerplate and Starter for Next.js 14+ with App Router and Page Router support, Tailwind CSS 3.4 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Storybook + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS
LiveTerm - 💻 Build terminal styled websites in minutes!
Next-JS-Landing-Page-Starter-Template - 🚀 Free NextJS Landing Page Template written in Tailwind CSS 3 and TypeScript ⚡️ Made with developer experience first: Next.js 14 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS
maxpetretta.com - My personal website, built using Next.js, Tailwind CSS, and MDX. Deployed on Vercel.
angular-boilerplate - Straightforward Angular starter
iTerm2 - iTerm2 is a terminal emulator for Mac OS X that does amazing things.
next-typescript-tailwind-mdx-starter - Opinionated Next.js Starter with TypeScript, Tailwind, MDX, and decent SEO
personal-site - Portfolio and blog made with Next.js and JAMStack.
kirby-boilerplate - This is an opiniated boilerplate with rocking tools for front-end development
leerob.io - ✨ My portfolio built with Next.js, Tailwind, and Vercel.
salvia-kit - Provides 10 Free Beautiful dashboard templates built with Tailwind CSS for React, Next.js, Svelte, Solid, Angular, Vue and Nuxt.js
Dozer - Hide menu bar icons on macOS