Add new tailwind theme based on the migration design
Includes a new tailwind theme, a basic story that renders out some of the colours and text styles.
Merge request reports
Activity
assigned to @ja648
requested review from @ja648
requested review from @pdh45
removed review request for @ja648
39 40 padding: 0; 40 41 } 41 42 42 ul>li { 43 ul > li { -
Should this be going off of
.list-disc/.list-decimalclasses? And therefore be defined in the config? https://tailwindcss.com/docs/list-style-typeIdeally would match the semantics, but from my limited exposure to tailwind got the impression we were shifting style definitions to those classes.
This is meant to be a global css reset, therefore fine to go off
ulandli. It's more effort than it would be worth to add class names to all generated HTML.This CSS reset probably needs to be looked at and make sure it's just a reset and nothing more.
Edited by Joe Adams
49 50 } 50 51 51 >p { 52 > p { 52 53 padding-bottom: 16px; 53 54 color: #131922; 54 55 } 55 56 56 57 a { 57 58 text-decoration: underline; 58 text-underline-offset: 2px 59 text-underline-offset: 2px; 59 60 } 60 61 61 >p>a { 62 > p > a { 20 19 svg, 21 20 video { 22 21 display: block; 23 max-width: 100% 22 max-width: 100%; 24 23 } 25 24 26 25 *:focus { 27 @apply outline-0; 28 @apply text-focus-text; 29 @apply bg-focus-background; 26 background-color: #fd0; 27 color: #000102; 28 outline: none; 30 29 /* @TODO: This should pull from Tailwind's color variables */ - components/theme/theme.twig 0 → 100644
67 <div class="bg-link-default p-8 text-white">Link Default</div> 68 <div class="bg-link-hover p-8 text-white">Link Hover</div> 69 <div class="bg-link-active p-8 text-white">Link Active</div> 70 </div> 71 72 <h2>Typography</h2> 73 <div> 74 <div class="text-style-heading-title p-8">The quick brown fox jumps over the lazy dog</div> 75 <div class="text-style-heading-display p-8">The quick brown fox jumps over the lazy dog</div> 76 <div class="text-style-heading-lg p-8">The quick brown fox jumps over the lazy dog</div> 77 <div class="text-style-heading-md p-8">The quick brown fox jumps over the lazy dog</div> 78 <div class="text-style-heading-sm p-8">The quick brown fox jumps over the lazy dog</div> 79 <div class="text-style-heading-xs p-8">The quick brown fox jumps over the lazy dog</div> 80 <div class="text-style-body-lg p-8">The quick brown fox jumps over the lazy dog</div> 81 <div class="text-style-body-md p-8">The quick brown fox jumps over the lazy dog</div> 82 <div class="text-style-body-sm p-8">The quick brown fox jumps over the lazy dog</div> -
I imagine the team would appreciate a block in the readme going into the best practice for applying styles in our tailwind implementation. I'm new to it myself. Aware there's lots of different ways things can be achieved. Some pointers to when's best to just adjust the core config, when to extend into plugins, when to write into the
.pcssfiles directly..? Not mandatory.
-
OK so captured the need for the following follow up issues:
- Document best practice for implementing styles in Tailwind in the README
- Create a better theme story
- Review top-level reset styles
- Add in focus styles
Happy to approve this now, do we want to get these issues into the backlog so they're not lost before we merge?
@pdh45 , I’ve added them to the backlog now for product to make an assessment on priority
mentioned in commit 30464cbf