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.
Top comments (1)
The part of using TailwindCSS from the ELM view is missing and maybe a purge configuration would be a good thing to have for a production solution ... but anyway, it’s a good start. Thanks for the article.