I’m having trouble after having followed these official instructions.
Has anyone gotten tailwind working with a Blaze project? Anyone aware of a demo project on Github?
Hey! Can you provide more details about your issue and include some screenshots? This could make it easier for the community to assist you.
@drone1 where did you get stuck exactly? Maybe you start with meteor create --tailwind and then just add Blaze?
@acamikuro @jkuester hi ya’ll sorry for the delay. thank you for your help here.
I hadn’t included additional information since I’d just followed those official instructions exactly.
Below are details.
When I load my test page, the markup is rendered without any styles.
Any help would be greatly appreciated. Hopefully I’m just missing something and it’s a simple fix.
@jkuester i tried your suggestion, creating a react/tailwind app and then trying to add blaze, but i had to add some glue package and then react & blaze were fighting over who should handle html files and I figured time might be better spent just trying to get it working in my project. I can continue down that path potentially, but for now, here is some additional data about what I’ve got going on in my project after following the instructions on the page I mentioned initially.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./imports/ui/**/*.{js,html}",
"./client/**/*.{js,html}",
// I tried including these explicitly for fun, but this didn't seem to help
// "./imports/ui/pages/tailwind-test.js",
// "./imports/ui/pages/tailewind-test.html",
],
theme: {
extend: {},
},
plugins: [],
}
imports/ui/stylesheets/main.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
client/main.js
import '/imports/ui/stylesheets/tailwind.css'
postcss.config.js
const config = {
plugins: [
require('autoprefixer'),
require('postcss-nested')
]
}
module.exports = config
tailwind-test.html
<template name="tailwind_test">
<div class="bg-white py-24 sm:py-32">
....more tailwindy stuff...
</div>
</template>
package.json includes postcss, autoprefixer, tailwindcss, but here’s the whole thing:
{
"name": "supervoid",
"private": true,
"scripts": {},
"dependencies": {
"@babel/runtime": "^7.23.9",
"@dimforge/rapier3d": "^0.11.2",
"@easypost/api": "^7.2.0",
"@paypal/checkout-server-sdk": "^1.0.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@vimeo/player": "^2.21.0",
"adaptive-bezier-curve": "^1.0.3",
"async": "^3.2.5",
"autoprefixer": "^10.4.19",
"aws-cloudfront-sign": "^2.2.1",
"aws-sdk": "^2.1036.0",
"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0",
"batchelor": "^2.0.2",
"bcrypt": "^5.1.1",
"blueimp-load-image": "^5.16.0",
"bullmq": "^5.1.5",
"chart.js": "^4.4.1",
"clone-deep": "^4.0.1",
"connect-route": "^0.1.5",
"cookieconsent": "^3.1.1",
"core-js": "^3.35.1",
"crypto-js": "^4.2.0",
"date-diff": "^1.0.2",
"deep-object-diff": "^1.1.9",
"detector-webgl": "^2.0.0",
"digest-fetch": "^3.1.1",
"force-graph": "^1.43.4",
"form-data": "^4.0.0",
"format-email": "^0.1.0",
"google-spreadsheet": "^3.3.0",
"googleapis": "^131.0.0",
"hls.js": "^1.5.2",
"hmmac": "^0.2.2",
"http-headers-validation": "^0.0.1",
"http-proxy": "^1.18.1",
"i18n-iso-countries": "^7.8.0",
"ibantools": "^4.3.9",
"iplocation": "^7.2.0",
"jquery": "3.7.1",
"js-base64": "^3.7.6",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"memoizee": "^0.4.15",
"meteor-node-stubs": "^1.2.9",
"mime-types": "^2.1.35",
"mimemessage": "^1.0.5",
"music-metadata-browser": "^2.5.10",
"object-sizeof": "^2.6.4",
"postcss": "^8.4.38",
"postprocessing": "^6.34.1",
"random-seed": "^0.3.0",
"rectangle-overlap": "^2.0.0",
"request-promise-native": "^1.0.7",
"rete": "^2.0.2",
"rete-area-plugin": "^2.0.1",
"rete-comment-plugin": "^2.0.0",
"rete-connection-mastery-plugin": "^0.2.4",
"rete-connection-plugin": "^2.0.0",
"rete-history-plugin": "^2.0.0",
"rete-task-plugin": "^0.3.0",
"shippo": "^1.7.1",
"simpl-schema": "^1.13.1",
"sprintf": "^0.1.5",
"stats.js": "^0.17.0",
"stripe": "^6.30.30",
"tailwindcss": "^3.4.3",
"three": "^0.160.1",
"three-custom-shader-material": "^5.4.0",
"three-line-2d": "^1.1.6",
"three-noise": "^1.1.2",
"toposort": "^2.0.2",
"useragent": "^2.3.0",
"yamlparser": "0.0.2"
},
"devDependencies": {
"@faker-js/faker": "^8.4.0",
"chai": "^4.3.6",
"chai-as-promised": "^7.1.1",
"command-line-args": "^5.2.1",
"command-line-usage": "^7.0.1",
"git-cz": "^4.9.0",
"replace-ext": "^2.0.0"
},
"config": {
"commitizen": {
"path": "git-cz"
}
}
}
I added and removed some meteor packages:
+juliancwirko:postcss
-seba:minifiers-autoprefixer
Full .meteor/packages file:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base@1.5.1 # Packages every Meteor app needs to have
mobile-experience@1.1.1 # Packages for a great mobile UX
mongo@1.16.8 # The database Meteor supports right now
reactive-var@1.0.12 # Reactive variable for tracker
tracker@1.3.3 # Meteor's client-side reactive programming library
es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers.
ecmascript@0.16.8 # Enable ECMAScript2015+ syntax in app code
shell-server@0.5.0 # Server-side component of the `meteor shell` command
ostrio:flow-router-extra
dynamic-import@0.7.3
email@2.2.5
mdg:seo
fongandrew:find-and-modify
yasinuslu:blaze-meta
facts@1.0.9
meteorhacks:ssr
session@1.2.1
check@1.3.2
nolimits4web:swiper
froatsnook:valid-email
spacebars-compiler
mdg:validated-method
ddp-rate-limiter@1.2.1
server-render@0.4.1
dburles:collection-helpers
ostrio:flow-router-meta
jquery@3.0.0!
typescript@4.9.5
meteortesting:mocha
tunifight:loggedin-mixin
fourseven:scss
zodern:hide-production-sourcemaps
standard-minifier-js@2.8.1
fetch@0.1.4
hwillson:stub-collections
dburles:factory
mdg:meteor-apm-agent
blaze-html-templates
aldeed:collection2@4.0.0
accounts-base@2.2.10
alanning:roles
accounts-password@2.4.0
underscore@1.6.0
juliancwirko:postcss
1 Like
You have to of course remove the react related packages from the npm dependencies and .meteor/packages.
I think this is a call for some boilerplate project.
Thanks. I got it working and forgot to follow up here.
This was the missing piece, which wasn’t on the tailwind docs for Meteor:
npx tailwindcss -i imports/ui/stylesheets/tailwind.css -o imports/ui/stylesheets/tailwind-output.css --watch
And then including tailwind-output.css in my client/main.js file.
Is Meteor somehow supposed to be taking care of this step on its own?
I also removed juliancwirko:postcss which didn’t make any noticeable changes. If there are any other react packages you noticed, please let me know.
And thanks again 
I have been using tailwind without the completitions all this time.
I’ll try this. Thanks for sharing.
1 Like
There’s two standard-minifier- packages. That’s the js one. There’s a separate one for css (standard-minifier-css) that handles tailwind.
That was it! Nice catch. Thanks a lot.