This project demonstrates how to use Tailwind with Elm-land using yarn.
To install this project, follow these steps:
- Clone the repository to your local machine.
- Install the necessary dependencies by running
yarn install
.
To use this project, follow these steps:
- Start the development server by running
yarn dev
. - Navigate to
http://localhost:1234
in your web browser. - Edit the files in the
src
directory to modify the application. - See the changes in your browser as you save the files.
The trick to using Tailwind with Elm-land is to configure Tailwind to look for changes in files in addition to the usual src location and look for them in the .elm-land directory. This is done in the tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,elm,ts,css,html}",
".elm-land/**/*.{js,elm,ts,css,html}"
],
}
This configuration tells Tailwind to look for Elm files in the src and .elm-land directories and the usual file types.
In addition to configuring Tailwind, you must insert index.css into the interop.js file. This can be done by adding the following line to the interop.js file. This way Vite knows to transpile and bundle the CSS file:
import './index.css';
To contribute to this project, follow these steps:
Fork the repository. Create a new branch for your changes. Make your changes and commit them. Push your changes to your fork. Submit a pull request.