search

barvian / fluid-tailwind

Scale utilities smoothly between breakpoints with CSS clamp().
https://fluid.tw
906 stars 15 forks source link

Plugin don't work - no css is generated #35

Closed RichForever closed 3 months ago

RichForever commented 3 months ago

I'm trying to setup this plugin with my Wordpress project. So here's my tailwind.theme.config.js file

`const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = { "container": { "center": true, }, "colors": { / colors here / }, "fontSize": { "heading-1": "clamp(1rem, 10vw, 2rem)", "heading-2": "clamp(1rem, 10vw, 2rem)", "heading-3": "clamp(1rem, 10vw, 2rem)", "heading-4": "clamp(1rem, 10vw, 2rem)", "body": "clamp(1rem, 10vw, 2rem)", "body-small": "clamp(1rem, 10vw, 2rem)", "caption": "clamp(1rem, 10vw, 2rem)", }, "fontFamily": { "inter": ['Inter', ...defaultTheme.fontFamily.sans], "playfair": ['Playfair Display', ...defaultTheme.fontFamily.sans], }, } `

and this is my main tailwind config file

`import themeConfig from './tailwind.theme.config' import fluid, { extract } from 'fluid-tailwind'

module.exports = { content: { files: [ "./blocks//*.{php,twig,html,js}", "./lib/*/.php", "./src//*.js", "./views/*/.twig", "./*.{php,twig,html}", ], extract: extract }, theme: { extend: { colors: themeConfig.colors, fontSize: themeConfig.fontSize, fontFamily: themeConfig.fontFamily, container: themeConfig.container, }, }, plugins: [ require('flowbite/plugin'), fluid // require('@tailwindcss/forms') ], safelist: [ 'navbar.active', ] }`

When I'm generating css within webpack all of the standard TW classes are generated but no any css for this plugin. What am I doing wrong?

I'm using newest version of plugin

RichForever commented 3 months ago

Problem solved, I have to add screens into my configuration. I think it's missing in the docs that this is required

barvian commented 3 months ago

Thanks for the feedback. I used to have a third installation step for the screens but I thought it made more sense after introducing the CSS restrictions. What would you think about this as a third installation step instead?

3: Continue reading to the end of the limitations section

There may be additional installation steps depending on your Tailwind configuration.

RichForever commented 3 months ago

I think I'll do it more clear. If you're using Tailwind version below 4 or you have custom screen definitions in pixels then go to step. Something like this. Also, I would add if you have default config then you must add this screens object. Then I think link should point to "Tailwind’s default theme" section