Need help with tailwind (was: Shorthand markups for html/css like haml and tailwind)

I have used vue for for a few years and I recently discovered tailwind. I love the abbreviations (I hate typing) and tailwind looks like a keeper. I’ve also looked for html shorthand but I’ve not found any I’m in love with. I guess haml could work for me.

Does tailwind work in vue single-file components? Does haml? In general I’'m looking for a compatible set of tools with tailwind-like typing. Any suggestions?

Have you tried pug and stylus or sass??

1 Like

I installed pug and pug-plain-loader and it is pretty awesome. Very simple and just what I wanted. It worked first try.

I have tried to install tailwind css with no luck. I followed the instructions at When I use import '@/assets/css/tailwind.css'; in main.js or @import '../assets/css/tailwind.css'; in a single-file component style I can tell something is loaded because some of my old CSS breaks. I assume this is because some normalization CSS is changing my default styles.

But when I try using the class bg-blue in my single-file component template nothing happens. Apparently bg-blue isn’t defined. Also, If I put @apply bg-blue; in my css I get the error @apply cannot be used with .bg-blue because .bg-blue either cannot be found or .... I’ve read that this is because there is no definition.

Here are the only tailwind changes I can find …

tailwind.js …

module.exports = {
  theme: {
    extend: {}
  variants: {},
  plugins: []

tailwind.css …

@tailwind base;
@tailwind components;
@tailwind utilities;

.postcssrc.js …

module.exports = {
  "plugins": [

I’m using cue-cli 3.x.

Some questions …

  • How is import '@/assets/css/tailwind.css'; supposed to work? Where is that CSS insterted?
  • In @tailwind base, where does the tailwind base CSS come from? How can I view it? Am I missing a CSS file that contains the base CSS?
    Any help would be appreciated …

I found the problem. bg-blue is not a valid tailwind class, even though it is used in many tutorials on the web.