The JAMStack
The latest addition to the Tailwind project is the its just-in-time compiler that generates your styles on-demand as you author your templates instead of generating everything in advance at the initial build time.
Here are the advantages that JIT offers:
- Lightning fast build times
- Every variant is enabled out of the box
- Generate arbitrary styles without writing custom CSS (top[-10px])
- Identical CSS in development and production
- Better browser performance in development
Lets get Started
Create a next project.
npx create-next-app next-tailwind-tutorial
cd ./next-tailwind-tutorial
Next, let's install Tailwind dependencies and create a Tailwind config.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/jit
npx tailwindcss init -p
A better folder structure
Now we need to modify these two files, but before that lets organize our folder structure
- Create an src folder in the root directory
- Move styles and pages folders inside it.
-
tailwind.config.js
module.exports = {
mode: "jit",
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
-
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
This will make our development run with Tailwind JIT and in production, it will run JIT one-off.
Now add the Tailwind directives to your
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
🎉🎉🎉That's it and you are ready to use Tailwind in your next project.
Run the dev server and test out your app.
npm run dev
Bonus
Tailwind CSS has a VS Code extension you can use to speed up development and boost productivity.
Also check out the Headwind extension, this tool automatically enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.
Refs & Resources
If you loved the article and would like to support me, you can buymeacoffee!
Top comments (0)