I just list out the steps here without explanation. Feel free to ask if you have any question. Thanks for reading!

Initialize project with NPM

npm init --yes

Install dependencies

npm install \
elm elm-format \
tailwindcss \
postcss-modules parcel-bundler

Build HTML with Parcel

create src directory and
create basic HTML file named index.html:

File: src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Run:

npx parcel src/index.html

You should get something like this:

➜ npx parcel src/index.html 
Server running at http://localhost:1234 
✨  Built in 76ms.

Now you should be able to open your browser and go to http://localhost:1234 and see big "Hello" text on that page.

Add tailwindcss support

create index.tailwind.css (you can name it differently) under src:

File: src/index.tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Add link to this file in your index.html

File: src/index.html

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
    <link rel="stylesheet" href="index.tailwind.css" />
  </head

If you go to "network" tab in your browser, you should see that the page already loaded index.tailwind.css. But, without compilation, tailwindcss will not work.

Add PostCSS configuration

To tell Parcel to compile tailwindcss, we need to add PostCSS configuration file to our project.

Create postcss.config.js file:

File: postcss.config.js

module.exports = {
  plugins: [require("tailwindcss")],
};

You need to re-run Parcel to let it aware of this new configuration. Stop current Parcel process and run it again:

npx parcel src/index.html

Note: if you still get uncompiled css file, you may need to remove Parcel cache and dist directories before run Parcel:

rm -rf .cache dist
npx parcel src/index.html

If you see your "Hello" text styles changed, that means you get the right one.

Add Elm support

Initialize Elm

npx elm init

Create Main.elm under src

File: src/Main.elm

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


type alias Model =
    { count : Int }


initialModel : Model
initialModel =
    { count = 0 }


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

Note: I borrow the content from Ellie App.

Create index.js under src:

File: src/index.js

import { Elm } from "./Main.elm";

Elm.Main.init({ node: document.querySelector("main") });

Add this file to src/index.html

File: src/index.html

  <body>
    <main></main>
    <script src="index.js"></script>
  </body>

After saved, re-run Parcel again. Done.

Blog

Set up Elm project with Tailwindcss & Parcel

Coding with his cats

Initialize project with NPM

Install dependencies

Build HTML with Parcel

Add tailwindcss support

Add PostCSS configuration

Add Elm support

Join Our Newsletter. No Spam, Only the good stuff.

Related