This is a modified Create React App (CRA) template for Preact CLI, that uses Preact (instead of React), and is already enabled for use with TailwindCSS.
# :: change {my-project} to your desired app / folder name
npx preact-cli create richardneililagan/cra-preact-tailwind-template my-projectI'm more accustomed to working with CRA, but have recently wanted to switch out React for Preact --- so this should allow you to use Preact while still being able to use the conventions + features + familiarities that CRA provides.
This template uses customize-cra and
react-app-rewired to hook up custom plugins in places to the
default CRA pipeline.
The preact.h pragma is automatically injected into your JSX files, so you don't have
to import { h } from 'preact' (or even import React from 'react') in your JSX files,
nor do you have to add /** @jsx h **/.
This should also work in your tests (using jest by default).
Libraries that depend on React itself should be compatible with this out of the box.
Any import calls for react and react-dom should be transparently aliased in webpack
to their corresponding Preact compatibility libraries accordingly.
In tests, any imports for @testing-library/react are also aliased to
@testing-library/preact.
TailwindCSS is already set up in the project, and TailwindCSS utility classes should work with your markup + components.
If you do still need to import custom CSS rulesets into your components,
the original CRA behavior of being able to import .css and/or .module.css files
into your code will still work.
To modify / extend the TailwindCSS configuration, check tailwind.config.js.
If you'd like to add additional global base styling to your app,
src/index.css has a section dedicated to placing these rulesets in.
This helps ensure that your global base rulesets are set within the right place in the
CSS bundling pipeline.
Note that, to minimize CSS bundle sizes in production, TailwindCSS can purge unused CSS classes from your codebase. The template configuration will scan all
.js/.jsx/.ts/.tsxfiles insrc/, and all.htmlfiles inpublic/to determine which CSS classes are actually in use.For more information on this behavior, please read the TailwindCSS documentation.
You're more than welcome to switch out the ESlint config with your own preferences, and the template uses the following as default:
preactunicornjest-domtesting-libraryprettier
See .eslintrc for more information.
