Welcome to mdnext-tailwind
Coming with a base understanding of the NextJS opinions and documentation, will give you a solid grasp on the structure of our templates.
— jsconfig.js
NextJS lets us configure absolute paths for our app. We use this to easily import all of our functions and utilities inside of our src directory
— pages
The pages directory defines your routing. Lifecycle methods like getStaticProps / getStaticPaths / getServerProps are available at the page level. This is where we consume our MDX content as data to pass to our components.
_app.js:
NextJS allows you to override the App component, which is used to initialize pages. More here
_document.js:
Allows you to augment our application's <html> and <body> tags.
all-data/index.js:
This page is an example of displaying links to all of your individual MDX data pages. Here we use getStaticProps to feed the frontmatter of our MDX files for our components.
data/[slug].js:
Here we utilize NextJS dynamic routing. By using getStaticPaths we're able to feed a dynamic slug, handling all of the logic once and applying it to each MDX data that we load. This allows us to then match to our data in getStaticProps and display that to the page and our components.
index.js:
Our page at the root of our app, lives inside of the pages directories index.js.
— src
Our src directory holds all of our client code. Our components, custom hooks, utility functions, and our MDX files all live here, with the first three available for absolute path imports 👍
— next.config.js
For custom configuration around things like environment variables, webpack, pageExtensions, and many more, you can utilize next.config.js
This template uses the utility-first CSS framework Tailwind for styling. Take a look at the following files to get started.
— tailwind.config.js
Blank Tailwind configuration with the purge option to remove unused CSS in production, thus keeping the resulting CSS file small, and theme.extend.colors to add a custom color palette.
— postcss.config.js
PostCSS configuration file. Other than Tailwind, it uses Next.js's default PostCSS configuration.
— src/tailwind.css
CSS file containing the @tailwind directive. It also contains examples of Tailwind's @apply directive and custom styles. You can rename and move it as you wish, but make sure you adjust the import path in pages/_app.js.
You can see examples of Tailwind CSS in action in these component files, src/components/ContentBox.js and src/components/Navbar.js.
- Tailwind Documentation
- Configuration
- Customizing Colors
- Directives (
@tailwind,@apply,@layer, etc)
- Official Tailwind component examples – UI components
- Tailwind Components – free UI components by the community
- Tailwind cheat sheet
- Awesome Tailwind CSS – more Tailwind resources