ReactJS + TailwindCSS + Tailblocks

Have you checked out building your web app with TailwindCSS yet? Minimal production builds, unused code is removed during build process, regularly updated content. It has become my go to when outside of salesforce.. Check it out!

Setup your reactjs app via npx cli

npx create-react-app my-app cd my-app

Install tailwind css via npm

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install and configure craco via npm

npm install @craco/craco

package.json

"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" },

create a craco.config.js

// craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }

create your tailwind config file next

npx tailwindcss init

this will create a minimal tailwind.config.js file at the root of the project

update the purge parameters as follows

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

Now, include Tailwind in your css

Open index.css

/* ./src/index.css */ @tailwind base; @tailwind components; @tailwind utilities;

add the following to index.js

import './index.css';

The project is now configured to use tailwind css, lets head over to tailblocks and grab a sample component we want to use. https://tailblocks.cc/

Add the component markup to index.js and customize to your apps needs!