example: Added with-tailwindcss example
ADD
examples/with-tailwindcss/app.tsx
+import React from 'react';
+
+export function rootContainer(container: any, opts: any) {
+ return React.createElement(Foo, opts, container);
+}
+
+export function innerProvider(container: any) {
+ return React.createElement(Foo, { title: 'innerProvider' }, container);
+}
+
+export function i18nProvider(container: any) {
+ return React.createElement(Foo, { title: 'i18nProvider' }, container);
+}
+
+export function dataflowProvider(container: any) {
+ return React.createElement(Foo, { title: 'dataflowProvider' }, container);
+}
+
+export function outerProvider(container: any) {
+ return React.createElement(Foo, { title: 'outerProvider' }, container);
+}
+
+function Foo(props: any) {
+ return <div>{props.children}</div>;
+}

ADD
examples/with-tailwindcss/favicon.png
examples/with-tailwindcss/favicon.png
Binary files /dev/null and b/examples/with-tailwindcss/favicon.png differ

ADD
examples/with-tailwindcss/images/tailwindcss.png
examples/with-tailwindcss/images/tailwindcss.png
Binary files /dev/null and b/examples/with-tailwindcss/images/tailwindcss.png differ

ADD
examples/with-tailwindcss/images/umi.png
examples/with-tailwindcss/images/umi.png
Binary files /dev/null and b/examples/with-tailwindcss/images/umi.png differ

ADD
examples/with-tailwindcss/package.json
+{
+ "scripts": {
+ "build": "umi build",
+ "dev": "umi dev",
+ "start": "npm run dev"
+ },
+ "dependencies": {
+ "postcss-loader": "6.2.1",
+ "style-loader": "^3.3.1",
+ "tailwindcss": "^3.0.15",
+ "umi": "4.0.0-beta.16"
+ }
+}

ADD
examples/with-tailwindcss/pages/index.tsx
+import React from 'react';
+import '../tailwind.css';
+
+export default function HomePage() {
+ return (
+ <div className="w-full flex flex-row justify-center pb-16">
+ <div className="container">
+ <div className="w-full">
+ <div className="flex flex-row items-center justify-center py-6 pt-48">
+ <img
+ src={require('../images/umi.png')}
+ className="w-12 h-12"
+ alt=""
+ />
+ <p className="text-xl mx-4">x</p>
+ <img
+ src={require('../images/tailwindcss.png')}
+ className="w-12 h-12"
+ alt=""
+ />
+ </div>
+ <h1 className="text-center"></h1>
+ </div>
+ <h1
+ className="text-slate-900 font-extrabold text-4xl sm:text-5xl lg:text-6xl
+ tracking-tight text-center dark:text-white"
+ >
+ UmiJS
+ <span className="mx-4">x</span>
+ TailwindCss
+ </h1>
+ <p
+ className="mt-6 text-lg text-slate-600 text-center
+ max-w-3xl mx-auto dark:text-slate-400"
+ >
+ This is an example using
+ <a
+ className="mx-2 text-cyan-500"
+ href="https://umijs.org/zh-CN"
+ target="_blank"
+ rel="noreferrer"
+ >
+ UmiJS
+ </a>
+ with
+ <a
+ className="mx-2 text-cyan-500"
+ href="https://tailwindcss.com/"
+ target="_blank"
+ rel="noreferrer"
+ >
+ TailwindCss
+ </a>
+ .
+ </p>
+ <div className="w-full bg-gray-50 p-16 mt-16 rounded-2xl">
+ <p className="text-slate-900 font-extrabold text-4xl mb-4">
+ Examples
+ </p>
+
+ <div className="flex flex-row my-16">
+ <p className="text-slate-900 font-bold text-2xl w-1/3">Text Size</p>
+ <div>
+ <p className="text-xs">text-xs</p>
+ <p className="text-sm">text-sm</p>
+ <p className="text-base">text-base</p>
+ <p className="text-lg">text-lg</p>
+ <p className="text-xl">text-xl</p>
+ <p className="text-2xl">text-2xl</p>
+ <p className="text-3xl">text-3xl</p>
+ </div>
+ </div>
+
+ <div className="flex flex-row my-16">
+ <p className="text-slate-900 font-bold text-2xl w-1/3">
+ Text Color
+ </p>
+
+ <div>
+ <p className="text-red-300">text-red-300</p>
+ <p className="text-blue-600">text-blue-600</p>
+ <p className="text-green-300">text-green-300</p>
+ <p className="text-pink-400">text-pink-400</p>
+ </div>
+ </div>
+
+ <div className="flex flex-row my-16">
+ <p className="text-slate-900 font-bold text-2xl w-1/3">Sizes</p>
+ <div>
+ <div className="bg-white w-24 p-4 shadow-2xl rounded-2xl my-4">
+ w-24
+ </div>
+ <div className="bg-white w-36 p-4 shadow-2xl rounded-2xl my-4">
+ w-36
+ </div>
+ <div className="bg-white w-64 p-4 shadow-2xl rounded-2xl my-4">
+ w-64
+ </div>
+ <div className="bg-white w-96 p-4 shadow-2xl rounded-2xl my-4">
+ w-96
+ </div>
+ </div>
+ </div>
+
+ <div className="flex flex-row my-16">
+ <p className="text-slate-900 font-bold text-2xl w-1/3">
+ Animations
+ </p>
+
+ <section className="p-10 flex md:flex-row items-center justify-start flex-wrap sm:flex-col">
+ <div className="animate-spin h-32 w-32 relative m-10">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="animate-pulse h-32 w-32 relative m-10">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="animate-ping h-32 w-32 relative m-10">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="animate-bounce h-32 w-32 relative m-10">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div className="flex flex-row my-16">
+ <p className="text-slate-900 font-bold text-2xl w-1/3">
+ Hover Animations
+ </p>
+
+ <section className="p-10 flex md:flex-row items-center justify-start flex-wrap sm:flex-col">
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:scale-75 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:rotate-90 hover:scale-75 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:rotate-45 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:-rotate-45 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform origin-left hover:-rotate-45 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:-translate-x-10 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+
+ <div className="absolute inset-0 transform hover:rotate-90 hover:translate-x-full hover:scale-150 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+
+ <div className="h-32 w-32 relative cursor-pointer m-5">
+ <div className="absolute inset-0 bg-white opacity-25 rounded-lg shadow-2xl" />
+ <div className="absolute inset-0 transform hover:skew-y-12 transition duration-300">
+ <div className="h-full w-full bg-white rounded-lg shadow-2xl" />
+ </div>
+ </div>
+ </section>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}

ADD
examples/with-tailwindcss/postcss.config.js
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ }
+}

ADD
examples/with-tailwindcss/readme.md
+# with-tailwindcss
+
+An example of using [UmiJS](https://umijs.org/zh-CN) with [Tailwindcss](https://tailwindcss.com/).

ADD
examples/with-tailwindcss/tailwind.config.js
+module.exports = {
+ content: [
+ './pages/**/*.tsx',
+ ],
+}

ADD
examples/with-tailwindcss/tailwind.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

example: Added with-tailwindcss example (#274)