dance2die/cra-template-tailwindcss-typescript

A streamlined Tailwind CSS template for Create React App in TypeScript

cra-template-tailwindcss-typescript

A streamlined Tailwind CSS v3.x template for Create React App in TypeScript.

Usage

npx create-react-app my-app --template tailwindcss-typescript

Note to self

This is for myself or others trying to create from source code.

Prepare the husky, pre-github hook

npm run prepare

Install git-cz globally

pnpm i -g git-cz
# or
npm i -g git-cz

Create a new create-react-app project from my source code

npx create-react-app tw3 --template file:/home/dance2die/src/github/dance2die/cra-template-tailwindcss-typescript

If you didn't run npm run prepare from the source code, you will get an error like this,

sh: husky: command not found
npm ERR! code 127
npm ERR! path /Users/X/Desktop/Workspace/project
npm ERR! command failed
npm ERR! command sh -c husky install

Credits

This project was made possible thanks to the following projects.

1. GeoffSelby/cra-template-tailwindcss - A streamlined Tailwind CSS template for Create React App (in JavaScript).
2. cra-template-typescript - An official TypeScript template for create-react-app.

License

MIT © Sung M. Kim

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ivo Angelov 💻 🚧	Roger Chi 🐛 💻	Jag Reehal 💻	Michael 🐛	Mustafa YILDIZ ⚠️ 📆 🐛	Arye Eidelman 💻	Kolja P. 💻
Samin Yaser 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

cra-template-tailwindcss-typescript's Issues

build script doesn't actually get NODE_ENV=production into postcss

When running npm run build, the run-s command executes the "env:prod" script in a separate command than the "build:css" command, so NODE_ENV=production is not persisted into the postcss call. I suggest adding "cross-env NODE_ENV=production" directly into the build:css script, e.g.:

  "scripts": {
    "start": "run-p watch:css react-scripts:start",
    "build": "run-s build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "cross-env NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/index.css",
    "watch:css": "cross-env NODE_ENV=development postcss src/styles/tailwind.css -o src/styles/index.css --watch",
    "react-scripts:start": "sleep 5 && react-scripts start",
    "react-scripts:build": "react-scripts build"
  },

This is the file size change after making this modification to package.json for a vanilla project using cra-template-tailwindcss-typescript:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  39.39 KB            build/static/js/2.f2e7b3c8.chunk.js
  2.45 KB             build/static/js/main.559c7be3.chunk.js
  1.69 KB (-97.8 KB)  build/static/css/main.808035e1.chunk.css
  783 B               build/static/js/runtime-main.3cf3366c.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Done in 13.71s.

more detailed documentation

Hi,

I manage to add your template with the npx command. But I have some questions

(1) you say we enable JIT by changing tailwind.config.js to add "mode: "jit"," but what about postcss.config.js that still looks the following? Shouldn't that be changed as well "tailwindcss" to "tailwindcss/hit" ?

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-preset-env'),
  ],
};

(2) IMPORTANT: Do NOT comment purge when you enable JIT mode, otherwise your CSS will be empty!

• But can we comment out at all? Can I comment out purge after JIT mode is enabled?

(3) As this is a custom build tailwind project how do we use it?
When to run the following scripts:

build:css": "cross-env TAILWIND_MODE=build NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/index.css",
"watch:css": "cross-env TAILWIND_MODE=watch NODE_ENV=development postcss src/styles/tailwind.css -o src/styles/index.css --watch",
"react-scripts:start": "sleep 5 && react-scripts start",

Powershell: npm start fails with 'sleep' is not recognized as an internal or external command

First of all, great project.
Secondly, using bash on Windows successfully open localhost:3000. However, the command fails when using Powershell. I'm not sure whether this is a Powershell-specific error or not.

Here's the whole error:

Replace CRACO with Macro

Context: https://www.reddit.com/r/reactjs/comments/flebuh/how_to_add_tailwind_to_unejected_createreactapp/

KCD's code: kentcdodds/bookshelf@b984b34

CRA Custom Templates: https://create-react-app.dev/docs/custom-templates/

feat: Watch for CSS changes with Chokidar CLI

Refer To Dave Ceddia's blog post: https://daveceddia.com/tailwind-create-react-app/

Craco is still mentioned in README, although it's no longer in use :)

"sleep" does not work on Windows

Hello

"react-scripts:start": "sleep 5 && react-scripts start",
does not work as "sleep" is not present on win.

I'm doing
"react-scripts:start": "timeout /t 1 /nobreak > NUL && react-scripts start",

wanted to point it out, maybe it's something you would like to fix

Dependencies not added when using NPX

Hi.
I am trying this template out with Node + Yarn on Windows. First I run this command:

npx create-react-app my-tailwind-app  --template tailwindcss-typescript

But I found out that the generated project can't be run right away.

I ended up adding these packages, either to global or to the project's dependencies:

• npm-run-all
• delay-cli
• postcss
• postcss-cli
• autoprefixer
• typescript
• @types/react
• @types/react-dom
• @types/jest
• @testing-library/react
• @testing-library/jest-dom

Should these be described in README section for getting started?

Or better, should most of these be added to (dev) dependencies in the template from the start?

UPDATE

After testing further, it seems to be the issue with npx create-react-app that does not add the dependencies to package.json. Using yarn create react-app did it as in this comment