Set up Elm project with Tailwindcss & Parcel
Tags: elm, tailwindcss, parcel
Published: 2020-07-30 11:32:04

---
title: Set up Elm project with Tailwindcss & Parcel
published: true
description: 
tags: Elm, tailwindcss, parcel
//cover_image: https://direct_url_to_image.jpg
---
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

```bash
npm init --yes
```

## Install dependencies

```bash
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`
```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:
```bash
npx parcel src/index.html
```
You should get something like this:
```bash
➜ 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`
```css
@tailwind base;

@tailwind components;

@tailwind utilities;
```

Add link to this file in your `index.html`

File: `src/index.html`
```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`
```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:

```bash
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:
```bash
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
```bash
npx elm init
```

Create `Main.elm` under `src`

File: `src/Main.elm`
```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](https://ellie-app.com/).

Create `index.js` under `src`:

File: `src/index.js`
```js
import { Elm } from "./Main.elm";

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

Add this file to `src/index.html`

File: `src/index.html`
```html
  <body>
    <main></main>
    <script src="index.js"></script>
  </body>
```
After saved, re-run Parcel again. Done.