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

This is a good template but to make it great (😉) I'd replace autoprefixer with postcss-preset-env which includes autoprefixer and additional polyfills

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:

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

I don't think it's necessary to keep the processed CSS under version control. The file is generated automatically when the development server starts. Also, since GitHub determines repository language stats using file size, repositories using this template display a distorted CSS percentage figure.

Version 1.4.0 adds built-in support for PurgeCSS: https://github.com/tailwindcss/tailwindcss/releases/tag/v1.4.0

The @fullhuman/postcss-purgecss and purgecss dependencies aren't needed anymore, so I removed them.

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.

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

Bumps lodash from 4.17.20 to 4.17.21.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps ini from 1.3.5 to 1.3.8.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

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

KCD's code: https://github.com/kentcdodds/bookshelf/commit/b984b34239aee9f57fb7bf8868b7e78dfe475ae8

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