Tailwind Instructions?

[thatcort]

I realize this may be out of scope for the library, but I'm trying to set up Tailwind to work with Solid-JS and not sure how to go about it.

Since solid-scripts seems to be based on react-scripts, I tried to mostly follow the Tailwind React instructions and use Craco to configure it as a PostCSS plugin. That didn't work, since Craco v6 complains that create-react-app is too old and Craco v5.8 complains that it Cannot find ESLint loader (eslint-loader) despite setting eslint { enable: false } in the Craco config.

Adding @amoutonbrady since I saw them mention using both Tailwind and CSS in another issue.

Maybe there's a simple way I'm missing? Any help appreciated!

[parlough]

I don't have experience using solid-scripts, but I found success using https://github.com/amoutonbrady/solid-snowpack-starter. It worked for me out of the box :)

[ryansolid]

Hmm.. yeah I forked off Create React App May 2019. I am not terribly familiar with how it's changed since then. Mostly was just looking for an easy starter toolset. I can't say I've ever tried Craco, I'm not even sure if the way I changed it would be compatible. It is sort of an as-is experience mostly. I did recently update PostCSS so I assume there must be some play here, but I'm not sure. Have you tried manually adding es-lint loader to your project? Obviously it isn't in our webpack config, but Craco seems to be trying to do something with it. Outside of that I am not sure what I'd need to do for Craco to recognize it.

Generally if you want more configurability we are sort of left with ejecting or using one of the other starters, since as you can imagine there isn't a community around modding this. In all honesty at some point I hope to be able to provide a better easy startup environment, but this was one I knew to atleast have all the standard niceties even if it is not that configurable.

[thatcort]

@ryansolid I'm using typescript, so I don't think ESLint makes sense, but also don't have much sense of what Craco or the starter scripts are doing. I can try adding ESLint as a dev dependency and see what happens. I think the main thing is figuring out how to allow the PostCSS config to be extended by the app, which really shouldn't depend on ESLint at all.

@parlough Thanks for the Snowpack starter link. I'll have to check that out. I see a tsconfig file, so hopefully that means it supports Typescript(?). This might be the easy path :)

[ryansolid]

My understanding is TSLint is being deprecated and ESLint with TypeScript presets is the future but yeah. I think for custom configuration you are probably better off on a different path. We're still trying all the tools and trying to find the best core build setup. I'm still very much on basic Rollup setup (but I don't care about DX at all in my personal setups) but @amoutonbrady has been trying a lot of stuff. I used the snowpack build a bit and it was good for dev, but I'm unclear on how the prod build is. To my knowledge it supports TS, so you should be good.

[high1]

@thatcort, TSLint is deprecated for a while now, and ESLint only makes sense. TSLint in 2019. That being said, the answer to your question is not related to Solid, as I see it - you can use Tailwind with Solid, how - it will mostly depend on your choice of the build tool. The starter configuration I made uses Webpack, and HMR - this does not keep the state, but @ryansolid is working on that. I've just updated it and I'm seeing this - tailwindlabs/tailwindcss#2820 - the build times are slow, to the point where I would consider dropping Tailwind, even though I like the concept and the library itself. I've tested this with Rollup also, and the situation there was even worse with nollup - every rebuild was doing everything from the start. It could be that I missed something, but it was just too slow. But what's relevant here is that you can just use PostCSS in the way the build tool is using it.
I spoke to soon, btw - seems that enabling purging always is speeding build times considerably - first build time went from 15 to 6 secs, and subsequent reloads dropped to 500ms from 2200. I guess the biggest tax here is the size of the generated CSS without optimization and the time it for it to be processed.

[thatcort]

Thanks, @high1. I got things working using the Snowpack starter. I agree this is tangential to Solid, but webpack and create-react-app are outside my experience. I hope I'm not taking advantage of the community here by asking these questions.

[high1]

Nope, not at all IMO - the issue here is that the ecosystem is not nearly as vast as the other major ones, so a lot of questions don't have answers ready when you search... The starter uses CSS Modules with Tailwind, which I find problematic, because stylings are kept in two different places and I'm aiming to replace that with https://github.com/callstack/linaria - it should just work with Solid, because there's no runtime. Purging was not a good idea, because if you want to add something not already present, it will not be there - so I've settled with the another approach https://nystudio107.com/blog/speeding-up-tailwind-css-builds, and it works OK.

[russelgal]

@thatcort consider this solution https://github.com/tw-in-js/twind

[high1]

My personal preference is not to use CSS-in-JS with runtimes, because of the additional performance penalty - that's why the starter use PostCSS build step and will use Linaria.

[ryansolid]

I think this has run it's course.. but good info shared. Thanks everyone.