[SOLVED] Tailwind + Blaze help

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 :slight_smile:

I have been using tailwind without the completitions all this time.

I’ll try this. Thanks for sharing.

1 Like

Yes, it should. It’s part of the standard-minifier-css package. Does your app have this package?

Hey @zodern.

Yep:

standard-minifier-js@2.8.1

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.