Tailwind CSS Custom Block Plugin
This repo leverages the @wordpress/scripts
package and it's ability to use PostCSS to introduce TailwindCSS to the build process.
Additionally, by using the postcss-multiple-tailwind
we are able create css files for each block that only contain the classes being used in the block.
Setup
- Checkout this repo
git clone https://github.com/ryanwelcher/tailwind-multiple-blocks.git
- Cd into the new directory
cd tailwind-multiple-blocks
- Run
npm i
to install dependencies
Once set up, all of the standard commands from @wordpress/scripts
will work normally:
npm start
- starts the dev build process in watch modenpm run build
- Build the files for production.
Adding more blocks
- Create a new directory in the
src
folder - Add all of the files needed for a new block
- Ensure that there is a
tailwind.config.js
file in the new folder withcontent
set to the path to the new folder relative to the root -content: ['./src/FOLDER_NAME/*.{html,js}'],