Css grid in Lustre

[long linden]

Hello I am trying to get css grid working to be able to define both the start and end rows and the start and end columns for items in a grid. I dont want automatic flowing or moving things around.

`fn view(model: Model) -> Element(Msg) {

html.div([attribute.class("grid grid-col-5 grid-rows-10 ")], [
html.div([attribute.class("grid-row-start-2 ")], {
[
html.text("a"),
]
}),
html.div([attribute.class("grid-row-start-1 ")], {
[
html.text("2"),
]
}),
])
}`

This displays the 'a' above the '2', but I want it to display the '2' above the 'a'. It seems as though the css is not being parsed.

Any ideas ? Thanks.

[gray cove]

in tailwind its row-start-2 and row-start-1

no grid- prefix

[long linden]

thanks

[long linden]

I think I might be missing a tailwind.config.js file as none of the tailwind css seems to be working, and I cant find it in a built project folders.

[gray cove]

How are you running the project

[long linden]

Following the quickstart guide

running it on local host

[gray cove]

You’ll want to run gleam run -m lustre/dev add tailwind then, dev tools dont know you want to use tailwind

lustre can detect projects that have an existing tailwind config but if that doesnt exist it cant assume you want to use tailwind, you might be writing your own css!

[long linden]

OK thanks.

[long linden]

css file added to src folder, I checked I have latest tailwind installed via npm. still no styles displayed. will come back to this later over the next day or two after reading up docs in more depth. Thanls @gray cove