├── .gitignore
├── tailwind-test
├── .gitignore
├── index.html
├── package.json
├── postcss.config.cjs
├── public
│ ├── aniara.jpeg
│ ├── fast-color.jpeg
│ ├── jurassic-hunt.jpeg
│ ├── sky-captain.jpeg
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.jsx
│ └── movies.json
├── tailwind.config.cjs
├── vite.config.js
└── yarn.lock
└── vanilla-test
├── .gitignore
├── index.html
├── package.json
├── public
├── aniara.jpeg
├── fast-color.jpeg
├── jurassic-hunt.jpeg
├── sky-captain.jpeg
└── vite.svg
├── src
├── App.css
├── App.jsx
├── assets
│ └── react.svg
├── index.css
├── main.jsx
└── movies.json
├── vite.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/tailwind-test/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/tailwind-test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Tailwind Version
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/tailwind-test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwind-test",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@tailwindcss/container-queries": "^0.1.0",
13 | "autoprefixer": "^10.4.13",
14 | "postcss": "^8.4.19",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0",
17 | "tailwindcss": "^3.2.4"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.0.24",
21 | "@types/react-dom": "^18.0.8",
22 | "@vitejs/plugin-react": "^2.2.0",
23 | "vite": "^3.2.3"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/tailwind-test/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind-test/public/aniara.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/container-queries/89c64bfd6ba29c2d32d35a13da499cdf8542d0d1/tailwind-test/public/aniara.jpeg
--------------------------------------------------------------------------------
/tailwind-test/public/fast-color.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/container-queries/89c64bfd6ba29c2d32d35a13da499cdf8542d0d1/tailwind-test/public/fast-color.jpeg
--------------------------------------------------------------------------------
/tailwind-test/public/jurassic-hunt.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/container-queries/89c64bfd6ba29c2d32d35a13da499cdf8542d0d1/tailwind-test/public/jurassic-hunt.jpeg
--------------------------------------------------------------------------------
/tailwind-test/public/sky-captain.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/container-queries/89c64bfd6ba29c2d32d35a13da499cdf8542d0d1/tailwind-test/public/sky-captain.jpeg
--------------------------------------------------------------------------------
/tailwind-test/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tailwind-test/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/container-queries/89c64bfd6ba29c2d32d35a13da499cdf8542d0d1/tailwind-test/src/App.css
--------------------------------------------------------------------------------
/tailwind-test/src/App.jsx:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import movies from "./movies.json";
3 |
4 | function Card({ image, title, subtitle, description }) {
5 | return (
6 |
7 |
13 |
14 |
{title}
15 |
{subtitle}
16 |
{description}
17 |
18 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
7 |
13 |
14 |
{title}
15 |
{subtitle}
16 |
{description}
17 |
18 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |