Getting Elm, TailwindCSS and Parcel to work together

7 June 2021

Here is a no-frills, step-by-step guide to help you get Elm, TailwindCSS and Parcel working together.

1. Firstly, update node to the latest version. If you don’t already have it, install it by following the instructions for the LTS version here.
2. Create a new folder for your project.
3. Open Terminal and navigate to the project folder.
4. Initialise Elm by running elm init.
5. Initialise npm by running npm init -y.
6. Install Parcel (version 2.0 beta as of this writing) by running npm install -D parcel@next.
7. Install TailwindCSS, PostCSS and Autoprefixer by running npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.
8. Create a file called “postcss.config.js” at the root of your project’s folder. To have Tailwind process your CSS files and have Autoprefixer add in browser prefixes, type the code here into the file.
9. Create a file called “styles.css” and add in the following at the very start of the file. Type the code here into the file.
10. Go ahead and create an index.html file, a JS file, and an Elm file with whatever content you want.
11. Once ready, type in npm start into the terminal. On the first run, Parcel will install all that it needs to process Tailwind CSS. As usual, open “http://localhost:1234” to see your code running.