{"action":"created","issue":{"url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/277","repository_url":"https://api.github.com/repos/tailwindcss/tailwindcss","labels_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/277/labels{/name}","comments_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/277/comments","events_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/277/events","html_url":"https://github.com/tailwindcss/tailwindcss/issues/277","id":278626378,"number":277,"title":"Feature proposal: `children` variant","user":{"login":"benface","id":1059139,"avatar_url":"https://avatars0.githubusercontent.com/u/1059139?v=4","gravatar_id":"","url":"https://api.github.com/users/benface","html_url":"https://github.com/benface","followers_url":"https://api.github.com/users/benface/followers","following_url":"https://api.github.com/users/benface/following{/other_user}","gists_url":"https://api.github.com/users/benface/gists{/gist_id}","starred_url":"https://api.github.com/users/benface/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benface/subscriptions","organizations_url":"https://api.github.com/users/benface/orgs","repos_url":"https://api.github.com/users/benface/repos","events_url":"https://api.github.com/users/benface/events{/privacy}","received_events_url":"https://api.github.com/users/benface/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-12-01T23:25:25Z","updated_at":"2018-02-25T17:59:24Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"The idea would be to be able to do things like this:\r\n\r\n**Input CSS**\r\n\r\n```\r\n@variants children {\r\n    .block { ... }\r\n}\r\n```\r\n\r\n**Output CSS**\r\n\r\n```\r\n.children:block > * { display: block; }\r\n.block { display: block; }\r\n```\r\nNote: All `children:` variants would need to be output before the normal rule-sets so children can override rules defined by their parent (`.class` and `.class > *` have the same specificity).\r\n\r\n**HTML**\r\n\r\n```\r\n<div class=\"children:block children:my-1\">\r\n    <a>\r\n        I am a block with some vertical margin\r\n    </a>\r\n    <a>\r\n        Me too\r\n    </a>\r\n    <a class=\"mb-0\">\r\n        I don't have bottom margin\r\n    </a>\r\n</div>\r\n```\r\n\r\n**Advantages**\r\n- Less repetition in the HTML (easier to change things that should be changed together)\r\n- Easier to read\r\n- Smaller HTML file size\r\n\r\nI think this would be particularly useful for grids and lists. What do you think?"},"comment":{"url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/comments/368329934","html_url":"https://github.com/tailwindcss/tailwindcss/issues/277#issuecomment-368329934","issue_url":"https://api.github.com/repos/tailwindcss/tailwindcss/issues/277","id":368329934,"user":{"login":"benface","id":1059139,"avatar_url":"https://avatars0.githubusercontent.com/u/1059139?v=4","gravatar_id":"","url":"https://api.github.com/users/benface","html_url":"https://github.com/benface","followers_url":"https://api.github.com/users/benface/followers","following_url":"https://api.github.com/users/benface/following{/other_user}","gists_url":"https://api.github.com/users/benface/gists{/gist_id}","starred_url":"https://api.github.com/users/benface/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benface/subscriptions","organizations_url":"https://api.github.com/users/benface/orgs","repos_url":"https://api.github.com/users/benface/repos","events_url":"https://api.github.com/users/benface/events{/privacy}","received_events_url":"https://api.github.com/users/benface/received_events","type":"User","site_admin":false},"created_at":"2018-02-25T17:59:24Z","updated_at":"2018-02-25T17:59:24Z","author_association":"CONTRIBUTOR","body":"@aparajita Why? I would like to use it for things like this:\r\n```\r\n<nav class=\"children:block children:p-2 children:text-blue children:hover:text-blue-light\">\r\n    <a>\r\n        Home\r\n    </a>\r\n    <a>\r\n        About\r\n    </a>\r\n    <a class=\"text-orange hover:text-orange-light\">\r\n        Log In\r\n    </a>\r\n</nav>\r\n```"}}
{"actor":{"display_login":"benface"}}