Revert "Rename directories"

This reverts commit 9f3226aec5.

taking-flight-with-tailwind-css/code/1-adding-tailwind-directives.txt

@@ -0,0 +1,7 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

taking-flight-with-tailwind-css/code/10-hover-class-example.txt

@@ -0,0 +1,6 @@
+<a
+  href="#"
+  class="text-red-500 hover:text-red-800"
+>
+  Read more
+</a>

taking-flight-with-tailwind-css/code/11-default-variants.txt

@@ -0,0 +1,13 @@
+// defaultConfig.stub.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+  backgroundPosition: ['responsive'],
+  backgroundRepeat: ['responsive'],
+  // ...
+}

taking-flight-with-tailwind-css/code/12-default-screens.txt

@@ -0,0 +1,8 @@
+// defaultConfig.stub.js
+
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},

taking-flight-with-tailwind-css/code/13-responsive-classes.txt

@@ -0,0 +1,9 @@
+.block {
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+}

taking-flight-with-tailwind-css/code/14-responsive-class-example.txt

@@ -0,0 +1,9 @@
+<div class="block md:flex">
+  <div class="w-full md:w-1/2">
+    Column 1
+  </div>
+
+  <div class="w-full md:w-1/2">
+    Column 2
+  </div>
+</div>

taking-flight-with-tailwind-css/code/15-variants-before.txt

@@ -0,0 +1,11 @@
+// tailwind.config.js
+
+variants: {
+  alignContent: ['responsive'],
+  alignItems: ['responsive'],
+  alignSelf: ['responsive'],
+  appearance: ['responsive'],
+  backgroundAttachment: ['responsive'],
+  backgroundColor: ['responsive', 'hover', 'focus'],
+  // ...
+}

taking-flight-with-tailwind-css/code/16-variants-after.txt

@@ -0,0 +1,11 @@
+  // tailwind.config.js
+
+  variants: {
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+-   alignSelf: ['responsive'],
++   alignSelf: false,
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+-   backgroundColor: ['responsive', 'hover', 'focus'],
++   backgroundColor: ['responsive'],

taking-flight-with-tailwind-css/code/17-config-before.txt

@@ -0,0 +1,16 @@
+screens: {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+},
+colors: {
+  transparent: 'transparent',
+  black: '#000',
+  white: '#fff',
+  gray: {
+    100: '#f7fafc',
+    200: '#edf2f7',
+    300: '#e2e8f0',
+  },
+  // ...

taking-flight-with-tailwind-css/code/18-config-after.txt

@@ -0,0 +1,16 @@
+  screens: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+-   xl: '1280px',
+  },
+  colors: {
+    transparent: 'transparent',
+    black: '#000',
+    white: '#fff',
+    gray: {
+      100: '#f7fafc',
+-     200: '#edf2f7',
+-     300: '#e2e8f0',
+    },
+    // ...

taking-flight-with-tailwind-css/code/19-purge-config.txt

@@ -0,0 +1,10 @@
+module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.vue',
+    './src/**/*.jsx',
+  ],
+  theme: {},
+  variants: {},
+  plugins: [],
+}

taking-flight-with-tailwind-css/code/2-adding-custom-classes.txt

@@ -0,0 +1,10 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+/* Custom base styles */
+
+@tailwind components;
+/* Custom components */
+
+@tailwind utilities;
+/* Custom utilities */

taking-flight-with-tailwind-css/code/20-loops.txt

@@ -0,0 +1,10 @@
+{# base.html.twig #}
+
+{% for item in navItems %}
+  <a
+    class="block py-3 px-4 text-sm text-gray-800"
+    href="{{ item.url }}"
+  >
+    {{ item.title }}
+  </a>
+{% endfor %}

taking-flight-with-tailwind-css/code/21-includes.txt

@@ -0,0 +1,13 @@
+{# classes.html.twig #}
+
+<h2>Adults</h2>
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'adults',
+} %}
+
+<h2>Kids</h2>
+{% include 'class-list' with {
+    classes: page.classes,
+    type: 'kids',
+} %}

taking-flight-with-tailwind-css/code/3-layers.txt

@@ -0,0 +1,9 @@
+/* src/css/tailwind.pcss */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  /* Custom components */
+}

taking-flight-with-tailwind-css/code/4-sample-output.txt

@@ -0,0 +1,15 @@
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}

taking-flight-with-tailwind-css/code/5-webpack-config.txt

@@ -0,0 +1,10 @@
+let Encore = require('@symfony/webpack-encore')
+
+Encore
+  .disableSingleRuntimeChunk()
+  .setOutputPath('dist/')
+  .setPublicPath('/dist')
+  .addStyleEntry('app', './src/css/tailwind.pcss')
+  .enablePostCssLoader()
+
+module.exports = Encore.getWebpackConfig()

taking-flight-with-tailwind-css/code/6-postcss-config.txt

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss')
+  ]
+}

taking-flight-with-tailwind-css/code/7-webpack-output.txt

@@ -0,0 +1,9 @@
+$ npx encore dev
+
+Running webpack ...
+
+DONE  Compiled successfully in 1705ms                                                   
+
+1 files written to build
+
+Entrypoint app [big] = app.css

taking-flight-with-tailwind-css/code/8-html.txt

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>My new website</title>
+    <link rel="stylesheet" href="/dist/app.css" />
+  </head>
+  <body></body>
+</html>

taking-flight-with-tailwind-css/code/9-hover-classes.txt

@@ -0,0 +1,11 @@
+.text-red-500 {
+  color: #f56565;
+}
+
+.hover\:text-red-500:hover {
+  color: #f56565;
+}
+
+.focus\:text-red-500:focus {
+  color: #f56565;
+}

taking-flight-with-tailwind-css/code/additional-config-options.txt

@@ -0,0 +1,14 @@
+module.exports = {
+  important: true,
+  prefix: '',
+  separator: ':',
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    colors: {
+      inherit: 'inherit'
+    },
+    extend: {},
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/css-apply-after.txt

@@ -0,0 +1,17 @@
+a.btn {
+  font-size: 0.875rem;
+  text-decoration: none;
+  font-weight: 700;
+  border-radius: 9999px;
+  display: inline-block;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: #fff;
+  background-color: #3182ce;
+}
+
+a.btn:hover {
+  background-color: #2b6cb0;
+}

taking-flight-with-tailwind-css/code/css-apply-before.txt

@@ -0,0 +1,7 @@
+a.btn {
+  @apply text-sm no-underline font-bold;
+  @apply rounded-full inline-block px-5 py-2;
+  @apply text-white bg-blue-600;
+
+  @apply hover:bg-blue-700;
+}

taking-flight-with-tailwind-css/code/extending-colours.txt

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        inherit: 'inherit'
+      }
+    },
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/override-colours.txt

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    colors: {
+      inherit: 'inherit'
+    },
+    extend: {},
+  },
+  // ...
+}

taking-flight-with-tailwind-css/code/plugins-add-plugin.txt

@@ -0,0 +1,11 @@
+// tailwind.config.js
+
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('tailwindcss-list-reset')()
+  ],
+  variants: {},
+}

taking-flight-with-tailwind-css/code/plugins-generated-css.txt

@@ -0,0 +1,4 @@
+.list-reset {
+  list-style: none;
+  padding: 0;
+}

taking-flight-with-tailwind-css/code/plugins-plugin-source.txt

@@ -0,0 +1,13 @@
+// index.js
+
+module.exports = variants => ({ addUtilities }) => {
+  addUtilities(
+    {
+      '.list-reset': {
+        listStyle: 'none',
+        padding: 0,
+      },
+    },
+    variants,
+  )
+}

taking-flight-with-tailwind-css/code/tailwind-basic-config.txt

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}