Comments (6)
I don't understand what Symfony UX could provide for setuping Tailwind in a Symfony project, and if Symfony UX should really touch other config files (tailwind.config.js
, postcss.config.js
, ...).
That's not really hard, and since Tailwind does not provide any JavaScript (except resolveConfig
), I think it's out-of-scope of Symfony UX.
You just have to configure Encore like this, to let Tailwind knows about NODE_ENV
value:
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
+// Manually define `process.env.NODE_ENV`, since Encore does not do it already
+process.env.NODE_ENV = process.env.NODE_ENV || (Encore.isProduction() ? 'production' : 'development');
Configure Tailwind like this, it will automatically purge unused CSS if NODE_ENV === 'production'
:
// tailwind.config.js
module.exports = {
purge: [
'./templates/**/*.html.twig',
'./assets/**/*.{vue,jsx}',
],
}
And configure PostCSS like this to let PostCSS handle Tailwind:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
from ux.
Symfony UX isn't named Symfony UI for a key reason: we want to provide reusable behaviors, not reusable user interfaces. Symfony won't become a UI tool, neither on the backend nor on the frontend. There are great tools, like Tailwind, that do it much better. It's perfectly feasible, and even easy, to add Tailwind on a Symfony UX structure.
Symfony UX provides foundations like Symfony does in PHP by providing a structure and helpers. I don't think we should be tied to any CSS framework, it makes little sense IMO. There isn't much CSS in UX packages and I intend to keep it this way.
Unless I'm missing something important, I don't think I'd be in favor of linking UX to any specific CSS framework.
For specific UX packages on the other end, we could provide a way to configure them to use a Tailwind notation, like Forms. That could be useful for Dropzone for instance. I'd be open to review such a PR. We wild need to support Bootstrap too though: that would give us more flexibility.
from ux.
UX components need styling/layout and using Tailwind to set the layout would make editing/configuring those UX components simple. If you want to set widths or grid alignments and transformations, Tailwind makes those very simple and intuitive.
I think maybe I misunderstood what it is you are trying to do. I thought you are trying to provide a set of components for building data tables and dashboard components like graphs, menus etc. (Symfony is missing a UI component library as well)
Stimulus is a very barebones JS library for scripting Event responses and data integration (pagination, navigation, ui components). It is not meant for building web apps like React is. It is more like an event handler. I believe Symfony already has a stimulus bridge and it was suggested in the WYSIWYG editor thread.
Alpine JS is very similar to Stimulus and is being offered as a Tailwind integration. So if you look at some of the component examples you can see how easy it can be to style things with tailwind. AlpineJS is NOT READY yet (will it ever?) though. I wasted several weeks trying to make it work but sadly it is missing very important features and has terrible documentation. It is also based on hacks and not conforming to web specs.
Here is a UI component demo using stimulus and tailwind
Github
Even Better example of the 2 working together
If you wanted to build a bar graph you could use tailwind to make a multi row/column grid and use stimulus to change the styles adjusting the lengths of the bar simply by changing the width or height values. Same for pie charts by changing rotations or transform values. If there is interest I can knockup a demo later.
from ux.
Tailwind CSS can indeed be integrated with any project, but I fail how this relates to Symfony UX? Can you demonstrate how Stimulus can help?
from ux.
You are right I misunderstood the purpose of this component. I saw the charting examples etc. and thought you wanted to make actual components but after reading more of the scope, I see it is more about the JS parts of the interaction.
Although I believe the JS ecosystem is so massive (a mess really) there is a solution for pretty much everything on that end as well. Projects like backbonejs for example does event handlers and D3 can make data components of all kinds.
The reason I would argue for using a single UI system is because there is a lot of work in making the php backend work together with the JS frontend on the client side and then building out components that work with those. It provides a clear way forward just as using doctrine gives a clear way of how to work with data or twig does for templates.
Right now the API platform admin uses React for the admin which needs to be integrated into EasyAdmin or Symfony. Having 1 officially supported system means that there is unity and compatibility across the entire ecosystem just as twig is used by everything. It also makes templating with twig easier when there is a component library for creating data tables and such.
Anyway obviously this is the wrong place to discuss all of this, so I guess you can close the thread.
from ux.
Right now the API platform admin uses React for the admin which needs to be integrated into EasyAdmin or Symfony
Symfony UX does help a lot on this level already: by using controllers and entrypoints, API Platform will be able to provide a plug and play react-admin context. It's not the case yet but we already discussed it with the persons involved. UX helps here by providing the ability to wire JS packages from vendors into the project seamlessly, allowing Flex recipes to rely on JS declared in vendors.
Also, note that Stimulus is a tiny foundational layer, the equivalent of Twig for JS: it provides the basics for JS behaviors to be reusable across projects and vendors, and it does only this. Inside a Stimulus controller, you can then use React, Vue, Backbone, ..., or vanilla JS as you prefer. There is no limitation there, just as there isn't any to use the CSS framework you like.
Anyway obviously this is the wrong place to discuss all of this, so I guess you can close the thread.
I'm closing this ticket but if you are interested in looking into the concept of adding reusable UI components to Symfony UX, I'd recommend you to check the internals of UX. It can be a bit tricky (I can help, come on symfony.com/slack and ping me on the ux channel) but it will give you a better overview of the initiative.
I do think there are interesting ideas to have regarding components, but I think these components should be kept small (Dropzone, Color picker, Date selector, ...). Perhaps they would benefit from having a CSS framework integration, I'd be happy to think about it on Slack :) .
from ux.
Related Issues (20)
- [TwigComponent] Missleading doc between `Passing & Rendering Attributes` and `PreMount validation` HOT 21
- [LiveComponent] Transition to TypeInfo (fix 7.1 deprecations)
- [Site] Few visual bugs (Perfect for a first PR)
- Request for renovatebot Support for @symfony/ux-* Packages HOT 1
- [TwigComponent] Autodiscover from bundles HOT 2
- [Icons] Icons with 2 (alias) names are not found HOT 1
- [Autocomplete] No AJAX requests are being made HOT 7
- ux-react can not run with assetmapper HOT 3
- Unused images HOT 4
- Assets that do not use AssetMapper HOT 2
- [LiveComponent] Set value on LiveCollectionField HOT 3
- [LiveComponent] How to target the "__invoke" action in data-loading attribute? HOT 1
- [LiveComponent] Files validation HOT 13
- [LiveComponent] Exposing public objects via emit() HOT 3
- [LiveComponent] [ChartJS] Updating a parent component triggers its re-render and throws the error Canvas is already in use in console HOT 1
- [Site] Infinite Scroll - Remove wrapper HOT 6
- [TwigComponent] Translation domain not passed to component content when defined in template HOT 3
- [LiveComponent] Live component will not render depending on Twig invocation syntax HOT 27
- Cannot use attributes. HOT 12
- [TwigComponent] Parser fails on Twig tags within attributes HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ux.