barvian / fluid-tailwind

Build better responsive designs in less code.
https://fluid.tw
MIT License
1.24k stars 19 forks source link

Clamp doesn't work #41

Closed draylegend closed 3 months ago

draylegend commented 4 months ago

Config doesn't work for me in an nx/angular workspace with tailwind. Repo

Smartphone view

image

Tablet view

image

barvian commented 4 months ago

Hey, thanks for the repro. I wasn't able to run your project locally, but it looks like it's missing the extractor from the installation section. Curious to hear if that fixes it for you 👍

draylegend commented 4 months ago

I tried to use extractor but it didn't work, then I copied the config from the playground.

Changed the tailwind config to the installation instructions accordingly.

@barvian you can use npm to install deps if you don't have bun

barvian commented 3 months ago

I tried to use extractor but it didn't work, then I copied the config from the playground.

Changed the tailwind config to the installation instructions accordingly.

@barvian you can use npm to install deps if you don't have bun

Hi, I installed the dependencies fine with bun but I didn't know how to run the actual project from there 🤔

draylegend commented 3 months ago

nx serve client

barvian commented 3 months ago

Gotcha, thanks. I was able to get it working locally with this config:

const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
const { default: fluid, extract } = require('fluid-tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    files: [
      join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
      ...createGlobPatternsForDependencies(__dirname),
    ],
    extract,
  },
  theme: {
    screens: {
      xs: '20rem',
      lg: '64rem',
    },
  },
  plugins: [fluid],
};
draylegend commented 3 months ago

@barvian u r awesome ❤️‍🔥 I had an array instead of object. Now works for me as well!