dance2die/cra-template-tailwindcss-typescript

A streamlined Tailwind CSS template for Create React App in TypeScript

cra-template-tailwindcss-typescript's Issues

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

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:

feat: Watch for CSS changes with Chokidar CLI

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

"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

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/

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",

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