⏪ The Remix Stack with Tailwind - New repo: https://github.com/mhaidarhanif/rewinds
⚠️ New repo: https://github.com/mhaidarhanif/rewinds because this repo is no longer updated
Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries and the TypeScript ecosystem.
This is an example demo to combine the best Tailwind-related ecosystem such as Tailwind CSS, Headless UI, Radix UI + tailwindcss-radix
, Reach UI, Vechai UI, and more. Therefore this repo is kind of over-engineered to have high flexibility and cover a lot of use cases for different projects/products.
Check out the repo and visit the live demo:
You can deploy this yourself. Just put attention to setup the environment variables on Vercel or any of the deployment target you choose beforehand.
For recommended and alternative stack selections, they are mostly listed and detailed in the Catamyst Stack documentation.
Depending on your configuration, the app might need GraphCMS to serve the content for the blog articles example. Otherwise you can remove or swap the blog content source from anywhere else.
More into what we can do or what you get. The complete features are listed in the about page. While the complete examples are listed in the examples page.
~/components
, ~/configs
, ~/libs
, ~/types
, ~/utils
More into what is being used. The complete stacks are listed in the about page.
clsx
or cx
, aliased as classx
graphql-request
and urql
fetch
and axios
eslint-config-airbnb
eslint-config-prettier
prettier-plugin-tailwindcss
eslint
, stylelint
, prettier
, typecheck
⚠️ Make sure to not using React v18 yet as there's an issue with Vechai UI and Reach UI. Unless you want to remove them for now.
Choose either way:
a. Click Use this template button on GitHub.
b. Clone directly:
git clone https://github.com/mhaidarhanif/rewinds my-rewinds-project
c. Clone with a clean Git history:
npx degit https://github.com/mhaidarhanif/rewinds my-rewinds-project
To run your Remix app locally, make sure your project's local dependencies are installed:
npm install
# Can still use yarn or pnpm, just be aware of the lock file
If you've run npm install
, the postinstall
script should copy the example .env
automatically. Otherwise you can manually copy the .env.example
into .env
:
cp -i .env.example .env
# `-i` or `--interactive` will prompt before overwrite
Then 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 on production. That's why I already put some preset strings in the
.env.example
which you can copy directly.
Important variables:
SESSION_SECRET
openssl rand -base64 32
to generate a secret/key and use itREST_ENDPOINT
fetch
or axios
GRAPHQL_ENDPOINT
graphql-request
or urql
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. This will watch and compile for both the Tailwind styles and Remix app.
npm run dev
You can also use the d
script for a quick way. This will compile Tailwind styles once and only watch the Remix app changes.
npm run d
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. Although it can help with the Environment variables setup (no need to use .env
file).
ℹ️ 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.
If you want to use Doppler to manage the environment variables, use the dev:doppler
script. Therefore you won't need the .env
file to be edited manually.
npm run dev:doppler
# doppler run -- npm run dev
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.
.husky
.vscode
api
app
components
: custom and aliased componentsconfigs
contents
data
features
graphql
hooks
layouts
libs
: Wrapper for node_modules
routes
: Remix routesstyles
out.css
: Tailwind output filetypes
utils
entry.client.tsx
entry.server.tsx
root.tsx
other-root-routes.server.ts
public
styles
global.css
: Tailwind input file.gitignore
package.json
.commitlintrc
.editorconfig
.eslintignore
.eslintrc
.lintstagedrc
.npmrc
.nvmrc
.prettierignore
.prettierrc
.stylelintrc
tsconfig.json
vercel.json
README.md
remix.config.js
.env
.env.example
postcss.config.js
tailwind.config.js
remix.env.d.ts
tsconfig.json
server.js
There are also some code you can customize with your own branding by editing all the things that commented with EDITME
by using search in your editor.
Especially:
README.md
LICENSE
package.json
.github
and its contentssite.webmanifest
Also when using this starter kit, you might want to remove most of the code in:
app
data
: custom datacontents
: custom contentsroutes
: custom routesOther than those you might want to keep them.
To refresh the site preview cache for each sites, they usually have their own validators:
sitemap.xml
and robots.txt
: Google Search ConsoleMake sure that it can build just fine:
npm run build
For more complementing the build:
npm run build
npm run lint
Make sure to lint the code with both ESLint and Stylelint:
npm run lint
Or individually:
npm run eslint
npm run stylelint
npm run prettier
npm run typecheck
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.
Or you can click the buttons in the introduction.
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.
If you have older way of importing from remix
package prior to [email protected]
or [email protected]
, you can use the migrate
script to change the import statements.
npx @remix-run/dev migrate
Before:
import { json, redirect } from "remix";
After:
import { json, redirect } from "@remix-run/node";
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_API_KEY
CONVERTKIT_FORM_ID
Tips: