⏪
Rewinds – Remix Tailwind Starter Kit
Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the best Tailwind-related ecosystem such as Tailwind CSS, Headless UI, Radix UI, Vechai UI, and more.
Visit the live demo: rewinds.mhaidarhanif.com
Note that this repo is ongoing active development so thing might quickly change at the moment.
Screenshots
Table of Contents
Features
The complete features are listed in the about page
- Remix as the React framework
- Tailwind CSS using Vechai UI as primary components
- Multiple themes switcher and persist theme with a session cookie
- Only focus on the frontend styling and project structure, without particular in testing and database
- Only a bit of backend integration through Remix loader
- For the full stack integration with database and testing, check out the official Remix Stacks instead: https://remix.run/stacks
ℹ️ Depending on your computer processing power, the first Tailwind compilation might take around ~3 seconds. Although Tailwind CSS v3 already has Just-in-Time engine enabled by default.
- https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css
- https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine
Stacks
The complete stacks are listed in the about page
- TypeScript v4.6
- Node.js v14-v17
- npm v8
- React v17
- Remix v1.4
- Tailwind CSS v3
- Tailwind CSS plugins
- PostCSS v8
- Fonts
- Google Fonts
- Fontbit CDN
- Icons
- React Icons
- Heroicons v1
- Font Awesome
- Phospor Icons
- React Icons
- Components
- Headless UI v1 – Unstyled accessible UI components
- Radix UI v0 – Unstyled accessible UI components
- Tailwind Radix
- Vechai UI v0 – React Tailwind CSS components
- NProgress
- ESLint v8
- Stylelint v14
- Prettier v2
clsxorcxaliased asclassxurqlandgraphql-requestaxios- Vercel
⚠️ Make sure to not using React v18 yet as there's an issue with Tailwind CSS and Vechai UI.
Development
To run your Remix app locally, make sure your project's local dependencies are installed:
Install dependencies
npm install
Environment variables
Copy the .env.example into .env:
cp .env.example .env
# Edit .env as you prefer
⚠️ Make sure to setup the environment variables here, on Vercel, or on your preferred deployment target. Otherwise the app will break.
If you don't need some of these, you can remove them in the .env, app/utils/env.server.ts, and all getEnvServer() function calls.
Afterwards, run the Remix development server with the dev script.
npm run dev
It will compile both the Tailwind styles and Remix app. Finally, open up http://localhost:3000 and you should be ready to go!
Note if you're used to using the vercel dev command provided by Vercel CLI instead, you can also use that, but it's not needed.
Environment variables using Doppler
If you want to use Doppler to manage the env variables, use the start script. Therefore this won't need the .env file to be edited manually.
npm run start
# doppler run -- npm run dev
Project structure
Keep in mind that the structure is designed for scalability for medium-large project. If your project scope is too simple or too small, Rewinds might be a bit too much to handle.
.vscodeapiappcomponentsconfigscontentsdatafeatureshookslayoutslibsroutesstylestypesutilsentry.client.tsxentry.server.tsxroot.tsxother-root-routes.server.ts
publicstylesglobal.css
.env.env.example.eslintrc.eslintignore.gitignore.prettierrc.prettierignorepackage.jsonpostcss.config.jsREADME.mdremix.config.jsremix.env.d.tsserver.jstailwind.config.jstsconfig.jsonvercel.json
Build
Make sure that it can build just fine:
npm run build
Lint
Make sure to lint the code with ESLint and Stylelint:
npm run eslint
npm run stylelint
Deployment
After having run the create-remix command and selected "Vercel" as a deployment target, you only need to import your Git repository into Vercel, and it will be deployed.
If you'd like to avoid using a Git repository, you can also deploy the directory by running Vercel CLI:
npm i -g vercel
vercel
It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.
⚠️ Make sure to setup the environment variables in the project settings.
Notes
Remix
If you have older way of importing from remix package prior to [email protected], you can use the migrate script to change the import statements.
npx remix migrate --migration replace-remix-imports
Before:
import { json } from "remix";
After:
import { json } from "@remix-run/node";
Tailwind CSS
Note that Tailwind CSS IntelliSense extension might currently not work with [email protected] at the moment.
Vechai UI
Edit tailwind.config.js to remove custom colors to reduce the stylesheet build size. cssBase is still required to get the default Tailwind CSS colors into Vechai UI themes.
module.exports = {
// ...
theme: {
extend: {
colors: {
- info: colors.blue,
- success: colors.green,
- warning: colors.yellow,
- error: colors.red,
},
},
},
plugins: [
// ...
require('@vechaiui/core')({
cssBase: true,
- colors: ['info', 'success', 'warning', 'error'],
}),
],
};
ConvertKit
- Sign up a new account on ConvertKit
- Edit your profile information
- Get the API Key to be used as
CONVERTKIT_API_KEY - Create a Subscribe Form
- Get the Form ID to be used as
CONVERTKIT_FORM_ID
Tips:
- Setup the Mailing Address: https://help.convertkit.com/en/articles/2502494-alternatives-for-your-physical-address
![[ImgBot] Optimize images](https://avatars.githubusercontent.com/in/4706?v=4)
11 Dec 30, 2022
56 Dec 25, 2022
7 May 17, 2022
167 Dec 9, 2022
8 Mar 4, 2022
13 Dec 22, 2022
40 Oct 20, 2022
4 Nov 28, 2022
7 Dec 22, 2022
11 Dec 29, 2022
41 Dec 9, 2022
3 Feb 19, 2022
53 Dec 21, 2022
8 Oct 18, 2022
3 Jun 11, 2022
18.5k Dec 31, 2022
4 Sep 2, 2022
105 Dec 16, 2022
12 Mar 16, 2022