tailwindlabs / tailwindcss Goto Github PK
View Code? Open in Web Editor NEWA utility-first CSS framework for rapid UI development.
Home Page: https://tailwindcss.com/
License: MIT License
A utility-first CSS framework for rapid UI development.
Home Page: https://tailwindcss.com/
License: MIT License
Margin auto
utilities are not documented yet. There's only one mention on the Container section.
Since the auto
doesn't apply to other spacing utilities I'm not so sure how you want to present that info, otherwise I would have submitted a PR.
Hey guys, first of all, I appreciate all of your great work on Tailwind!
Down to business: When I use the list-reset
utility class, it is overriding any padding/margin utilities that I want to add. I obviously haven't thought through this as much as y'all, but I would think it would be best for any override/reset utilities to be automatically overwritten by other Tailwind utilities. I doubt anyone putting list-reset
and p-top-4
on a list element is expecting anything other than an element with no styling except some top padding.
Again, great work, and let me know if I'm just thinking wrong about this!
I don't know if i missed something with my setup but I am getting
.appearance-none {
appearance: none;
}
When i look at the tailwind docs
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
So the defaultConfig .font-sans
font stack doesn't have sans-serif
as the last fallback.
Although be unlikely that every font is missing, but if so the font stack actually falls back to Times New Roman on Chrome and Firefox (and most likely others).
ps.: Actually the only windows default in the list is Segoe UI.
Ah yes, the dreaded first issue! Fortunately more of a question/discussion point than anything.
Is there a best way to use Tailwind with Vue single file components? It would be really nice to keep those one-off styles or component styles inside Vue components themselves, but the tricky part is getting component CSS between the preflight and utilities lines.
The only thing I can think of is to have 2 files โ The first file would just contain @tailwind preflight;
, and the second would have @tailwind utilities;
+ any custom utilities users want. In Laravel Mix, if we use the extractVueStyles
option, that should extract the Vue component styles at the top of the second file, which is what we want. We could then use Mix's combine()
function to join 'em together.
Last I suppose we'd have to add Tailwind to vue-loader
's PostCSS options.
Nevermind, all PostCSS plugins in Mix apply to Vue component styles as well, no need to do it manually. ๐
I haven't had a chance to actually test this approach but I figured I'd gather some thoughts in case there's a better way.
Edit Again: Ok! I tested the above approach and it seems to work great. My Vue styles get injected in the right spot, and I'm also able to successfully use Tailwind functions (config
, @apply
, etc) inside my Vue components. ๐
Hey there,
I'm currently building my first site with Tailwind and it seems that i will finish it tomorrow
(which was really, really fast).
One kind of utilitis I was missing so far was order
.
Especially with responsive helpers.
I like that quite a lot for reordering items on desktop or mobile for different viewports.
I'm quite sure you thought about that and you have a reason why you didn't add them. Would you mind sharing your thoughts? As far as I know it's safe to use (or am I wrong).
If they should be added, I suggest adding order
from 1
to 5
including responsive utilities. (I don't care about a few more bytes here as we will later find a solution for the component based approach mentioned in #27 (comment)
Hello.
Adding "auto" suffix to margin vertical utilites can be usefull with flexbox:
<div class="h-half bg-grey-lighter flex">
<div class="ml-auto flex flex-col justify-end p-12 text-right">
<h2 class="my-auto text-5xl font-extrabold uppercase">Centered on rest block</h2>
<a href="#" class="ml-auto bg-brand text-white w-64 py-3 no-underline text-center font-sans font-medium tracking-wide rounded-xl">Some button text</a>
</div>
</div>
Hi,
I noticed that the class name dot is facultative when use with the @apply directive.
.foo {@apply .text-white;}
.foo {@apply text-white;}
Both are working but should we stick with the dot syntax or can we safely use both ?
Has anyone tried using the @screen
directive? Doesn't seem to reflect in the compiled CSS. Here is what I'm trying to do:
.main-nav .nav-item {
@apply .inline-block .uppercase .font-bold .mr-4 .pb-3 .border-b-4 .border-transparent;
@screen sm {
@apply .block;
}
}
The first @apply
rules work but the @screen directive does not reflect.
Thanks!
@reinink I like that sentence you wrote in #84
This is breaking change, and shouldn't be merged in until the next breaking release.
Since atm this is alpha software I wasn't sure if there is something like a BC promise.
Seems you plan to comply to SEMVER? Even for Alpha, or is 1.0.0 the next BC-Break?
Maybe we should document a "Update"-Chapter where the update-process for tailwind is described. There would be place to explain the difference ^1.0.0
vs ~1.0.0
and the impact on the project.
e.g. if you use ^1.0.0
filesize of a newer version could increase with yarn upgrade
.
Many users are be that experienced, so a little explanation and a link to https://docs.npmjs.com/getting-started/semantic-versioning could be nice.
Also there is a place for writing down the BC-promise.
Naming is a bit weird here, if you add print-styles like mentioned in https://tailwindcss.com/docs/responsive-design/#print-screens combined with the @screen
directive.
https://tailwindcss.com/docs/functions-and-directives#screen
This would result in @screen print
which is weird.
I have no better name, maybe @named-media print
or something like that?
Or is there a better way already baked in?
This is just a minor quirks in a great framework.
Wenn done, well done!
The version number on the homepage (Version 0.1.0 - Alpha) doesn't match the latest release (v0.1.2).
Hello all!
Just tried TailwindCSS and It's perfect, but I think that borders should be able to be combined with hover:
preffix.
Here is sample. Task make link underline dashed:
<a href="#" class="no-underline border-b hover:border-b-0">Text link</a>
Similar approach with manipulating borders are used on https://laravel.com/ nav menu
It would be nice if there was some where in docs a way how to build tailwindcss with webpack.
The documentation mentions the color 'smoke', which I presume is a translucent black/grey color. Most notable .bg-smoke
, but I've found some more sprinkled around.
Since it's not an actual value in the default config, I was wondering if it's missing or removed on purpose.
Enjoying working with the release, good work!
I'd like to propose triggering a rebuild when the config file (tailwind-config.js
) is updated if a build tool is being used โ ie. webpack.
Basically in the same way as a new build is triggered when you update a css/sass/js file. It would mean that modifications can be made to the config file without having to halt and restart npm watch
for instance.
Hey there,
I love my utilities to be marked as !important
because i've seen some people overwriting utilities (which is more than bad). If specitifity of e.g. a bem-item is higher the utility gets overridden.
.mx-auto { โฆ }
/* this is not good, but happens from time to time. If i mark my utilities as important, this will not work and the user MUST remove the class mx-auto from the html */
.card > .card__image {
margin-left: 10px;
}
<div class="card">
<div class="card__image mx-auto">
<img โฆ />
</div>
</div>
I've written a tiny postcss plugin for marking utilities important.
https://www.npmjs.com/package/postcss-important-startstop
The plugin is based on comments in the css.
It's not the only postcss plugin which does so.
If i try to use it with tailwindcss, the @tailwind utilities
can be marked important by using
/* @important(start) */
@tailwind utilities;
/* @important(stop) */
This works like a charm.
The problem is, that the custom utilities are added to the end of the css-file magically.
So this happens:
/* @important(start) */
@tailwind utilities;
/* @important(stop) */
/**
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
*/
.bg-hero-image {
background-image: url('/some/image/file.png');
}
results in this:
I have no chance to modify the "custom utilities" with my comment-based plugin.
Is it somehow possible to "remove the magic" and render the custom utilities with something like that?
@tailwind custom-utilities;
WDYT?
Can you add outline
property?
It's very useful when building forms to have an outline: none;
attribute :)
With a fresh Laravel install and a fresh Tailwind install.
I have a simple app.scss with only two lines:
@tailwind preflight;
@tailwind utilities;
And a webpack.mix.js with a few lines:
let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
postCss: [
tailwindcss('./tailwind.js'),
]
});
My tailwind.js
is the default one.
When I run npm run build
, it "works" (I have a CSS built and I can use it) but I displays a warning (I don't have this warning without tailwind)
WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/XXXXXX/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
/XXXXXX/resources/assets/sass/app.scss:3:316: missing '{'
at error (/XXXXXX/node_modules/css/lib/parse/index.js:62:15)
@ ./resources/assets/sass/app.scss 4:14-266
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Don't know why. Any clue?
I really like the potential of tailwind regarding transitioning from utility to component-based styles. Therefore I'm wondering if or how it might be possible to prevent certain utility classes to be emitted (potentially only in prod builds) while mostly relying on @apply
and other postcss functions of tailwind.
Hey,
Everything works fine until I decided to use components as it's said in the documentation.
Compiling failed :
ERROR Failed to compile with 2 errors 12:41:50 PM
error in ./resources/assets/sass/app.css
Module build failed: ModuleBuildError: Module build failed: Syntax Error
(2:3) No .text-white class found.
1 | .btn {
> 2 | @apply .text-white;
| ^
3 | }
4 |
at runLoaders (/Users/thomas/Sites/cdsud/www/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/thomas/Sites/cdsud/www/node_modules/postcss-loader/lib/index.js:185:44)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
@ multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/app.css
error in ./resources/assets/sass/app.css
Module build failed: ModuleBuildError: Module build failed: Syntax Error
(2:3) No .text-white class found.
1 | .btn {
> 2 | @apply .text-white;
| ^
3 | }
4 |
at runLoaders (/Users/thomas/Sites/cdsud/www/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/thomas/Sites/cdsud/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/thomas/Sites/cdsud/www/node_modules/postcss-loader/lib/index.js:185:44)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
My wepback.mix.js
:
let mix = require('laravel-mix');
let tailwind = require('tailwindcss');
mix.postCss('./resources/assets/sass/app.css', './public/css/main.css', [tailwind('./tailwind.js')]).disableNotifications();
... and app.css
:
@tailwind preflight;
@import "./components/buttons.css";
@tailwind utilities;
@import './main.css';
@import './admin.css';
What's wrong? :/
Description
The line-height
property on html
element is altering the element heights.
There is a workaround that works for me. If I set line-height
to 0
on the html
element, it is solves the issue but I think this should be fixed on the core.
Reproduction
To show you up what I am talking about, I created a parent div
with a background color which contains a img
.
<div class="bg-blue">
<img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?auto=format&fit=crop&w=200" alt="Cat">
</div>
Expected
It should not alter the height of my div
at all. In other words, the blue area should not appear.
How about adding a helper to add/remove outline?
I am currently facing a situation where I want to remove the focus outline of an input field and, AFAIK, there aren't utilities for this on Tailwind...
Hey,
I've got more a question than an issue about the border utilities behaviour.
<nav class="border-t-2 lg:border-t-0 lg:border-r-2 border-smoke-dark lg:border-smoke-dark"></nav>
Do I necessarily have to include the border color again for the specific screens ?
Because if I don't it shows to the default border color.
Thanks a lot.
I like my utility classes prefixed with .u-
, would be nice if it was possible to configure a prefix for the whole library.
Hello,
I like to have sidebar like TailWindCSS.
How can I have it?
In our internal utility framework I've gotten quite used to enjoying .p-2
and .m-2
helpers that set both x and y axes identically. Any chance of bringing that in in?
Hi @adamwathan, @reinink & @davidhemphill!
Really enjoying Tailwind already and hoping to help you guys as much as I can. ๐
My suggestion is that we can choose the version of the docs, like you can on the Laravel docs site (with a <select>
).
Let it redirect automatically to the latest version, but also have a master
option, where we can see the latest changes.
This would make things easier when referring to the docs in issues for example. ๐
Right now we always see master
, which can be confusing sometimes.
Definitely when the first major release will come and Tailwind will be used in multiple versions I think.
Keep up the good work guys! ๐
Hello, could you explain how tailwind differs from Atomic CSS (http://acss.io)?
Are there any fundamental design differences that led to you creating something different rather than using an existing utility framework such as Atomic?
May also be good to link to 'prior art' such as Atomic in this respect within the docs?
I'm trying to include a component. In the comments of the "bootstrap file" @import
is used.
This is not a funcionality provided by tailwind or is it?
I expect that I have to add postcss-import
to my workflow.
Am I wrong or are the docs wrong here?
If i import a file like dokumented i get an error.
/**
* This injects Tailwind's base styles, which is a combination of
* Normalize.css and some additional base styles.
*
* You can see the styles here:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*/
@tailwind preflight;
/**
* Here you would import any custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities can still
* override them.
*
* @import "my-components/foo";
* @import "my-components/bar";
*/
@import "my-components/bar"; /*I added this one*/
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*/
@tailwind utilities;
And here the error:
@import must precede all other statements (besides @charset)
What am I doing wrong?
or as we call them in Tailwind, leadings
and
or as we call them in Tailwind, tracking
while beeing a correct name, it's not really intuitive IMO.
We are all comfortable with developing in css and over the years line-height
and letter-spacing
became familiar to everyone an I do not really see the point in renaming that thing while the CSS-Spec contains line-height
and letter-spacing
.
What was your point in that, maybe I've overseen it?
I have been waiting to get my hands dirty with tailwind, and just started playing around with it! I like it so far, but it does take some getting used to.
One of the utilities I am missing is hover:shadow
since there are cases where we want to only have a shadow when hovering.
Now I know that I can add that utility myself pretty easily, but I thought that it is a fairly common thing to do, so might as well be considered to be added to the core.
The docs use single line comments //
https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css
If somebody c&p this in his css he will get the following error if someone does not use https://github.com/moczolaszlo/postcss-inline-comment
I'd suggest to remove single line comments from the docs?
Currently when I run ./node_modules/.bin/tailwind init [filename]
as shown in the docs, I must append the file extension.
Wouldn't it be more user friendly if the file extension was automatically added? Like run ./node_modules/.bin/tailwind init tamilwind-config
would result in a tailwind-config.js
file?
Hey there,
i failed in code-style in #89
Would you mind adding ESlint to the build chain, so collaborators are warned if the're failing?
Maybe we can automate tests and linting and use travisci or smt like that?
Even with Admin console, I am not able to install on Windows 10.. here is the end of log file showing the error:
2367 verbose unlock done using C:\Users\Lenovo\AppData\Roaming\npm-cache\_locks\staging-9cbdc18e1ec36efa.lock for C:\Users\Lenovo\source\tt\node_modules\.staging
2368 verbose stack Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2368 verbose stack at Error (native)
2369 verbose cwd C:\Users\Lenovo\source\tt
2370 verbose Windows_NT 10.0.16299
2371 verbose argv "C:\\nodejs\\node.exe" "C:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "tailwindcss" "--save-dev"
2372 verbose node v6.11.2
2373 verbose npm v5.4.0
2374 error path C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json
2375 error code EPERM
2376 error errno -4048
2377 error syscall unlink
2378 error Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2378 error at Error (native)
2378 error { Error: EPERM: operation not permitted, unlink 'C:\Users\Lenovo\source\tt\node_modules\fsevents\node_modules\ansi-regex\package.json'
2378 error at Error (native)
2378 error stack: 'Error: EPERM: operation not permitted, unlink \'C:\\Users\\Lenovo\\source\\tt\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json\'\n at Error (native)',
2378 error errno: -4048,
2378 error code: 'EPERM',
2378 error syscall: 'unlink',
2378 error path: 'C:\\Users\\Lenovo\\source\\tt\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json' }
2379 error Please try running this command again as root/Administrator.
2380 verbose exit [ -4048, true ]
Wow, you really got me hooked on the utility first approach. It's really neat, and Tailwind is fantastic.
One thing I've stumbled upon while integrating it in an existing project (to slowly move much stuff over to utilities) is that an option to disable certain utilities would be really valuable.
For example, in my project, I have a .container
class defined in my stylesheet. Since the tailwind utilities load after my already defined components, Tailwind overwrites these styles.
While most of the time one would start off with this on a fresh codebase, for me having the ability to disable utilities like that would be great.
Again, fantastic job on Tailwind. Congrats to all contributors!
First of all, thanks for this great project, I've been waiting for this since ages!
I don't know if I'm reporting this in the correct place, but my problem is this: if in my component I @apply
a class that does not exist, I get an error such as:
ERROR in ./css/app.css
Module build failed: ModuleBuildError: Module build failed: Syntax Error
(3:3) No .foo class found.
and my webpack watch breaks, and does not pick up further changes until I stop and restart webpack.
I think it's because of Tailwind's implementation of @apply
, which completely break the webpack watcher until the error is fixed and webpack restarted.
Any easy workaround for the time being? It's a bit frustrating to stop and restart webpack everytime I add a typo in my components.
How can I help?
Hey guys! Awesome project you have here!
I just noticed that your search isn't ready yet? Would you be interested to use our service to perform search on your documentation?
We do have a product just for that! It's called DocSearch and it's free :)
It already has been adopted by Bootstrap, Middleman, Facebook ( React ), Vue.js, Laravel and a lot more!
If you are interested, I can definitely set it up for you and send you a pull-request ๐
Let me know what you think!
Best,
Lucas.
I think more example would help people to dive into tailwind. Maybe a navbar could be a good start.
Hi, I'm just wondering what are peoples' thoughts about perhaps including some transition-based utility classes?
Nothing too complex, just to cover some common use-cases, eg. smooth hover state transitions on buttons etc. If so, what kind of syntax would you expect to use to keep in line with Tailwind's current naming conventions?
Support for display: grid;
and its props would be swell.
Hey guys, really exciting to see this thing finally released! Congrats!
I noticed the tailwind CLI version doesn't match the version of the package installed.
โ tailwindtest npm list --depth=0
[email protected] /Users/aaemnnosttv/Code/tailwindtest
โโโ [email protected]
โ tailwindtest node_modules/.bin/tailwind -V
0.1.0
I realize this is due to being hardcoded in the CLI but not sure how this is normally handled for node CLI apps. Perhaps it should just be written to a file at build-time that the CLI refers to?
Is it possible to provide a way to override the various class name definitions for each property?
For example, I'd like to use:
.font-colour-black
instead of .text-black
.line-height-none
instead of .leading-none
I imagine you could have a new object in the configuration file which could look something like below, which would override the default class name prefixes.
classPropertyPrefixes: {
'text': 'font-colour',
'leading': 'line-height'
},
UPDATE 6th Nov 2017: Maybe adopt the naming convention used by Emmet https://docs.emmet.io/cheat-sheet (scroll down to the CSS section)?
First of all great work @adamwathan, @reinink, @davidhemphill & Steve Schoger!
Really great framework and it's only in alpha, so I'm excited to see the 1.0 release! ๐
When navigating through the docs, I think it could be handy if we can see the version number and the GitHub link in the sidebar, like we have on the main page.
Maybe beneath the logo?
Since Twitter-link is also on the main page, you can add it also to the sidebar?
Just a rapid thought.
Keep up the good work guys! ๐
I put the following in my .scss
file:
.btn {
@apply .font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
@apply .bg-blue .text-white;
}
.btn-blue:hover {
@apply .bg-blue-dark;
}
and after running webpack I can use the classes but I get the following error at the end of the build process:
WARNING in ./node_modules/css-loader?{"url":true,"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"postcss","plugins":[{"version":"6.0.13","plugins":[null,null,null,null,null,null,null,null,null],"postcssPlugin":"tailwind","postcssVersion":"6.0.13"},null,null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root":"/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules"}!./node_modules/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","includePaths":["./node_modules/foundation-sites/scss/","./node_modules/font-awesome/scss/","./node_modules/motion-ui/","./node_modules/video.js/src/css/"],"sourceMap":true}!./sass/styles.scss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/sass/styles.scss:6698:3: missing '}'
at error (/home/vagrant/gitlab/resources/statamic-site-template/public/site/themes/foundation/node_modules/css/lib/parse/index.js:62:15)
@ ./sass/styles.scss 4:14-245
@ multi ./node_modules/jquery/dist/jquery.min.js ./node_modules/what-input/dist/what-input.min.js ./node_modules/foundation-sites/dist/js/foundation.min.js ./node_modules/motion-ui/motion-ui.js ./node_modules/video.js/dist/video.min.js ./sass/styles.scss
When I remove @apply
the build process completes without error.
Tailwind is such a good concept! I love to use it in the future :)
Thanks for your hard work!!
Using Tailwind CLI for simple projects or just giving Tailwind a spin is a great idea too, but it don't work for me. The build command makes the output to the shell, not in a file. The command and file structure is the same like in the documentation.
Is it only on my computer or is it a bug?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.