├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── package.json
├── postcss.config.js
├── public
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── index.html
    └── tailwind.css
├── sandbox.config.json
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/build
3 | yarn.lock
4 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["bradlc.vscode-tailwindcss"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind CSS Playground
 2 | 
 3 | A simple starter project for playing around with Tailwind in a proper PostCSS environment.
 4 | 
 5 | To get started:
 6 | 
 7 | 1. Clone the repository:
 8 | 
 9 |     ```bash
10 |     git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
11 | 
12 |     cd tailwindcss-playground
13 |     ```
14 | 
15 | 2. Install the dependencies:
16 | 
17 |     ```bash
18 |     # Using npm
19 |     npm install
20 | 
21 |     # Using Yarn
22 |     yarn
23 |     ```
24 | 
25 | 3. Start the development server:
26 | 
27 |     ```bash
28 |     # Using npm
29 |     npm run serve
30 | 
31 |     # Using Yarn
32 |     yarn run serve
33 |     ```
34 | 
35 |     Now you should be able to see the project running at localhost:8080.
36 | 
37 | 4. Open `public/index.html` in your editor and start experimenting!
38 | 
39 | ## Building for production
40 | 
41 | Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.
42 | 
43 | To build an optimized version of your CSS, simply run:
44 | 
45 | ```bash
46 | # Using npm
47 | npm run production
48 | 
49 | # Using Yarn
50 | yarn run production
51 | ```
52 | 
53 | After that's done, check out `./public/build/tailwind.css` to see the optimized output.
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\"  \"live-server ./public\"",
 4 |     "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css",
 5 |     "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css",
 6 |     "start": "npm run serve"
 7 |   },
 8 |   "dependencies": {
 9 |     "@tailwindcss/ui": "^0.4.0",
10 |     "autoprefixer": "^9.5.1",
11 |     "tailwindcss": "^1.5.2"
12 |   },
13 |   "devDependencies": {
14 |     "@fullhuman/postcss-purgecss": "^1.2.0",
15 |     "concurrently": "^4.1.0",
16 |     "cross-env": "^5.2.0",
17 |     "cssnano": "^4.1.10",
18 |     "live-server": "^1.2.1",
19 |     "postcss-cli": "^6.1.2"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [require('tailwindcss'), require('autoprefixer')],
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamwathan/tailwind-animation-playground/f1f14b3daa46ca1d5d9c3d43d962f8ddc7a8e0db/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamwathan/tailwind-animation-playground/f1f14b3daa46ca1d5d9c3d43d962f8ddc7a8e0db/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adamwathan/tailwind-animation-playground/f1f14b3daa46ca1d5d9c3d43d962f8ddc7a8e0db/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  6 |     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  7 |     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  8 |     <link rel="stylesheet" href="/build/tailwind.css" />
  9 |     <title>Tailwind CSS Animation Demo</title>
 10 |   </head>
 11 |   <body class="antialiased">
 12 |     <div class="p-24 space-y-12">
 13 |       <div class="flex space-x-12">
 14 |         <div>
 15 |           <p class="text-center text-sm leading-5 text-gray-600 mb-2">
 16 |             Spin
 17 |           </p>
 18 |           <span class="inline-flex rounded-md shadow-sm">
 19 |             <button
 20 |               type="button"
 21 |               class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
 22 |             >
 23 |               <svg
 24 |                 class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
 25 |                 xmlns="http://www.w3.org/2000/svg"
 26 |                 fill="none"
 27 |                 viewBox="0 0 24 24"
 28 |               >
 29 |                 <circle
 30 |                   class="opacity-25"
 31 |                   cx="12"
 32 |                   cy="12"
 33 |                   r="10"
 34 |                   stroke="currentColor"
 35 |                   stroke-width="4"
 36 |                 />
 37 |                 <path
 38 |                   class="opacity-75"
 39 |                   fill="currentColor"
 40 |                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 41 |                 />
 42 |               </svg>
 43 |               Button text
 44 |             </button>
 45 |           </span>
 46 |         </div>
 47 |         <div>
 48 |           <p class="text-center text-sm leading-5 text-gray-600 mb-2">
 49 |             Ping
 50 |           </p>
 51 |           <span class="relative inline-flex rounded-md shadow-sm">
 52 |             <button
 53 |               type="button"
 54 |               class="inline-flex items-center px-4 py-2 border border-gray-300 text-base leading-6 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150"
 55 |             >
 56 |               Button text
 57 |             </button>
 58 |             <div class="flex absolute top-0 right-0 -mt-0.5 -mr-1">
 59 |               <span class="absolute inline-flex animate-ping">
 60 |                 <span class="inline-flex rounded-full h-3 w-3 bg-pink-400 opacity-75"></span>
 61 |               </span>
 62 |               <span class="relative inline-flex rounded-full h-3 w-3 bg-pink-500"></span>
 63 |             </div>
 64 |           </span>
 65 |         </div>
 66 |         <div>
 67 |           <p class="text-center text-sm leading-5 text-gray-600 mb-2">
 68 |             Bounce
 69 |           </p>
 70 |           <div class="flex justify-center py-2.5 w-40">
 71 |             <svg
 72 |               class="animate-bounce w-6 h-6 text-gray-900"
 73 |               fill="none"
 74 |               stroke-linecap="round"
 75 |               stroke-linejoin="round"
 76 |               stroke-width="2"
 77 |               viewBox="0 0 24 24"
 78 |               stroke="currentColor"
 79 |             >
 80 |               <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
 81 |             </svg>
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 |       <div class="flex space-x-12">
 86 |         <div>
 87 |           <p class="text-center text-sm leading-5 text-gray-600 mb-2">
 88 |             Fade
 89 |           </p>
 90 |           <div class="border border-gray-200 shadow rounded-md p-4 w-96">
 91 |             <div class="flex space-x-4 animate-fade">
 92 |               <div>
 93 |                 <div class="rounded-full bg-gray-300 h-12 w-12"></div>
 94 |               </div>
 95 |               <div class="flex-1 space-y-4 py-1">
 96 |                 <div class="h-4 bg-gray-300 rounded w-3/4"></div>
 97 |                 <div class="space-y-2">
 98 |                   <div class="h-4 bg-gray-300 rounded"></div>
 99 |                   <div class="h-4 bg-gray-300 rounded w-5/6"></div>
100 |                 </div>
101 |               </div>
102 |             </div>
103 |           </div>
104 |         </div>
105 |       </div>
106 |     </div>
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/public/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | 
4 | @tailwind utilities;
5 | 
6 | @tailwind screens;
7 | 


--------------------------------------------------------------------------------
/sandbox.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "template": "node"
3 | }
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const plugin = require('tailwindcss/plugin')
 2 | 
 3 | module.exports = {
 4 |   purge: ['./public/index.html'],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   variants: {},
 9 |   plugins: [
10 |     require('@tailwindcss/ui'),
11 |     plugin(
12 |       function ({ addBase, addUtilities, theme, variants, e }) {
13 |         const keyframesConfig = theme('keyframes')
14 |         const keyframesStyles = Object.fromEntries(
15 |           Object.entries(keyframesConfig).map(([name, keyframes]) => {
16 |             return [`@keyframes ${name}`, keyframes]
17 |           })
18 |         )
19 |         addBase(keyframesStyles)
20 | 
21 |         const animationConfig = theme('animation')
22 |         const utilities = Object.fromEntries(
23 |           Object.entries(animationConfig).map(([suffix, animation]) => {
24 |             return [
25 |               `.${e(`animate-${suffix}`)}`,
26 |               {
27 |                 animation,
28 |               },
29 |             ]
30 |           })
31 |         )
32 |         addUtilities(utilities, variants('animation'))
33 |       },
34 |       {
35 |         theme: {
36 |           animation: {
37 |             spin: 'spin 1s linear infinite',
38 |             ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
39 |             fade: 'fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
40 |             bounce: 'bounce 1s infinite',
41 |           },
42 |           keyframes: {
43 |             spin: {
44 |               from: { transform: 'rotate(0deg)' },
45 |               to: { transform: 'rotate(360deg)' },
46 |             },
47 |             ping: {
48 |               '0%': { transform: 'scale(1)', opacity: '1' },
49 |               '75%, 100%': { transform: 'scale(2)', opacity: '0' },
50 |             },
51 |             fade: {
52 |               '0%, 100%': { opacity: '1' },
53 |               '50%': { opacity: '.5' },
54 |             },
55 |             bounce: {
56 |               '0%, 100%': {
57 |                 transform: 'translateY(-25%)',
58 |                 animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
59 |               },
60 |               '50%': {
61 |                 transform: 'translateY(0)',
62 |                 animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
63 |               },
64 |             },
65 |           },
66 |         },
67 |       }
68 |     ),
69 |   ],
70 | }
71 | 


--------------------------------------------------------------------------------